Components
Icon
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.
Sizes
| Name | Size | Application |
|---|---|---|
| Mini | 12px x 12px | Used sparingly in tight spaces. Should always be solid and never actionable. |
| Small | 16px x 16px | Used by default, this size is appropriate in most use cases. |
| Medium | 24px x 24px | Used rarely in expressive applications. |
| Large | 32px x 32px | Used occasionally in expressive applications like |
| Jumbo | 64px x 64px | Used very rarely, in expressive applications only. |
Variants
| Name | Application |
|---|---|
| Outline | For general use and "off" states. Should not be used with size="mini". |
| Solid | For "on"/applied states. Mini icons should also always be solid. |
Outline is the default variant for icons. If the variant is omitted from the icon name, an outline variant icon will be rendered.
Color
| Application | Color | Accessibility |
|---|---|---|
| Default | 10.56:1 | |
| Active | 4.58:1 |
Icons have access to the full Seeds color palette when necessary.
Static icons
Icons can act solely as visual indicators.
Stateful icons
Icons can also represent the state of a relative feature. Stateful icons use the Icon.Toggle component. Icon.Toggle provides users with feedback that an action has occurred as well as ensures a smooth transition when toggling between different icons.
Off
Stateful icons in an "off" state utilize outline icons. This means our actions are more accessible by allowing us to transition fill and color.
On
Icons that are toggled "on" become solid and change to our primary .
Disabled
Icons that are disabled rely on the disabled state, opacity: 0.4.
Tooltips
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.
State
A displays what the icon means and what it will do when clicked.
Information
A displays information connected to an otherwise static icon.
Accessibility
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.
Find icons
Depending on where you work, there are several ways to browse and discover our icons: