Icon

The Icon component is a handy tool for controlling size, and flipping right-to-left for international use. Icons are utilized from Calcite's UI Icon library that contains hundreds of unique concepts.

Overview

Icons can be actionable or illustrative graphical representations of intent. For instance they can be used for wayfinding throughout the interface or represent interactive elements - on their own or in combination with text content. Meaningful and consistent use of icons throughout the interface can help the user easily navigate through workflows.

Use icons sparingly to ensure their meaning is conveyed - overloading the interface with graphical elements can be distracting and reduce the significance of those used.

Sample

Usage

• Use in Buttons, FABs, or Links when accurately supporting the component's action
• Use in Dropdowns, Comboboxes, Accordions, etc. when it helps with clear decision making
• Anchor to an edge or corner of a view as a supportive action

Best practices

Use Icons to reinforce meaning

Use Icons alongside text to reinforce meaning. Avoid relying on color alone to communicate status or importance because color differences may not be distinguishable to all users. Use color in combination with text so the meaning remains clear. Refer to the Accessibility page to learn more.

Consider preloading Icons

Setting the Icon's preload property can help prevent delays when an Icon is essential to the initial user experience. Avoid preloading Icons used in later or conditional content so they can load when needed. Unnecessary preloading can slow the initial page load.

Accessibility

It is recommended to set the textLabel value if your icon is semantic to provide context to more users, in particular users of assistive technologies.

API reference

Properties

Styles

Methods