Skip to content

Icons

Icons are graphical representations that symbolize objects, functions, processes, or concepts.

Element icons are not open source

The Element icons have not (yet) been open-sourced and are only available to Siemens employees. Without access to the Element icon library, the icons shown in the documentation and the examples are likely not available to you.

We are working on making a subset of icons available to the public.

Usage

Icons are used to draw attention to high-priority elements or to convey information in a simple and recognizable manner. If the necessity or clarity of an icon is uncertain, it is better to omit it.

Icons

Visit the Common Actions for further definitions of a common icon usage.

When to use icons

  • To draw attention to key elements of the interface, making them stand out.
  • To convey intuitive visual cues (e.g., a downward chevron for opening a menu).
  • To symbolically replace text when space is limited. For this use case, ensure that the icon is universally understood without labels.

Best practices

  • Icons should stay true to their meaning across the application.
  • Use icons sparsely on a page to not overwhelm users.
  • Avoid using icons as mere decorations; they must add functional value to the interface.
  • Prevent redundancy, such as adding icons to actions like "Save" and "Cancel," where the value of an icon is minimal.

Except where otherwise noted, content on this site is licensed under MIT License.