AI Icon
Intro
An AI icon lets users know where embedded AI notifications, features, and actions are available within the user interface to assist users with their work.
Intentional and consistent use of color results in a consistent user experiences across all SAP AI features and SAP product portfolios.
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 in which the icon is embedded.
Do:
- Use the AI icon to identify embedded AI notifications and embedded AI features, actions, or results.
- Use the embedded AI icon in a solid, monochromatic color.
- Ensure the AI icon is determined by and follows the component specification of the component in which it is embedded.
- Apply SAP design system guidance for prescribed icon treatment and colors.
Don’t:
- Don’t use the AI icon for decoration only. An icon must always add meaning by conveying additional semantic information.
- Don’t use the AI icon to link to a web page or object. Use a link instead.
- If you require an interactive icon to visualize an action, use the transparent icon button (with 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 this container component.
Hover states could be utilized 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 or adaptive behavior. It follows the responsive or adaptive behavior of the surrounding layout container or component, such as a form or table.
<e-icon icon="ai"></e-icon>