Icon block
An inline icon from any enabled pack, optionally linked, with an accessible label.
On this page
The Icon block places a single icon from the icon picker inline, optionally with a background and a link.
Where it is offeredLink to this section
Offered in every tier: root, region, fragment and slot, as an inline block that sits inside a line of text.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
_tier | select | Options: root (Root), region (Region), fragment (Fragment), slot (Slot), stack (Stack) | ||
alignSelf | radio | Align Self | center | Shown when siblingData?._tier==="stack"; Required; Shown when siblingData?.setSelfAlign; Options: start (Start), center (Center), end (End), stretch (Stretch) |
flex1 | checkbox | Flex 1 | false | Shown when siblingData?._tier==="stack" |
grow | checkbox | Grow | false | Shown when siblingData?._tier==="stack" |
hasBackground | checkbox | Background | ||
icon | text | Select Icon | Required | |
label | text | Accessible label | Shown when Boolean(siblingData?.linkType)&&siblingData.linkType!=="none" | |
linkType | radio | Link Type | none | Required; Options: none (None), custom (Custom URL), internal (Internal Link) |
message | ui | Shown when siblingData?._tier==="stack" | ||
newTab | checkbox | Open in new tab | false | Shown when the custom field-helper condition passes |
reference | relationship | Choose a page to link to | Required; Shown when the custom field-helper condition passes; Related to pages | |
setSelfAlign | checkbox | Define Self Alignment | false | Shown when siblingData?._tier==="stack" |
shrink | checkbox | Shrink | false | Shown when siblingData?._tier==="stack" |
url | text | Enter a URL | `` | Required; Shown when the custom field-helper condition passes |
The icon block stores its link fields in a collapsed-by-default "Link Settings" section in the Edit Icon modal, including an Accessible label field that becomes the linked icon's aria-label (a text-less linked icon otherwise has no accessible name); when empty, a name is derived from the link's domain (a facebook.com link becomes "Facebook"). See Linkable icons.
Rendered outputLink to this section
Renders the Icon component, as <Icon.a> with a hover affordance when a link resolves and as a flat <Icon> otherwise.
ConverterLink to this section
iconConverter resolves the stored icon with resolveIconHtml. A resolved link produces <Icon.a> with label or a name derived from the URL. Without a link it produces a decorative <Icon aria-hidden="true">. hasBackground applies in both cases.
CustomizingLink to this section
Import IconBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'inline' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing icon slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.