Icons symbolize common actions, features, and themes throughout our app.
Icons should be used intentionally and be paired with text, when possible, for accessibility. Icons can function as both interactive and static elements.
|Mini||Used sparingly in tight spaces.|
|Default||Used often any time an icon is needed.|
|Medium||Used rarely in expressive applications.|
|Large||Used occasionally in expressive applications like |
|Jumbo||Used almost never in only expressive applications.|
Icon has access to the full Seeds color palette when special circumstances call for it.
Icons can act solely as visual indicators.
Icons can also represent the state of a relative feature. Stateful icons use the
Icon.Toggle provides users with feedback that an action has occurred as well as ensures a smooth transition when toggling between different icons.
Stateful icons in an “off” state utilize outlined icons. This means our actions are more accessible by allowing us to transition fill and color.
Icons that are toggled “on” become filled and change to our primary blue.700.
Icons that are disabled rely on the
Button disabled state,
Tooltips provide new and existing users with legible text that makes the meaning of an icon immediately clear. As Sprout uses primarily symbolic iconography to create conventions, Sprout users are never left guessing the meaning or state of an icon because they, or their computer, are able to read and understand it’s meaning.
Tooltip displays what the icon means and what it will do when clicked.
Tooltip displays information connected to an otherwise static icon.
The visual presentation of graphical objects that are essential for understanding 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.
You can discover currently available icons on their respective platforms:
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 new icon on Font Awesome’s website. Once identified, you can download the library and locate the corresponding source
SVG file or download the individual file directly from the detail page.
If you find that your unique needs are not met by Font Awesome, please reach out to the design systems team about custom solutions.
In a high level icon library that spans across numerous products, proper, easy to understand naming is essential. See naming guidelines detailed below:
- 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.
- Use specific names for product and feature specific icons.