Iconography

Iconography

Icons can help you communicate complex functions or content simply. For example, if you want to give your users the option to delete elements, use the trash can icon. A globally understood icon that is associated with a delete function.

1. Anatomy

If you want to create pixel perfect icons, there are different structures in which you can create icons. The smallest is 16x16 px, then 24x24px or 32x32 px. You can create icons within this grid. This way you can make sure that the pixels are perfectly laid out.

2. Type

Depending on what style you want to give your app, you can switch between outline and filled icons. We have integrated both versions into our design system.

3. Usage

Icons are particularly suitable in combination with other components such as buttons. But they can also be helpful in navigation. There you have limited space for text. Explanatory icons can help place as many important functions as possible.

If you want to ensure that icons are easy to use for everyone, you always create a 48x48 clickable area. This is the optimal size to ensure that usability is perfect.