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.


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.


  • 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



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



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