Components

Icon

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

Tip!
Tip!
Looking for an icon? Click here to search for one. We also have a guide for adding a new icon.

Icons should be used intentionally and be paired with text, when possible, for accessibility. Icons can function as both interactive and static elements.

Sizes

NameSizeApplication
Mini12px x 12pxUsed sparingly in tight spaces.
Default16px x 16pxUsed often any time an icon is needed.
Medium24px x 24pxUsed rarely in expressive applications.
Large32px x 32pxUsed occasionally in expressive applications like
Jumbo64px x 64pxUsed almost never in only expressive applications.

Color

ApplicationColorAccessibility
Default10.56:1
Active4.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 outlined icons. This means our actions are more accessible by allowing us to transition fill and color.

On

Icons that are toggled “on” become filled 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:

Find icons

Depending on where you work, there are several ways to browse and discover our icons: