Icon
Use Icon for a single symbol or visual cue.
Content settings
| Setting | What it controls |
|---|---|
| Icon | The selected icon. |
| Link or action | Optional click behavior when available. |
| Accessibility label | Descriptive label when the icon communicates meaning. |
Style settings
| Style area | What you can adjust |
|---|---|
| Icon style | Size, color, and hover color. |
| Background | Background color, padding, border, radius, and shadow. |
| Alignment | Placement inside the container. |
| Animation | Motion effects when available. |
| Spacing | Margin and responsive spacing. |
Best practices
- Use icons to support text, not replace critical copy.
- Keep icon styles consistent inside the same section.
- Add accessible labels when an icon is not decorative.
Testing notes
- Preview hover states if the icon is clickable.
- Check mobile spacing so the icon does not crowd nearby text or buttons.
- Confirm the selected icon still makes sense without relying on color alone.
FAQ
When should I use the Icon element?
Use it for a single visual cue in a benefit block, button area, feature row, alert, or section header where a symbol supports nearby text.
What should I configure before publishing an icon?
Review the selected icon, optional link or action, accessibility label, size, color, hover color, background, padding, border, radius, alignment, animation, and spacing.
Can an icon replace text?
Avoid using an icon as the only explanation for an important action or claim. Pair meaningful icons with clear copy unless the icon is purely decorative.
What should I check if an icon looks off-brand?
Compare size, stroke style, color, background, and radius with nearby icons. Icons in the same section should usually share a consistent visual style.