Components

Icon

Learn to easily add or change icons in our system.

Step 1: Find an icon

Font Awesome is a library of nearly 3,000 icons designed by a team of professional iconographers. If our icon library doesn’t have what you need, you can add an icon from Font Awesome.

Get started by finding the icon on Font Awesome’s website using our shared credentials. Once identified, you can download the individual svg file directly from the detail page:

Downloading an icon from Font Awesome

If you find that your unique needs are not met by Font Awesome, please reach out to the Design Systems team about custom solutions.

Step 2: Add the icon to our Figma kit

All of our icons are stored in our shared Figma library, called “Sprout Icons”. Designers with edit access in our Figma account can add/edit icons.

To add a new icon to our library, follow these steps:

  1. Import the icon. The “Sprout Icons” Figma file contains a template frame for new icons. Make a copy of this frame and copy/paste or drag your icon into it. Here’s what that looks like in Figma:
  1. Create a component. Convert the icon’s frame to a component by selecting the frame and pressing the “Create Component” button (
    K
    ).
  2. Resize the icon. The icon should be centered within the frame and sized to roughly 16px × 16px (the icon may need to be slightly smaller/larger to maintain the correct visual proportions). Look at the other icons in the file if you need a reference.
  3. Create a slice. Create a “slice” of the icon within the component (press the
    S
    key to use the slice tool) that is the exact width of the icon and at least 16px tall. You can hide the slice in the inspector once you’re done to keep things clean.
  4. Name the icon. It’s important to make sure the icon component and the slice have the same name. This is the name that will be used when searching for icons in Seeds, when developers use the component, etc. See below for some guidelines on how to name icons.
  5. Publish the library. Finally, make sure to publish your changes to the kit so that your new icon is available to everyone.

Naming icons

  • Use a hyphen “-” as the delimiter between words e.g. arrow-up.
  • Use lowercase rather than UPPERCASE, camelCase, or PascalCase.
  • Solid icons are named icon-name.
  • Outline icons append -outline to the name, e.g., icon-name-outline.
  • Use generic names for global, multi-purpose icons (e.g., tag, heart, star, etc.)
  • Use specific names for product and feature specific icons (e.g., bots, listening, etc.)

Step 3: Merge the icon into Racine

Once your icon is in Figma and the library has been published, the final step is to merge it into Racine. If you’re not comfortable with GitHub, you can ask your developer to do this step for you.

A script runs every 30 minutes that checks for new/changed icons in our Figma library. Once a change has been found, a pull request in the Racine repo will be created. Merging this pull request will integrate the new/changed icons into our component library and make them available to developers. Note that this PR will need to be approved like any other PR to Racine before it can be merged.

Here is an example of a past pull request for syncing icons between Figma and Racine.

Additional resources