System icons

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

Usage

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.

Types

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.

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

Categories

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.

system-icons-usage-types-categories
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.

system-icons-usage-general-construction
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.

system-icons-usage-general-construction2
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.

system-icons-usage-general-construction3
1. Square, 2. Circle, 3. Rectangle vertical (portrait), 4. Rectangle horizontal (landscape)

Options

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.

system-icons-usage-options
1. Solid: active state, 2. Bold: only on request, 3. Regular: standard use

system-icons-options-example-filter
1. No filter active, 2. Filter active

Do’s & Don’ts

system-icons-usage-dodont

  • 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.

Style

This chapter shows several system icon styles in the design system.

Overview

Buttons

system-icons-style-button
1. Buttons with text, 2. Icon only buttons

Messages

system-icons-style-messages
Messages with different severity type

Color

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

Scaling

It is always recommended to scale icons by the factor of two.

system-icons-style-scaling
1. Scaled twice: Minimum object size: 8px, 2. Scaled once, 3. Actual size: Minimum object size: 2px

Actual sizes

system-icons-style-sizing
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.

system-icons-style-size-compensation
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