Icon

Icons are visual representations of commands, files, devices, directories, or common actions and are used to provide visual context and enhance usability

Grid

Regular icons are designed on a 20px grid and exported on a 24px art board. While preparing the artboard it's important to align elements to the pixel grid to ensure pixel-perfect icons.

Sizes

Icons sizes followed 4px grid: 16px, 20px, 24px, 32px, 40px, 48px Exceptions to this are object icons which only have two sizes and are custom designed.

Best practices

• Icons should be designed on a 20px grid and exported with padding on a 24px art board.

• Build from foundational shapes: square, circle, or rectangles (horizontal or vertical).

• Use icon depth to imply multiple or grouped items. Keep 1px space between the butt and other elements.

• All square & rectangle shapes should use a 2px border radius depending on the size of the shape and minor radius' are 1px.

• All navigation related icons should always be outlined.

• When scaling down icons, smaller elements like circles should be solid to help with legibility.

Figma

https://www.figma.com/file/ZWunn5XtvDzLlDJdqPHgyjdK/Foundations?node-id=8%3A266