Introduction
Icons should be used to maximize comprehension and reduce cognitive load when you need to shift attention towards a particular action, command, or section. Our icons are designed with our brand personality baked in.
Principles
Each icon is reduced to its minimal form, expressing essential characteristics. Icons are designed to be clear, minimal, and consistent.
Base
Iconography grid
Design two versions of each icon: a 16px version, and a 24px version.
Stroke
Use a consistent stroke width of 1.5px for both 16px and 24px icons.
Reference shape
General view
Circle
16x16px at 16 grid. 22x22px at 24 grid.
Square
14x14px at 16 grid. 20x20px at 24 grid.
Rectangle
12x16px at 16 grid. 18x24px at 24 grid.
Caps and joins
General view
Corners
Use 1px radius for corners unless a different radius makes the icon more recognizable, and use 0.25px radius for small filled elements inside icons, like filled arrowheads.
Gaps
Use a 1px gap to separate overlapping objects and use a 1.5px gap around modifier elements, like lines and arrows.
Usage guidelines
Use icons infrequently – if you’re questioning an icon’s use, it probably doesn’t need to be used at all. As a general rule, icons should be used in combination with meaningful text to support users progressing through the product in an accessible manner.
Perspective
Use a 2D perspective, unless depth makes the icon more recognizable.
Use depth when it adds meaning. Don't use a 2D perspective if it makes the icon unrecognizable.
Clear message
Optimize the details to make a simple and clean icon.