System icons

The System icons helps the user to easily identify features and functions.


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:

  • 24x24px
  • 16x16px
  • 8x8px

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.

1. 8x8px - caret in selects, 2. 16x16px - inline icons in texts, 3. 24x24px - all button icons


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.

Category examples: 1. Alert, 2. Navigation, 3. Types / Devices

General construction

1. Consistent visual language

Icons with related meaning should keep the primary image content consistent to make them easy to recognize.

1. Asset, 2. Asset move, 3. Asset network

2. Grid

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.

Schematic representation in the scale 4:1 – 1. Overall image size (24px), 2. Maximum icon size (20px), 3. Preferred attribute position (12px)

Depending on the format, the icons differ in their perceived size. This difference should be considered when designing and should be balanced.

1. Square, 2. Circle, 3. Rectangle vertical (portrait), 4. Rectangle horizontal (landscape)


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.

1. Solid: active state, 2. Bold: only on request, 3. Regular: standard use

1. No filter active, 2. Filter active

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.



1. Buttons with text, 2. Icon only buttons


Messages with different severity type


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.

1. Scaled twice: Minimum object size: 8px, 2. Scaled once, 3. Actual size: Minimum object size: 2px

Actual sizes

Sizing of images, icons and attributes: 1. Overall image size, 2. Maximum icon size, 3. Maximum attribute size

Visual equalization

Visual equalization is necessary to make the icons look the same size.

1. Square (18x18px), 2. Circle (20x20px), 3. Rectangle portrait (16x20px), 4. Rectangle landscape (20x16px)

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top