Clarity and contextual relevance

• Icons should be easily recognizable and understandable.
• Use icons that are contextually appropriate and convey the intended message.
• Avoid using icons that could be misinterpreted or confusing.

Status icons

• We provide a set of standard icons to convey status.
• These icons follow a criticality hierarchy and should be used with the corresponding colors: alarm, critical, warning, success, and info.
• To ensure consistency across different applications, do not use these icons outside of their intended use cases.

Icons within components

• Most of our components come with built-in icons or offer an optional icon slot.
• Ensure consistent use of components, either with or without icons, within the same context.

Standalone icons

• A standalone icon, without textual description, has to be paired with a tooltip that describes the meaning of the icon.
• Make sure a description can be read out by screen readers.