Adding a new icon

A step-by-step guide to adding a new icon to Ariane’s icon library.

Leverage the existing library

First, make sure the icon you are wanting to add isn’t similar to the ones that already exist as we don’t want to end up with a lot of duplicative icons.

  1. You can check the Icons Library or Storybook sticker sheet to see all currently available icons
  2. If you do find something similar but aren’t 100% sure if you should use it, ask in #design-system. It might mean something can be improved, and that’s great!

Prepare your icon for production

  1. For an icon to work well as an SVG, it must be unified and flattened. This can be done by the following process:
  2. Exporting an Icon - Step 1

    Exporting an Icon - Step 1

    1. Select all the shapes of the icon
    2. Select Union selection
    3. Then Flatten selection
  3. For an icon to render as expected in code as an icon font, it must have a non-zero rule. This can be done by the following process:
  4. Exporting an Icon - Step 2

    Exporting an Icon - Step 2

    1. Launch the plugin named Fill Rule Editor that is preinstalled in our Figma organization
    2. Select the vector object you want to edit
    3. Toggle to non-zero setting
    4. If your holes don’t look correct, click on the loop to reverse the orientation
  5. Lastly, for overrides to be preserved when the icon instances change, you should rename the shape to icon

Create a Figma Library Branch

  1. Create a new branch in the Icons Library and request a review from Alberto Calvo, Luis Recuero Pita, and Philip Bordallo
  2. Once the branch is approved and merged, a new version will be published
    1. This now means the Icon is now part of the Ariane Figma library and can be used freely in designs

Deploy it to the React library

Someone on the DS team will sync Supernova and a new PR for the new Icon to exist in code will be opened, and once that is approved and merged, it will be part of the main branch.

  1. One command must be run to sync Supernova and build the icons in the monorepo:
    pnpm --filter @mazeapp/ariane run build-icons
  2. This now means the Icon is now part of the Ariane React library and can be used freely in code