_Adding a new icon

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

Add a new icon


First, ensure the icon you want to add isn’t similar to the ones that already exist, as we don’t want to end up with many duplicative icons. You can check the Icons Library or Storybook sticker sheet to see all currently available icons.

If you 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

Flatten all shapes

Exporting an Icon - Step 1

An icon must be unified and flattened to work well as an SVG. The following process can do this:

  1. Select all the shapes of the icon
  2. Select Union selection
  3. Then Flatten selection

Ensure correct rendering

Exporting an Icon - Step 2

For an icon to render as expected in code as an icon font, it must have a non-zero rule. The following process can do this:

  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

Ensure preserving overrides in Figma

Lastly, to preserve overrides when the icon instances change, you should rename the shape to icon in the layer list.

Add the icon to the Figma library

  1. Open the Icons Library and create a new branch
  2. Add the production-ready icon to the collection, and convert it to a component
  3. Add SVG export settings to the component
  4. Request a branch review from Alberto Calvo, Luis Recuero Pita, or Philip Bordallo
  5. Once the branch is approved and merged, the new version will be published. This now means the Icon is now part of the Ariane Figma library and can be used freely in designs

Deploy it to the production 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