Documentation

Using the Soames Icon List

The Soames Icon List block displays a centered row of icons or logos, each with an optional caption underneath and an optional link. It’s built for things like “as seen in” logo strips, technology or partner badges, feature icons, or any place you want a tidy, evenly-sized row of images.

What it’s for

Each icon pairs an image with an optional label beneath it and, optionally, a link so the icon is clickable. You add as many icons as you like and they flow into a centered row, wrapping onto more rows as needed. A block-level Size setting controls how tall every icon is, so the whole row stays evenly aligned.

Adding an Icon List

  1. In the editor, click the + button to open the block inserter.
  2. Search for Soames Icon List (you’ll find it in the Soames block category) and insert it.
  3. Click Add icon to create your first icon, then fill in its fields (see below). Repeat for each icon you want.

Filling in each icon

Every icon keeps its own fields grouped together, so an image always travels with its label and link:

  • Image. Click Select image to open the WordPress Media Library, where you can upload a new image or choose an existing one. A small thumbnail preview appears once it’s set; use Replace image to swap it or Clear to remove it. If your image already lives somewhere online, you can instead paste its address into the Image URL field just below the picker — the picker and the URL field control the same image, so you only need one of them.
  • Label. The caption shown beneath the icon. It also becomes the image’s alt text. Leave it blank for an icon with no caption.
  • Link. Where the icon points when clicked. Use a full URL for another site (https://…) or a path such as /services/ for a page on this site. Leave it blank for a non-clickable icon.
  • CSS class (optional). Lets a developer target this icon for custom styling. Most authors can leave it blank.

Reordering and removing icons

Each icon has a small row of buttons in its top-right corner:

  • Move up / Move down — change an icon’s position in the row. (The first icon has no Move up, and the last has no Move down.)
  • Remove — delete that icon from the list.

Choosing a size

With the block selected, open the block Settings sidebar (the gear icon, top right) and find the Size panel. The Icon size dropdown sets the height of every icon in the list:

  • Small — 116 px tall. This is the default for a new block and suits compact logo strips.
  • Medium — 256 px tall. A good middle ground for feature icons or more prominent logos.
  • Large — 512 px tall. Best for a small number of big, showcase images.

Each icon keeps its own proportions — the size setting fixes the height and lets the width follow naturally, so a row of icons stays evenly aligned. The size applies everywhere the block appears, whether it’s on a page or inside a blog post.

Tips

  • Use images of a consistent shape across icons so the row looks balanced — since every icon is set to the same height, very wide or very tall images will stand out.
  • Transparent PNG or SVG logos usually look best against the page background.
  • Keep labels short — a word or two reads best beneath each icon.
  • Start with Small and step up to Medium or Large only if the icons feel too small for their surroundings.
  • Use Preview to check how the row wraps before you publish.
  • As with all edits, your changes go live on the public site about a minute after you publish.