Icon

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

Overview

Icons can be actionable or illustrative graphical representations of intent. They can be used for wayfinding throughout the interface or represent interactive elements—on their own or in combination with text content. Meaningful, 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.

Usage

  • Use in Buttons, FABs, or Links when it accurately supports the action intent
  • Use in Dropdowns, Comboboxes, Accordions, etc when it helps with clear decision making
  • Anchored to an edge or corner of a view as a supportive action

Sample

Copy code snippetShow code snippet
Edit sample on Codepen
v1.0.0-beta.67
Toggle preview themeToggle preview direction

Best practices

Below are important guidelines on using the Icon component.

Correct Icon flip
Do use RTL prop for actions that need to be read properly in certain languages.
Avoid Icon flip
Avoid using RTL with all icons, as some concepts read internationally.

API reference

calcite-icon
Documentation generated for Calcite Componentsv1.0.0-beta.67

Properties

NameTypeValues
flipRtl

When true, the icon will be flipped when the element direction is 'rtl'.

booleanA boolean property should be present, or not
truefalse (default)
icon

The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.

iconAccepts a Calcite UI Icon string
scale

Icon scale.

typedChoose from a set of typed values
lm (default)s
textLabel

The icon label. It is recommended to set this value if your icon is semantic.

stringA custom string
 
1
undefined

Themes

NameCSS Class
Light
default

 
1
.calcite-theme-light
Dark

 
1
.calcite-theme-dark
Auto

Automatically change theme based on `prefers-color-scheme`

 
1
.calcite-theme-auto

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.