Icons

UI icons symbolize commands, navigation, utility or common actions. They also provide additional visual context and enhance usability by:

• Offering a form of “visual shorthand”
• Lowering cognitive load
• Using available space better
• Using familiar shapes and metaphors to communicate concepts in simple graphic forms

Grid

Design icons on a 20px grid and export on a 24px artboard. Constrain the content of an icon to the “live area” of the icon grid. The live area and padding ensure sufficient display room and consistent scaling of the icon set.

Shapes

Create icons on the grid using basic foundational shapes. Adhering to these shapes ensures consistent proportionality of iconography throughout the icon set.

Sizes

Icons scale to display across three sizes: small (16px), medium (24px) and large (32px).

Clearance

Adequate space around the icon allows for legibility and touch. A minimum touch target area of 40px is recommended for standalone iconography.

When the mouse and keyboard are the primary input methods or when icons are paired in-line with text, measurements may be condensed to accommodate denser layouts. Icon size should align to the line-height of the paired text element.

Icons are built from foundational shapes within the icon grid and align to the pixel grid to ensure clarity when scaling. Make optical corrections where necessary.

Minimize use of depth or implied perspective unless necessary to convey the relationship of grouped items.

Constructed with a 2px stroke. Strokes have a 1px rounded terminus or butt-cap.

Square and rectangular shapes have 1px rounded exterior corners and sharp interior angles.

Filled versions of select icons are available and typically represent an “on” or active state of the action, feature or validation colors. When icons are paired with a complex or noisy background, consider using a filled icon (e.g. a filled location pin on a map environment).

Inverse display is available when paired with darker backgrounds.