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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-icon
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
flipRtlflip-rtl

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

booleanA boolean property should be present, or not
truefalse
iconicon

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
scalescale

Icon scale.

typedChoose from a set of typed values
lm (default)s
textLabeltext-label

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

stringA custom string
undefined

Styles

NameDescriptionCSS Variable
--calcite-ui-icon-color

the color of the icon. Defaults to 'currentColor'.

--calcite-ui-icon-color

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