Icon
Use a symbol, uploaded icon or initials to support a short piece of content.
Code name: Icon · Category: Media
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use icons next to service descriptions or contact details. Keep a text label nearby when the meaning would otherwise be unclear.
In the editor
- Choose a supported icon, upload an icon source or enter initials.
- Set its size and colour.
- Check the icon against the background and its accompanying text.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Icon icon="Mail" width={32} />Behaviour and limitations
- icon is a supported icon name; iconSrc is a custom image source. Do not invent icon names.
- Icons are visual content; use a Button when visitors need an action.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
icon | string | "Activity" (renderer) | Icon. See the usage notes for this block. |
iconSrc | string | Not declared here | Custom Icon. See the usage notes for this block. |
initials | string | "" (renderer) | Initials. See the usage notes for this block. |
width | number | 45 (renderer) | Width. See the usage notes for this block. |
strokeWidth | number | 2 (renderer) | Stroke Width. See the usage notes for this block. |
fontSize | number | 0.75 (renderer) | Font Size. See the usage notes for this block. |
fontWeight | number | 400 (renderer) | Font Weight. See the usage notes for this block. |
showBorder | boolean | false (renderer) | Show Border. See the usage notes for this block. |
outlineInitials | boolean | false (renderer) | Outline Initials. See the usage notes for this block. |
borderRadius | number | 0 (editor only) | Border Radius. See the usage notes for this block. |
color | string | "rgba(0, 0, 0, 1)" (editor only) | Color. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
align | "left", "center", "right" | "center" (renderer) | Align. See the usage notes for this block. |
alignVertical | See guidance | "" (renderer) | Vertical alignment within the surrounding layout. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
