Iconography

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

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.

Section - Grid sizes

Stroke

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

Section - Stroke

Reference shape

General view

Section - Reference shapes. General

Circle

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

Section - Reference shapes. Circle

Square

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

Section - Reference shapes. Square

Rectangle

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

Section - Reference shapes. Rectangle

Caps and joins

General view

Section - Caps and joins. General

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.

Section - Corners 01
Section - Corners 02

Gaps

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

Section - Gaps 02

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.