What it is
Icon adds a small symbolic visual element to the screen.What it’s best for
Use it when a small visual cue can help users scan the screen faster.When to use it
- Checklist markers
- Feature bullets
- Success, warning, or status cues
- Navigation hints near buttons or text
When not to use it
- Do not use icons as decoration with no meaning.
- Do not rely on icons alone when the action or message needs clear text support.
How to add it in the dashboard
- Open the screen in the dashboard.
- Add Icon from the Components panel.
- Select the icon on the canvas.
- In the properties panel, choose the icon, style, size, and color.
- Place it next to text or inside a layout that supports the message.
Key parameters
| Parameter | What it changes | When to adjust it |
|---|---|---|
| Icon choice | Changes the symbol shown | Pick the symbol that best matches the message |
| Style | Changes the visual family of the icon | Use it to match the rest of the screen style |
| Size | Controls emphasis and balance | Increase it for strong callouts, reduce it for supporting cues |
| Color | Changes visibility and meaning | Use a strong color for status or action cues |
| Margin | Adds space around the icon | Use it when pairing the icon with text or buttons |
Example use cases
- Checkmarks beside plan benefits on a paywall
- A lock icon near a premium feature explanation
- A star icon next to a highlighted onboarding milestone
Best practices
- Pair icons with text when the meaning is important.
- Reuse icon patterns consistently across flows.
- Keep icon size proportional to the surrounding content.
Common mistakes
- Mixing too many icon styles on one screen
- Using large icons that compete with the main message
- Choosing icons that are visually interesting but unclear