Icon List
Present features, services, or benefits as a scannable icon grid.
Usage
Icon List displays a row or grid of cards, each with an icon, headline, and body text — a quick way to build a features section or services list. Add items in the editor, then set layout, icon size, and typography from the block sidebar.
When to use it
Use Icon List for feature grids, service highlights, or process steps where a small icon helps each point stand out. Pair with a Section for background color or padding when the list needs separation from surrounding copy.
Switch to a Grid
To turn an Icon List into a Grid, select the Icon List, click its icon at the left of the block toolbar, and choose Grid under Transform to. Each item becomes an icon card with the same icon, headline, text, and link. Columns, card background, shadow, icon, and headline settings carry over.
Grid cards stack the icon above the text instead of beside it. Icon Padding, Icon Spacing, Card Padding, and Content Alignment have no Grid equivalent, so they're dropped. The Grid has Link Entire Card on, so a linked item stays clickable anywhere on the card, with no button.
Grid only appears in the menu when nothing would be lost. An item that contains Social Links can't move to a Grid card, so remove it first.
Choosing icons
Click an item's empty icon in the editor, or the star button in the block toolbar, or Choose Icon in the item sidebar, to open the icon library: over 2,000 free icons from Font Awesome, or switch the Icon set menu (left of the styles) to Phosphor for a lighter, rounded look in Regular, Bold or Fill, or to Lucide for clean outline icons with even strokes in Regular, Thin or Bold. Search by what the icon shows or means (phone, leaf, calendar), and narrow Font Awesome to Solid, Outline or Brands (company logos). Start typing to search, or browse below; click an icon to use it. To swap it later, use the star button (Replace icon) or Change Icon: the picker opens with the current icon first. It keeps the last set and style you picked while you work, so a whole list stays in one look. The first time anyone on the site opens Phosphor or Lucide, it takes a few seconds to download.
Library icons take the text color, or the Icon Color when Color Icons is on, and they sit inside the colored circle when Icon Background is on. For a logo or a multi-color icon, use Upload Custom Icon to pick any image from the Media Library, as before.
The first time anyone on a site opens the icon library, it may take a few seconds to load. After that it's instant.
Tips
- Columns controls how many cards appear per row on larger screens.
- Turn on Card Background when each card should read as its own tile.
- Headline Appearance and Small Text apply to every card in the list.
- For a list of headlines, turn on Hide Descriptions. Each item then shows only its icon and headline, with no "Enter a description" placeholders in the editor. The text stays saved, so turning it off brings it back.
Screenshots
Front-end
-
Three-column icon list on a photo section — cards with blue icon circles. -
Single-column icon list with purple icon circles and card shadows.
Editor
-
Icon List settings — card background, text color, shadow, and headline tag. -
Layout settings — columns, match height, content alignment, and card shadow. -
Search the icon library by what the icon shows, here phone, then click an icon to use it.
Settings
Layout


Shows only each item's icon and headline, for lists of headlines. Item text stays saved, so turning it off brings it back; while it's on, the text isn't shown in the editor or printed on the page.




Dark or Light text on the card background. Choosing a card background color picks one for you, whichever reads better on that color; change it any time.





Headlines


Spacing



Icons






Icon Card

The item headline. You can also edit it on the block.

Optional destination for this item.