Most page-builder rows with icons make you click into each card and re-style icons one at a time — pick the size on card one, color on card one, copy the classes onto card two, and so on for six cards. WebProCMS turns that into a single panel: an Icon Design accordion that re-styles every icon in a row simultaneously, with friendly controls instead of raw Tailwind class textareas.
What it gives you
One accordion, five controls, applied across every icon in the row:
| Control | What it does |
|---|---|
| Icon size | Small / Medium / Large. Picks the right scale depending on whether the icon is a bare glyph or sits inside a colored chip — Medium is the row's normal size, Small and Large step around it. |
| Icon color | Eight semantic presets (Primary, Primary Surface, Secondary, …, Tone, Tone Surface). Knows whether to recolor the glyph itself or the chip background it sits in, and swaps cleanly across opacity variants like bg-primary/10. |
| Icon shape | Circle / Square / Rounded — the chip's corner radius. Greys out automatically when the icon doesn't have a container. |
| Show icon container | A switch that wraps the icon in a colored chip, or strips it back to a bare glyph. Migrates color between the wrapper and the glyph as you flip, and preserves the icon's surrounding margin so the layout doesn't collapse. |
| Title layout | Icon-above (stacked) vs. icon-left (inline). On rows where it applies, it flips the whole card's orientation in one click — broadcast to every card. |
Whatever you change in this accordion is applied to every icon in the row — six feature cards become one edit, not six.
Where it appears
The Icon Design accordion shows up in the page editor's sidebar in one of two places depending on the row:
- On the row itself — for "repeater" rows (one editable schema, six rendered cards). The accordion sits at the top of the row's Design tab.
- In Descendants → Icon — for static multi-card rows (each card editable individually, e.g. Features Grid). The accordion appears alongside the cascade's standard "Classes" panel inside the Icon group.
In both cases you reach it by opening the row in the editor and clicking the paintbrush icon. The accordion is always there at the top — you can't miss it.
How "edit all at once" actually works
There are two technical patterns under the hood, but both feel the same to the editor:
- Repeater rows (e.g. Features Grid Repeater, Icon List Cards Repeater) share one schema across all rendered cards, so a single edit to the icon's class field automatically flows to every iteration. The Icon Design accordion drives that shared schema with friendly controls.
- Static multi-card rows (e.g. Features Grid, Icon List Cards) have each card stored independently. The Icon Design accordion writes a broadcast edit — it discovers every matching icon instance in the row and applies the same change to each one in one operation. From the editor's perspective, six cards still update together with one click.
This is also why the controls broadcast cleanly: they're not just rewriting one shared template; they're aware of every icon instance and edit them in a single batch.
Card-orientation toggle (Title layout on grid rows)
On icon-above grid rows (Features Grid, Features Centered, Icon List Cards, Icon List Large), the Title layout control does more than rearrange text — it flips the entire card's orientation:
- Stacked — icon above the title, title above the description. The default.
- Inline — icon floated to the left, title and description filling the space to its right.
Switching between them takes one click and applies to all six (or four, or however many) cards at once. No restructuring, no rebuilding the row from a different template — the row itself supports both shapes.
A few rows where icon-left would visually break or duplicate existing structure (e.g. icon-list rows that are already inline; bento rows with uneven card sizes) opt out of the orientation toggle. They still get the other four controls — size, color, shape, container — broadcast to every icon.
Which rows have it
The Icon Design accordion is enabled on the rows where it's most useful — anywhere there are multiple icons that should look consistent:
Features: Features Grid, Features Grid (Repeater), Features Centered, Features Centered (Repeater), Features Large Icons, Features Large Icons (Repeater), Features List, Features Split, Features Split (Repeater), Features Split Left, Features Checklist Split.
Icon Lists: Icon List Cards, Icon List Cards (Repeater), Icon List Large, Icon List Large (Repeater), Icon List Vertical, Icon List Vertical (Repeater).
FAQs: FAQs Did You Know.
Card-orientation (icon-above ↔ icon-left) is available on Features Grid, Features Centered, Icon List Cards, and Icon List Large.
Upgrading existing rows
If you already have one of these rows on a live page and want the new Icon Design controls, you don't have to delete and re-insert. Open the row, click Section settings, expand Reset / Refresh, and click Refresh from design library. That re-pulls the row's blade from the latest template (which carries the marker) while keeping your saved content and design overrides intact. Hard-refresh the editor, and the Icon Design accordion will be there.
Why this matters
Visual consistency across a feature grid is the difference between a polished site and one that looks slightly off. The traditional builder workflow puts that consistency on the editor — they have to remember to apply the same five tweaks to six cards. Icon Design quick-edit moves that responsibility into the tool: pick a size, pick a color, and you're done. The six cards stay in lockstep because the editor doesn't have to think about them as six cards.
It also keeps the underlying row markup using the project's standard btn-*/size-*/bg-* utility classes — there's no shadow design system, no inline-style escape hatch. What the editor sees in the accordion is the same Tailwind utilities that a developer would write by hand, just presented as friendly toggles instead of a class string.