Icon - Flowboard

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

Rich Text Image