Iconography

Icons are visual representations of commands, devices, directories, or common actions.

Icons should be used in a purposeful manner to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section. Use them infrequently – if you’re questioning an icon’s use, it probably doesn’t need to be used at all.

Our icons are designed with our brand personality baked in, aiming to balance our human side with function.

View our icons in our figma DS • Foundations / Iconography

Style

Variations

Open

Our icons have variations to work within a given context. There will be a line version, which can be accompanied by a filled version. Use the line version of our icon in most cases as they are visually balanced, so more than one can be used when close together.

Often, a filled version can be used to represent an action or command that has been carried out, such as using a filled star when a post has been “favorited“. You can use color to further reinforce this interaction and change.

Size

There are three icon sizes in our design system:

16px (small)

Small icons are best used when space is limited. We use small icons in our components such as a chevron-down in the select component or a cross-circle-filled in populated text fields.

24px (medium)

Medium icons are used in the majority of our interface. These are our standard size.

32px (large)

Large icons are used sparingly to emphasize a concept or when space is plentiful. Wherever it’s used, consider the fidelity of the icon in the space it’s being used. (If there's plenty of room, a spot illustration might be more appropriate).

In general, consider the context of the icon when adjusting the size such as the size of other icons surrounding it and the balance of other UI elements.