Icon
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
| Property | Description |
|---|---|
| Color | The color of the icon. Defaults to strong. |
| Size | The width and height of the icon. Defaults to 24. |
Configuration Properties
| Property | Description |
|---|---|
| Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to Icon. |
Data Configuration
| Property | Description |
|---|---|
| Icon | The icon is selected from the icon picker. Defaults to photo. |
| Custom Icon | Render 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.
Updated 6 months ago