AI Icon
An AI icon lets users know where embedded AI notifications, features, and actions are available within the UI to assist them with their work.
Usage
The AI icon can be used alone, in buttons, or alongside labels or text to indicate content powered or generated by AI. The embedded AI icon is always a solid, monochromatic color determined by the component it is embedded in.
Do:
- Use the AI icon to identify embedded AI notifications, features, actions, or results.
- Use the embedded AI icon in a solid, monochromatic color.
- Ensure the AI icon follows the component specification of the component it is embedded in.
- Apply SAP Design System guidance for prescribed icon treatment and colors.
Don't:
- Don't use the AI icon for decoration only — it must always convey semantic meaning.
- Don't use the AI icon to link to a web page or object (use a link instead).
- If you require an interactive icon, use the transparent icon button with an integrated icon instead.
- Don't use colors other than the prescribed colors.
Behavior and Interaction
If interaction is required, always display the icon in an appropriate container and apply the interaction to the container component.
Hover states can be used for AI explainability, to reveal more AI features, or to toggle the AI feature on and off.
Responsive Behavior
The icon component does not have its own responsive behavior — it follows the behavior of the surrounding layout container or component.