Skip to main content

Icons

Update Icons​

Icons available both in the-wall-icons and in Prismic are stored and managed using Github actions.

Updating Icons in Figma​

Please check this detail presentation on how to add and update icons in Figma: here.

Updating Icons in the-wall-icons​

  1. First of all, please check if the icon you need does not exist already. You can check the existing icons here.

  2. To update any icon in this package, request the Design Team to make the necessary changes to the Icon Suite's visual specs.

  3. Once the Design Team has updated the visual specs, you may run the Update Icons action.

    This will automatically generate a Pull Request (PR) containing the required changes. It is very likely that new PRs with new baselines will also be generated automatically.

  4. Review all Pull Requests to ensure the updates meet expectations.

  5. Following the standard development process, once the PRs are reviewed and approved, merge the changes into the main branch. The new icon will become available when a new version of the-wall-icons is released.

Note: Do not forget to edit the commit(s) message(s) to include the corresponding Jira ticket(s) ID(s). Please align this with the design team.

Updating Icons in Prismic​

After each release of the the-wall-icons package, manually trigger the Sync Prismic Icons action.

This action will automatically invoke another GitHub action in the tbd-prismic-custom-type repository to update the icons in Prismic.

How To Use?​

Install it using NPM

npm install @ppb/the-wall-icons

or using Yarn

yarn add @ppb/the-wall-icons

To use the GenericIcon component we need to pass the icon name and a color. For the name and color values you should follow what is defined on figma for each specific spec.

All the available icons can be found here.

Web Apps​

import { GenericIcon } from "@ppb/the-wall-icons/GenericIcon/GenericIcon";
import { SystemIconName } from "@ppb/the-wall-icons";

<GenericIcon name={SystemIconName.CHEVRON_LEFT} color="var(--header-icon-back-icon-colour)" />;

Native Apps​

import { GenericIcon } from "@ppb/the-wall-icons/GenericIcon/GenericIcon";
import { SystemIconName } from "@ppb/the-wall-icons";
import { tokens } from "@ppb/the-wall-common/base-theme";

<GenericIcon name={SystemIconName.CHEVRON_LEFT} color={tokens.HeaderIconBackIconColour} />;
  • Note: Icons are also utilized in native applications. Confirm the correct path and usage for icons in native components to ensure consistency and correct references

Naming and Namespacing Icons​

  • Namespacing: Carefully manage the namespaces across brands to avoid conflicts and ensure clarity in icon usage across different platforms and brands