Icon
Icon displays a selected icon, optionally rotated or linked. Use it for a visual cue alongside text or as a clearly labelled destination.
Add and configure Icon
- Click Add, choose Icon, and place it in the container.
- Choose Content > Content > Icon.
- Set Rotate and Link if needed.
- Configure Design > Icon and Spacing.
- Save your changes.
This element has no children; use its own controls.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Content > Content
| Setting | Purpose and options | Behavior |
|---|---|---|
| Icon | Icon. | Shared |
| Rotate | Set rotate. Range: 0–360. | Shared |
| Link | Destination and link options. | Shared |
Design > Icon
| Setting | Purpose and options | Behavior |
|---|---|---|
| Color | Color or supported fill. | Hover |
| Size | Size and unit. | Responsive |
| Style | None, Solid, Outline. | Shared |
| Corners | Square, Round, Custom. When: Style = Solid, Outline. | Shared |
| Radius | Radius and unit. When: Corners = Custom. | Shared |
| Padding | Padding. When: Style = Solid, Outline. | Responsive |
| Background | Color or supported fill. When: Style = Solid, Outline. | Hover |
| Border | Color or supported fill. When: Style = Outline. | Hover |
| Outline Width | Outline width and unit. When: Style = Outline. | Responsive |
| Nudge > X | X and unit. When: Style = Solid, Outline. | Responsive |
| Nudge > Y | Y and unit. When: Style = Solid, Outline. | Responsive |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Spacing | spacing controls. | See linked controls |
Troubleshooting
The icon is missing
Select an icon and check its size and color against the background.
An icon-only link is unclear
Provide an accessible name through the appropriate link or element attributes, or accompany it with visible text that explains its destination.