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.
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
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
fillcolors unless it is a branded icon.
- New icons should be placed in the
iconsfolder 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.
- 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.
Adding additional icons should refer to this README file.
Outline vs filled icons
- Filled icons should be used for most general use cases and all non-actionable icons
- Outline icons should be used for actions that require a visual state change or appear in a sequence that includes one or more stateful icons.
- Message actions should always use outline icons
- Third-party branded icon principals always supersede these guidelines
Our icons adhere to our
8px grid. The following sizes and padding are recommended:
|Mini||space size 200|
|Default||space size 300|
|Medium||space size 350|
|Large||space size 400|
|Jumbo||space size 500|
Legacy sizing is available for usage in existing code. Legacy sizes are not pixel perfect and are discouraged in new work.
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.
- Use lowercase rather than capitalization or
- 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
- 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.
- The visual presentation of graphical objects that are essential for understanding the content or functionality have a contrast ratio of at least 4.5:1 against the adjacent color(s), except for the following:
- Thicker: where the minimum width and height of the graphical object is at least 3 CSS pixels the graphic has a contrast ratio of at least 3:1.
- Sensory: Non-text content that is primarily intended to create a visual sensory experience has no minimum contrast requirement.
- Logotypes: Graphics that are part of a logo or brand name have no minimum contrast requirement.