Icon List

Present features, services, or benefits as a scannable icon grid.

Updated

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

Columns setting in the block editor sidebar
Columns
  • 1
  • 2default
  • 3
  • 4
  • 5
  • 6
  • 7
Match Height setting in the block editor sidebar
Match Height
Hide Descriptions

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.

Content Alignment setting in the block editor sidebar
Content Alignment
  • Top
  • Middledefault
Card Background setting in the block editor sidebar
Card Background
Background Color setting in the block editor sidebar
Background ColorAvailable when Card Background is enabled
Text Color setting in the block editor sidebar
Text ColorAvailable when Card Background is enabled

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.

  • Inheritdefault
  • Dark Text
  • Light Text
Card Shadow setting in the block editor sidebar
Card Shadow
Shadow Weight setting in the block editor sidebar
Shadow WeightAvailable when Card Shadow is enabled
Shadow Size setting in the block editor sidebar
Shadow SizeAvailable when Card Shadow is enabled
Shadow Offset setting in the block editor sidebar
Shadow OffsetAvailable when Card Shadow is enabled
Small Text setting in the block editor sidebar
Small Text

Headlines

Headline Tag setting in the block editor sidebar
Headline Tag
  • <h2>
  • <h3>
  • <h4>default
  • <h5>
  • <h6>
  • <p>
Headline Appearance setting in the block editor sidebar
Headline Appearance
  • <h1>
  • <h2>
  • <h3>
  • <h4>default
  • <h5>
  • <h6>
  • <p>
  • <strong>

Spacing

Grid Gap setting in the block editor sidebar
Grid Gap
Card Padding setting in the block editor sidebar
Card Padding
Icon Spacing setting in the block editor sidebar
Icon Spacing

Icons

Icon Size setting in the block editor sidebar
Icon Size
Icon Background setting in the block editor sidebar
Icon Background
Background Color setting in the block editor sidebar
Background ColorAvailable when Icon Background is enabled
Icon Padding setting in the block editor sidebar
Icon PaddingAvailable when Icon Background is enabled
Color Icons setting in the block editor sidebar
Color Icons
Icon Color setting in the block editor sidebar
Icon ColorAvailable when Color Icons is enabled

Icon Card

Headline setting in the block editor sidebar
Headline

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

Built by Dirigible Studio. Get in touch