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:
Adding an Icon component
To add an icon to your app screen:
- Select the Icon component from the Components drawer. You can open the list of components by clicking the
+button next to Components. - To add an Icon, go to the Configs tab (second tab) in Properties Panel.
- Open the Icon picker next to the Icon config property and select the desired icon.
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 about 2 months ago