An icon is a symbol that is used to depict an item, action, or status. It represents an embedded icon font or a resizable vector graphic. Icons can be purely decorative or used within interactive elements.

Icons used in buttons

Icons used in avatars

When to Use

Use the icon:

• To label actions when space is limited.
• To add value for users by conveying semantic information in a standardized visual form.

Don’t use the icon:

• For decoration only. An icon must always add meaning by conveying additional semantic information.
• To link to a webpage 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.

Anatomy

All icons are based on a geometric grid system.

For more information, see Iconography – The Geometric Icon Grid System.

Variants

Icon Collections / Font Formats

The icon component can consume any of the SAP icon fonts below.

Semantic Icon Design

You can apply a value state to display the icon in the corresponding semantic color.

Icons with different semantic colors

Behavior and Interaction

If interaction is required, always display the icon in an appropriate container and apply the interaction to this container component.

Examples:

• Transparent icon button (with an integrated icon)
• Product or user icons in an interactive avatar

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

Inclusive Design

Only use icons that are universally understood or known in your business domain.

Be aware that metaphors and symbols can have local meanings that may differ from your intended meaning. A well-chosen, well-designed icon must be able to convey its meaning to all users – regardless of their country, culture, or individual background.

Related Links