> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flow-board.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon

> Use Icon to add quick visual meaning, status cues, and lightweight decoration.

## 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

1. Open the screen in the dashboard.
2. Add **Icon** from the **Components panel**.
3. Select the icon on the **canvas**.
4. In the **properties panel**, choose the icon, style, size, and color.
5. 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

## Related components

* [Text](/components/text)
* [Button](/components/button)
* [Positioned](/components/positioned)
* [Stack](/components/stack)