Skip to main content

Icon

<ui5-icon>

The ui5-icon component represents an SVG icon. There are two main scenarios how the ui5-icon component is used: as a purely decorative element, or as an interactive element that can be focused and clicked.

Usage​

  1. Get familiar with the icons collections.

Before displaying an icon, you need to explore the icons collections to find and import the desired icon.

Currently there are 3 icons collection, available as 3 npm packages:

  1. After exploring the icons collections, add one or more of the packages as dependencies to your project.

npm i @ui5/webcomponents-icons npm i @ui5/webcomponents-icons-tnt npm i @ui5/webcomponents-icons-business-suite

  1. Then, import the desired icon.

import "@ui5/\{package_name\}/dist/\{icon_name\}.js";

For Example:

For the standard "SAP-icons" icon collection, import an icon from the @ui5/webcomponents-icons package:

import "@ui5/webcomponents-icons/dist/employee.js";

For the "tnt" (SAP Fiori Tools) icon collection, import an icon from the @ui5/webcomponents-icons-tnt package:

import "@ui5/webcomponents-icons-tnt/dist/antenna.js";

For the "business-suite" (SAP Business Suite) icon collection, import an icon from the @ui5/webcomponents-icons-business-suite package:

import "@ui5/webcomponents-icons-business-suite/dist/ab-testing.js";

  1. Display the icon using the ui5-icon web component. Set the icon collection ("SAP-icons", "tnt" or "business-suite" - "SAP-icons" is the default icon collection and can be skipped) and the icon name to the name property.

<ui5-icon name="employee"></ui5-icon> <ui5-icon name="tnt/antenna"></ui5-icon> <ui5-icon name="business-suite/ab-testing"></ui5-icon>

Keyboard Handling​

  • [Space] / [Enter] or [Return] - Fires the click event if the mode property is set to Interactive.
  • [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.

ES6 Module Import​

import "@ui5/webcomponents/dist/Icon.js";

Basic Sample​

Properties​

design​

DescriptionDefines the component semantic design.
Type"Contrast" | "Critical" | "Default" | "Information" | "Negative" | "Neutral" | "NonInteractive" | "Positive"
Default"Default"
Since1.9.2

name​

DescriptionDefines the unique identifier (icon name) of the component.
To browse all available icons, see the SAP Icons, SAP Fiori Tools and SAP Business Suite
Example: name='add', name='delete', name='employee'.
Note: To use the SAP Fiori Tools icons, you need to set the tnt prefix in front of the icon's name.
Example: name='tnt/antenna', name='tnt/actor', name='tnt/api'.
Note: To use the SAP Business Suite icons, you need to set the business-suite prefix in front of the icon's name.
Example: name='business-suite/3d', name='business-suite/1x2-grid-layout', name='business-suite/4x4-grid-layout'.
Typestring | undefined
Defaultundefined

accessibleName​

DescriptionDefines the text alternative of the component. If not provided a default text alternative will be set, if present.
Note: Every icon should have a text alternative in order to calculate its accessible name.
Typestring | undefined
Defaultundefined

showTooltip​

DescriptionDefines whether the component should have a tooltip.
Note: The tooltip text should be provided via the accessible-name property.
Typeboolean
Defaultfalse

mode​

DescriptionDefines the mode of the component.
Type"Image" | "Decorative" | "Interactive"
Default"Image"
Since2.0.0

Slots​

No slots available for this component.

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

NameDescription
rootUsed to style the outermost wrapper of the ui5-icon.

More Samples​

Design​

The Icon supports multiple designs.

Custom Styling​

The Icon allows style customization via pure CSS, applied on the tag.

Interactive​

The Icon can be interactive - clickable and focusable.

SAP Fiori Tools Icons​

The SAP Fiori Tools Icons are available in the @ui5/webcomponents-icons-tnt package.

SAP Business Suite Icons​

The SAP Business Suite Icons are available in the @ui5/webcomponents-icons-business-suite package.