UI5 Web Components
Search

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

Keyboard Handling

  • [SPACE, ENTER, RETURN] - Fires the click event if the interactive property is set to true.
  • [SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.


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 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.
accessibleRole
accessible-role
string
""
Defines the accessibility role of the component.
since v1.1.0
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 the component.
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 component should have a tooltip.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel