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.
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:
- 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:
- Create a component. Convert the icon’s frame to a component by selecting the frame and pressing the “Create Component” button (⌥⌘K).
- 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.
- Create a slice. Create a “slice” of the icon within the component (press the Skey 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.
- 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.
- Publish the library. Finally, make sure to publish your changes to the kit so that your new icon is available to everyone.
- Use a hyphen “-” as the delimiter between words e.g.
- Use lowercase rather than
- Solid icons are named
- Outline icons append
-outlineto the name, e.g.,
- Use generic names for global, multi-purpose icons (e.g.,
- Use specific names for product and feature specific icons (e.g.,
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.