Iconography
Attention
Check out the whole icon palette in the resources documentation. Feel free to browse through all the assets there.
Our system icons are designed to be simple with a touch of detail. They are characteristic, yet easy to understand.
Grid and keylines
The square format with the 1px grid is the foundation for all of our system icons. This ensures the look of the set in terms of thickness, proportion, shape and weight are the same. The grid helps to design a unified set of icons and still be as flexible as possible.
Basic layout
The icons are created on a base grid of 32x32px and then reduced or enlarged to the appropriate size. The grid comes with a padding of 2px. The padding should only be exceeded if it is necessary to give additional visual weighting or if a certain element is required to give the icon its characteristic or meaning.
The keylines ensure a certain consistency in shape and proportion in the overall icon set. In exceptional cases and if the design of the icon does not allow otherwise, the design can go beyond the shape.
Stroke
The weighting of different icons should be the same as possible and should not look heavier or lighter. To make this possible, only a 2px stroke is used.
The distance between parallel strokes is at least 2px. There are a few exceptions which occurs when the icon is complex or has a certain density of line.
Angles
The basic angle is 45°. If necessary, the increments of 15° and 5° are the next steps.
Corners
Unified corner radius ensure the element is recognizable and in harmony with the set. 2px is the standard radius and can be increased in further steps of two.
Sizes
All icons are created as vector graphics and due to the base unit, the icons are limited to specific sizes.
The default size is 24x24px, but we also use a smaller and a larger variant based on the system patterns.
| Name | Size |
|---|---|
| 2xs | 12px square |
| xs | 16px square |
| sm | 24px square |
| md | 32px square |
| lg | 48px square |
| xl | 64px square |
| 2xl | 96px square |
Work in progress
This documentation is still in progress.
For a full list of icons, please take a look at the icon resources.