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.

AI icon

AI icon

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.

AI icon inside a button

AI icon inside a button

AI icon alongside a label to indicate an AI-generated value

AI icon alongside a label to indicate an AI-generated value

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.

Anatomy

All icons are based on a geometric grid system.

AI icon

AI icon

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.

AI icon hover

AI icon hover

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

Guidelines

Implementation

Specifications