Intro

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

Do

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

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

undefined

All icons are based on a geometric grid system.

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

Types

Icon Collections / Font Formats

The icon component can consume any of the SAP icon fonts below[internal_only], as well as custom icon fonts created by SAP product teams[/internal_only].

<div> <div>Icon Font</div> <div>Usage</div> </div> <div> <div><a href="https%3A%2F%2Fui5.sap.com%2Ftest-resources%2Fsap%2Fm%2Fdemokit%2FiconExplorer%2Fwebapp%2Findex.html%23%2Foverview%2FSAP-icons">SAP Icons</a></div> <div>The default icon set.</div> </div> <div> <div><a href="https%3A%2F%2Fui5.sap.com%2Ftest-resources%2Fsap%2Fm%2Fdemokit%2FiconExplorer%2Fwebapp%2Findex.html%23%2Foverview%2FBusinessSuiteInAppSymbols">SAP Business Suite</a></div> <div>Icons tailored to SAP S/4HANA application scenarios.</div> </div> <div> <div><a href="https%3A%2F%2Fui5.sap.com%2Ftest-resources%2Fsap%2Fm%2Fdemokit%2FiconExplorer%2Fwebapp%2Findex.html%23%2Foverview%2FSAP-icons-TNT">SAP Fiori Tools</a></div> <div>Icons created for SAP BTP applications.</div> </div>

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:

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.

[internal_only]For more information on intercultural considerations, see Meanings of Metaphors and Symbols.[/internal_only]

Components

Implementation

Specifications

Components

Implementation