Icon
Add a small symbol such as a check mark, star or arrow, pick it from a searchable library, tint it, and give it a shaped background.
Use an Icon for check marks in a feature list, stars in a rating, arrows, locks, close buttons and other small symbols. An icon is a single-color shape, so its color is whatever you choose, and it can change per color mode.
Add it
- Drag Icon from Basics onto the phone.
- Or hover a layer in Layers, click +, then Basics, then Icon.
A new icon is a star, 24 by 24 pixels, in dark gray, with no background.
Where it can go
Inside any layer that holds children, including buttons, plan cards, answers and timeline rows. An icon cannot hold children. See Where components can go.
Design panel
| Section | Control | What it does | Default |
|---|---|---|---|
| Content | Icon button (Select an icon...) | Opens a picker. Type in Search icons… to filter by name. Click an icon to use it. | Star |
| Color | A solid color. Gradients are not available for icons. | Dark gray | |
| Size | Width, Height | Fill, Fit content, Fixed, Relative | Fixed 24 by 24 |
| Spacing | Padding, Margin | Space inside and outside the icon. Padding sits between the symbol and its background. | 0 |
| Icon Background | Shape | Rectangle or Circle. A rectangle adds four corner radii. Click + to turn the background on. | Off |
| Color | A solid color for the background. | Light gray when added | |
| Border, Drop Shadow | Same controls as on a stack, applied to the background shape. | Off |
The picker offers 211 icons from the Lucide set, grouped by theme in the list: actions, navigation, alerts, trust and security, premium and rewards, money and pricing, time, people, communication, files, devices, media, health, travel, nature and shapes. If a search finds nothing, it says No icons match followed by your search. You cannot upload your own icon here. To use your own artwork, upload it as an Image.
To make a round badge, such as a check mark in a colored circle: set a Fixed size of about 32, add some Padding, then turn on Icon Background, set Shape to Circle and choose a color. The icon Color is then the check mark, and the background Color is the circle.
States
- Inside a package, tab button or answer, the panel gets Default and When selected tabs. The default plan card uses this for its radio icon: an empty circle by default, and a checked circle in blue when selected. In When selected, picking a different icon swaps the symbol for that state only.
- An icon has no disabled state.
Dark mode and screen sizes
- Color and the background Color each have light and dark values. In dark mode, Add dark color gives them their own. The default dark gray is hard to see on dark backgrounds.
- Icons scale with their size setting. Keep icons Fixed unless you need them to grow.
- Icons are loaded from the Iconify service when the screen shows. If your site has a strict Content Security Policy, allow that address. See Images and icons.
Tips and common mistakes
- For a close button, put an icon such as an X inside a Button whose action is Close the screen. A bare icon does nothing when tapped.
- Pair icons with text. An icon alone can be ambiguous.
- Use one icon size per row and align it with Alignment set to Center in a horizontal stack, so rows line up.
- If an icon looks blank, the Iconify service may be blocked or offline. Check the browser's network panel.
In the JSON
The component type is icon. It stores icon_name, a base_url and formats that point to the symbol, plus color, size, padding, margin and icon_background.