Iconography
Follow these guidelines when creating icons for our product. Have questions? Talk to Richard at richard@customer.io.
Last updated
Follow these guidelines when creating icons for our product. Have questions? Talk to Richard at richard@customer.io.
Last updated
Icons provide a quick, visual cue that's independent of language. Icons can...
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.
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.
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.
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.
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).
24px
Default size used for icons throughout the app (e.g. navigation)
48px
Most commonly used in our empty states
96px
Most commonly used for success modals like starting a campaign or page states like a 404
By default, we use single color icons. As size increases (48px and 96px), additional color(s) can be added. When pairing icons with inline text, the icon should be one shade lighter than the text. This will help create balance since icons are more visually dense.
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)
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.
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.
Our most common icons use a 1.5px stroke width with rounded corners and end caps. For shapes with 90 degree angles (squares and rectangles), a rounded corner of 2px can be applied to give a lighter appearance.
Once an icon is ready to be added to the system, the strokes can be outlined so it is flattened as a vector with filled shapes. This is done to accommodate our UI's implementation of applying colors.
If you're modifying an existing icon or creating a new one, don't forget to notify #team-documentation – they use the same icons as our UI.
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.
