When to use
Use system icons in the following cases:
- For buttons, to support the meaning of the label.
- For other elements, to visually structure or help identify the elements.
- To replace large text in minute spaces.
The system icons are available in the following sizes:
These are scalable in a ratio @2x. It is recommended to have a minimum of 2x2 units for the smallest part of any icon. Since pixel perfection is preferred, do not use halftone dots.
The following categories are available: action, alert, audiovisual, communication, content, device, editor, file, hardware, image, map, navigation, notification, places, social and toggle. Each icon shall be assigned to one specific category.
1. Consistent visual language
Icons with related meaning should keep the primary image content consistent to make them easy to recognize.
Maintain the grid accuracy and do not dismiss safety margin. Since the icons must also work for very small sizes, low resolution of icons must be handled carefully while designing.
3. Recommended maximum sizes
Depending on the format, the icons differ in their perceived size. This difference should be considered when designing and should be balanced.
Use the icons in regular style for standard use. Solid icons are used for active or pressed states. The bold variant is a supplement to the two basic versions. It is used additionally when the two standard versions are not sufficient.
Do’s & Don’ts
- Maintain consistency with the font weights in the same context and state.
- Do not use different font weights of icons within the same context and with the same state or importance.
This chapter shows several system icon styles in the design system.
As a rule, icons inherit their color from sibling or parent elements. However, depending on the state or context of the icon, the color can be chosen within a reasonable range of contrast.
Sizing and Spacing
It is always recommended to scale icons by the factor of two.
Visual equalization is necessary to make the icons look the same size.