Skip to main content

Icon List

Use Icon List to present benefits, steps, ingredients, features, or requirements as a compact list with icons or images.

How It Works In Atomicat​

The drawer manages a reorderable item list. Each item can use SVG icon media or image media, selected from the icon library or media picker. Items include title, optional description controlled by the Show Content toggle, link URL, and new-tab behavior. Titles can use rich text, and descriptions preserve basic HTML. The editor also supports adding, cloning, deleting, and reordering list items.

When To Use It​

  • Show benefit bullets with visual symbols.
  • Create a checklist, process list, or included-features block.
  • Pair each selling point with a small image when icons are not expressive enough.
  • Make individual list items clickable when they point to details or external resources.

Configure The Element​

  • Add list items in the order visitors should read them.
  • Choose icon or image media per item based on the design.
  • Write short titles; enable Show Content only when each item needs a description.
  • Add links only where clicking an item is expected.
  • Use new-tab behavior for external destinations.

Testing Notes​

  • Preview spacing after enabling descriptions; list height can change significantly.
  • Check icon consistency so one item does not visually overpower the others.
  • Click linked items on the published page.

Limitations And Tips​

  • Long descriptions can make Icon List look like cards; use Selling Point or Container layouts for richer content.
  • Mixed icon and image styles can feel inconsistent unless intentional.
  • Do not use icons alone for critical meaning; include text labels.

FAQ​

Can Icon List use images instead of icons?

Yes. The media selector supports SVG icons and image media.

How do I show descriptions?

Enable Show Content, then edit each item description.

Can each item link somewhere?

Yes. Add an item link and enable new-tab behavior if needed.