The Icon component is a visual indicator to show a small image or a symbol. There are hundreds of different open source icons for you to choose from.


For Interactions, use Icon Button

If you are looking to add Actions on an Icon to make it interactive, use the Icon Button component instead.

You can pick an icon from the available list of icon sets:

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

ColorThe color of the icon. Defaults to strong.
SizeThe width and height of the icon. Defaults to 24.

Configuration Properties

Component NameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Icon.

Data Configuration

IconThe icon is selected from the icon picker. Defaults to photo.
Custom IconRender an icon using a string of the icon's identifier. Overrides the 'icon' property. Full list of icons here. Ex: 'Foundation/align-right', 'Feather/check'

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.