Components

Icon

Icons symbolize common actions, features, and themes throughout our app.

Icons should be used sparingly, with intentional purpose and meaning, and be paired with text for clarity. Icons can function contextually as both interactive and static elements.

Find icons

You can discover currently available icons on their respective platforms:

  • Seeds icon search
  • Sketch library
  • Font Awesome - 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.

Adding an icon

Get started by finding the new icon on Font Awesome’s website. One identified, download the library and locate the corresponding source SVG file in svgs > solid folder of the library. If you have difficulty with this step, reach out to a member of the design systems or product design teams. Sprout also maintains licenses for Font Awesome Pro, details and credentials can be found here. Proprietary or custom icons need to be created in certain cases. Please reach out to product design with questions about creating or obtaining custom icons. Once an icon SVG has been obtained, developers can make a Pull Request to either racine or bloom-dearborn. After the pull request has been merged, developers will need to bump the Racine or Dearborn version used in their project to use the icon.

Guidelines for engineers

  • The source SVG icon file should not contain any fill colors unless it is a branded icon.
  • New icons should be placed in the icons folder of your local copy of the Racine repo.
  • SVG files should not be minified or otherwise optimized before they are added to the library in GitHub — the SVG Sprite tools used by Racine and Dearborn handle optimization automatically.

Sprout designers

  • Exporting Font Awesome SVG files from design software can cause unintended side effects. Please provide developers with the source SVG file from Font Awesome’s library when possible.
  • Refer to this guide for details and instructions on adding a new or custom icon.

Bambu designers

Adding additional icons should refer to this README file.

Using icons

Seeds icons can be consumed in code through our React based Racine and Dearborn Icon components, downloaded directly on GitHub or pulled in from our Sketch library.

Sizing icons

Our icons adhere to our 8px grid. The following sizes and padding are recommended:

SizeDescriptionPadding
12px (Legacy)Minispace size 200
16pxDefaultspace size 300
24px (Legacy)Mediumspace size 350
32pxLargespace size 400
64pxJumbospace size 500

Legacy sizing is available for usage in existing code. Legacy sizes are not pixel perfect and are discouraged in new work.

An example of padded icons. A 16px an icon occupies 32 total pixels of space.
An example of padded icons. A 16px an icon occupies 32 total pixels of space.

Naming icons

In a high level icon library that spans across numerous products, proper, easy to understand naming is essential. It is also important that icons have the same meaning in in all context, e.g., a building icon should represent “business” in one context and “partner program” in another, nor should a star represent “favorite” in one context and “rating” in another. See naming guidelines detailed below:

  • Use a hyphen “-” as the delimiter between words e.g. arrow-up
  • Use lowercase rather than capitalization or camelCase or PascalCase
  • Use generic names for global, multi-purpose icons, e.g., an arrow that is be used for sorting in both Analytics and the Smart Inbox should not be called inbox-arrow.
  • Use specific names for product and feature specific icons, e.g., of a calendar icon is used to represent a feature in one context, it should not be used for a date picker in another.

Do’s and don’ts

  • DO: Use universal icons sourced from Font Awesome when possible.
  • DON’T: Use icons at an arbitrary size. Please see the Sizing Icons section for guidance.
  • DON’T: Re-use a branded icon for another purpose e.g. if is for ads, don’t use it for sales leads feature.
  • DON’T: Modify partner icons. Certain partners such as Google Analytics specify require multi toned icons, these principals must be upheld in our various uses.
  • DON’T: Add single purpose, temporary or one off icons that have a high potential of never being used again. Icons should never be duplicated, if naming discrepancies arise, the icon in question should be renamed to resolve.

Accessibility

Additional resources