Search…
Iconography
Follow these guidelines when creating icons for our product. Have questions? Talk to Richard at [email protected]

The value of icons

Icons provide a quick, visual cue that's independent of language. Icons can...
  1. 1.
    Make complex areas more scannable
    Icons give quick indications of meaning within large amounts of data. For example, a workflow item can contain multiple icons: a message icon representing the type of message, a person icon representing the number of people in a delay, and a draft icon to represent sending behavior. These three icons allow a person to easily scan larger workflow to see what the campaign consists of, where people are, and how messages are sent.
  2. 2.
    Help navigate The collapsed navigation contains icons to help indicate where you are. Within a page you might see multiple buttons, but knowing you need to "add content", you can quickly scan for the pencil icon and find the correct button.
  3. 3.
    Hide less important info Icons can indicate the availability of supplementary information. For example, chevrons indicate there's something that will expand or a question icon might indicate there's additional help text.
  4. 4.
    Personality and visual interest Purely textual information is monotonous. And we're not a monotonous company. Icons can help bring the brand into the product with their style and substance. Empty states are a perfect opportunity to have a more ornamental version of a functional icon to help add personality, but also better communicate the concept.

Icon Usage

Size

The default size of our icons is 24px, the most common use in our app. There are some instances where icons are used smaller (within a background container) or larger (blank state or empty state).
Size
Use case
Example
8px
Chevrons
12px
Duotone, close icon
24px
Default
48px
Small blank states
96px
Large blank or success states

Color

In general, we use duo-tone icons that are two shades of a single color. As size increases (48px and 96px, additional color(s) can be added.
When pairing icons with text, the icon should be one shade lighter than the text. This will help create balance since icons are more visually dense.
General
With background
Color
Hover
Selected
Disabled
Use cases
Grey-500
Grey-700
Purple-700
Grey-300
Default, most icons with text
Grey-400
Grey-500
Chevrons, close icons, unfinished checkmarks
Purple-700
Purple-900
Links with an icon, important help icons
Green-700
Green-900
Success icons
Red-500
Red-700
Error icons
Icon color
Background color
Use case
Green-900
Green-200
Sending behavior icon, Enabled text
Yellow-900
Yellow-200
Sending behavior icon
Red-900
Red-200
Sending behavior icon

Designing an icon

Start with the concept

The goal is clarity and brevity. We have two guiding principles: simple over detailed and standard over clever. Icons must be simple enough to be legible at small sizes as most icons are functional, and not decorative. We have customers in 100s of industries and many countries, so when we can, we should use icons that are globally standard and use common metaphors. When we do need a niche icon, we should test with users to make sure it represents the concept.
Questions you can ask:
  • What are your trying to communicate?
  • Is the icon recognizable and readable?
  • What can be taken away while maintaining the meaning?
  • Can you guess what the icon means without a label?
  • To help brainstorm the visual depiction...
    • What's the pictogram version? (actual thing it's supposed to represent)
    • What's the ideogram version? (idea or feeling it's supposed to represent)
    • What's the symbol version? (the learned convention it's supposed to represent)

Composition

Our most common size for icons is 24px so that's a good place to start. This aligns with default line-height (24px) and provides appropriate spacing within the icon's container. For example, a completely circular icon will actually be 20x20px.
All icons should be aligned to the pixel grid. This is critical to icons rendering clean and clear. The easiest way to adhere to this is to start with the icon template in Figma. This template includes a 24x24px frame with a 2px padding border and four key shapes to help maintain proportions.
In addition to the pixel grid, there is the optical grid. Creating a metrically perfect icon may not "look right" because the icon's "center of gravity" may feel off. Adjust icons based on their optical alignment helps create a sense of a balance. This is most noticeable when creating icons that are contained with a background shape.
DO - optically aligned
DON'T - metric aligned (to much space in top left)
Update example to reflect updated style 🚧
In some cases, you might need larger versions of icons for empty states or other applications. As the size of the icon increases, so should the complexity of the icon.

Update example to reflect updated style 🚧

Tips:

  • Check out The Noun Project for concepts, symbols, and metaphors.
  • Start with geometric shapes. Combining rectangles, squares, and circles will help create a more polished icon.
  • Start with creating a larger version and then remove detail as you scale the icon down.
  • Start by designing in grayscale so you're not dependent on color (mainly for larger versions).
  • Use pixel preview (Ctrl + P) to get a better sense of pixel bleeds.
Copy link
On this page
The value of icons
Icon Usage
Size
Color
Designing an icon
Start with the concept
Composition
Tips: