Counters With Icons

About this block

Counters With Icons is a light, headingless stats row. Four counters sit side by side, each stacking a small tinted icon disc, a large value, and a one line label, with hairline dividers between columns on desktop and a two column grid on smaller screens. With no heading or panel, the row reads as a quiet factual beat between heavier sections.

The four stats are one array of icon, value, and label, so swapping a metric is an import and two strings. Icons come from lucide and the disc tint uses the primary token at low opacity, which keeps the row on brand in both themes. The grid accepts three or five entries, the dividers regenerate from the columns automatically.

When to use

Reach for this block when the page needs proof without ceremony. It is the lightest sibling in the group: no heading like metric-tiles-band, no chart like stats-with-bar-chart, no panel at all. Drop it directly under a hero to ground the promise in scale, or between two copy heavy sections as a palate cleanser. Choose dark-stat-band instead when the moment calls for emphasis rather than calm.

A natural flow around it on a Marketing Pro page:

Before

• Heroes whose claims the counters quietly substantiate

After

• Features to move from scale to substance
• Logo Clouds to put names next to the numbers

What you can display

One strong use is platform scale and responsiveness in one sweep. A few other icon and counter sets:

• Reach. Countries, languages, timezones covered, and locales shipped for a global product.
• Velocity. Deploys, campaigns, or reports shipped per week with time saved alongside.
• Trust. Years in business, customers retained, uptime, and certifications renewed.

Tip: pick icons that name the noun in the label, the disc is doing wayfinding, not decoration.