SlowlyIcon
Place an icon from your collections to represent an idea visually.
The Icon block places a single icon, the small visual that stands in for an idea next to a heading or in a feature list. Pick one from the icon collections available in your install, managed in Settings.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "icon".
- Pick the Icon block, then choose an icon from the picker.
Settings
In the icon's own panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Icon | The icon itself, chosen from your available collections | Every time; the block is empty without it |
| Library | Which icon collection to draw from; defaults to Font Awesome | You have a second collection installed and need to switch |
| Size | Width and height of the icon, independent of the surrounding type size | The icon sits alone or needs to be larger than the nearby text |
| Link | Wraps the icon in an anchor, with URL, target, rel, and an aria-label field | The icon acts as a standalone clickable element |
Styling
Size, colour, spacing, and effects all live in the shared design panel. The icon inherits colour from the text colour setting, so changing the colour token there is the usual way to tint it. For a hover colour change, set a colour in the hover state.
Accessibility
An icon that carries meaning on its own needs a label for screen readers. Use the aria-label field in the Link setting when the icon is a standalone link, so someone navigating by links alone knows where it goes. An icon that only decorates text already labelled nearby can be left silent.