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


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.


Each icon is reduced to its minimal form, expressing essential characteristics. Icons are designed to be clear, minimal, and consistent.


Iconography grid

Design two versions of each icon: a 16px version, and a 24px version.

Section - Grid sizes


Use a consistent stroke width of 1.5px for both 16px and 24px icons.

Section - Stroke

Reference shape

General view

Section - Reference shapes. General


16x16px at 16 grid. 22x22px at 24 grid.

Section - Reference shapes. Circle


14x14px at 16 grid. 20x20px at 24 grid.

Section - Reference shapes. Square


12x16px at 16 grid. 18x24px at 24 grid.

Section - Reference shapes. Rectangle

Caps and joins

General view

Section - Caps and joins. General


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.

Section - Corners 01
Section - Corners 02


Use a 1px gap to separate overlapping objects and use a 1.5px gap around modifier elements, like lines and arrows.

Section - Gaps 01

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.


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.