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:

• @ui5/webcomponents-icons represents the "SAP-icons" collection and includes the following icons.
• @ui5/webcomponents-icons-tnt represents the "tnt" collection and includes the following icons.
• @ui5/webcomponents-icons-business-suite represents the "business-suite" collection and includes the following icons.

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

3. 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";

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

Description	Defines the component semantic design.
Type	"Contrast" | "Critical" | "Default" | "Information" | "Negative" | "Neutral" | "NonInteractive" | "Positive"
Default	"Default"
Since	1.9.2

name

Description	Defines 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'.
Type	string | undefined
Default	undefined

accessibleName

Description	Defines 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.
Type	string | undefined
Default	undefined

showTooltip

Description	Defines whether the component should have a tooltip. Note: The tooltip text should be provided via the accessible-name property.
Type	boolean
Default	false

mode

Description	Defines the mode of the component.
Type	"Image" | "Decorative" | "Interactive"
Default	"Decorative"
Since	2.0.0

Slots

No slots available for this component.

Events

click

Description	Fired on mouseup, SPACE and ENTER. - on mouse click, the icon fires native click event - on SPACE and ENTER, the icon fires custom click event
Type	CustomEvent
Since	2.11.0
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

Name	Description
root	Used 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.