Icon

@ui5/webcomponents
<ui5-icon>

Basic Icons

<ui5-icon name="activate"></ui5-icon>
<ui5-icon name="activities"></ui5-icon>
<ui5-icon name="add-equipment"></ui5-icon>
<ui5-icon name="add-document"></ui5-icon>
<ui5-icon name="add-employee"></ui5-icon>
	

SAP Fiori Tools Icons

<ui5-icon name="tnt/antenna"></ui5-icon>
<ui5-icon name="tnt/api"></ui5-icon>
<ui5-icon name="tnt/modem"></ui5-icon>
<ui5-icon name="tnt/data-store"></ui5-icon>
<ui5-icon name="tnt/flow"></ui5-icon>
	

Customized Icons

<ui5-icon class="samples-margin" name="employee" style="width:3rem;height:3rem;font-size:1.5rem;color:crimson;background-color:#fafafa" ></ui5-icon>
<ui5-icon class="samples-margin" name="menu" style="width:3rem;height:3rem;font-size:1.5rem;color:crimson;background-color:#fafafa"></ui5-icon>
	

Overview

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 a visually appealing clickable area in the form of an icon button.

A large set of built-in icons is available and they can be used by setting the name property on the ui5-icon. But before using an icon, you need to import the desired icon.
For the standard icon collection, you have to import an icon from the @ui5/webcomponents-icons package:
import "@ui5/webcomponents-icons/dist/employee.js";
For the SAP Fiori Tools icon collection (supported since 1.0.0-rc.10), you have to import an icon from the @ui5/webcomponents-icons-tnt package:
import "@ui5/webcomponents-icons-tnt/dist/antenna.js";

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleName
accessible-name
string
""
Defines the text alternative of the ui5-icon. 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.
interactive
boolean
false
Defines if the icon is interactive (focusable and pressable)
since v1.0.0-rc.8
name
string
""
Defines the unique identifier (icon name) of each ui5-icon.
To browse all available icons, see the Icon Explorer.
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'.
showTooltip
show-tooltip
boolean
false
Defines whether the ui5-icon should have a tooltip.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel