The Blocksify Icon List block creates a list of icon-and-text items with parent-level layout and per-element styling. Its child Icon List Item blocks carry each item’s icon, text, and optional link.
At a glance
| Parent block | blocksify/icon-list |
| Child block | blocksify/icon-list-item |
| Rendered tags | The parent renders ul role="list"; each child renders an li. |
| Default layout | Vertical list direction with rowGap set to the 2xs spacing token. |
| Default item icon | Each item starts with a Lucide check icon. |
| Key supports | Parent visibility, flex layout, icon layout, item styling, icon styling, text styling, and child link settings. |
Where to find it
- Select the Icon List parent block on the canvas.
- Use Layout for direction, alignment, wrapping, and gaps.
- Select an Icon List Item when you need the child’s icon, text, or link controls.
When to use it
Use Icon List for repeated short points where each item needs the same visual system: a feature checklist, benefit row, contact detail list, or compact horizontal set of links.
The parent owns layout and styling, while each child stays focused on item content. On insertion, Icon List starts with three default check items.
Parent and child structure
Icon List is a parent-and-child pair. The parent accepts only Icon List Item children, and each child holds one icon, one text label, and optional link settings.
| Surface | What it owns |
| Icon List parent | Flex direction, align, justify, wrap, row gap, column gap, icon position, icon size, icon gap, and shared item styling. |
| Icon List Item child | Icon, text label, URL, link target, and rel tokens. |
| Child toolbar | Icon picking plus add, duplicate, and delete actions; moving uses the native block mover. |
Vertical and horizontal layout
The parent reuses Blocksify’s flex layout control pattern. Direction can resolve to column for a vertical list or row for a horizontal list, with responsive Tablet and Mobile values.
| Control | What it changes |
| Direction | Column or row list flow, with responsive Tablet and Mobile values. |
| Align and Justify | Cross-axis and main-axis placement through icon-segmented controls. |
| Wrap | Wrapping behavior in row mode. |
| Horizontal and Vertical Gap | Column and row spacing between list items. |
Icon controls
The Icon panel controls how each item places the icon beside or above its text. Icon Position is single-value, while Icon Size and Icon Gap support responsive values.
- Position: left, top, or right.
- Vertical Alignment: aligns icon rows when the icon is left or right.
- Icon Size: token or custom value for icon width and height.
- Icon Gap: token or custom spacing between the icon and text.
Per-item links
Select an Icon List Item to edit its General panel. The child uses the same Button-style link UI pattern documented in the Button block: URL, new-tab target, and rel toggles.
A linked item renders an a inside the list item. A non-linked item renders a span with the same flex target, so item layout stays consistent.
Style capabilities
The parent styling surface applies uniformly across all children. This keeps repeated items consistent without editing every Icon List Item.
| Panel | What it controls |
| Layout | Direction, align, justify, wrap, and list gaps. |
| Icon | Icon position, vertical alignment, responsive icon size, and responsive icon gap. |
| Styling: Item | The full item row. |
| Styling: Icon | The icon area. |
| Styling: Text | The text area. |
| Visibility and Advanced | Parent visibility plus native anchor and custom CSS classes. |
Tips
- Use column direction for checklists and row direction for compact navigation-like lists.
- Set Icon Size and Icon Gap before styling item padding.
- Use the parent Styling panel when every item should match.
- Use child links only when the whole icon-and-text item should be clickable.