Icon list

A row with a glyph and a point.

Beta · Content blocks · packages/css/src/components/icon-list.css

.pui-icon-list (--small · --web) · __row (--success --danger --neutral) · __icon __texts __title __text. The glyph is the accent’s light tint; one colour per list.

Icon list — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

Size medium (Title body/large Medium + Text body/small) / small (one line on body/medium) × Tone accent / success / danger / neutral
Title, Text, Has text (medium only); Icon swaps the 24 glyph on accent and neutral rows — success and danger keep circle-check / circle-x (a swap property has one default for the whole set, so they are not linked to it)
Box: padding space/12, gap space/12, radius 8; the glyph sits 2px down
Stack rows in a vertical auto-layout with gap 0 — the padding is the rhythm; a list is three to six rows
Colour is the Accent mode on the instance (accent tone); a list of icons inside one block is ONE colour
The Title stands space/12 over its Text, on every canvas
On a web page the rows of a list stand space/12 apart, where a deck’s rows touch and the padding is the rhythm; under 768 a success or danger row centres its glyph on its (often two-line) text. In code --web on the list
A phrase in Bold 700 inside a row’s Text is emphasis — a phrase, never the row

Use when three to six points that each deserve a glyph — features, capabilities, what happened; a success / failure pair.

Do not use when the points have no natural glyph (Bullet list); it is one point (Insight block); the rows are navigation (Nav item); each row is a metric (KPI tile).

Relates to Bullet list, Insight block, Card, Badge, the Lucide subset.

Anti-patterns mixed glyph colours in one list outside the multicolour cycle · the accent’s main hue on a line glyph · the same icon on every row · rows spaced by margins instead of the padding · more than six rows.

Keywords: icon list, feature list, checklist, bullet with icon, capabilities, benefits, success error list

Figma — page Icon list: Icon list (8 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens icon-list.css.

<ul class="pui-icon-list">
  <li class="pui-icon-list__row"><span class="pui-icon pui-icon--24 pui-icon-list__icon">…</span>
    <div class="pui-icon-list__texts"><p class="pui-icon-list__title">Verified traffic</p><p class="pui-icon-list__text">…</p></div></li>
  <li class="pui-icon-list__row pui-icon-list__row--success">…</li></ul>

The modifiers

	What it is	Note
Size	(none) medium · --small (on the list)	—
Canvas	(none) the deck’s rows, which touch · --web — a list on a web page (request 39): the rows stand space/12 apart; under 768 a success or danger row centres its glyph on its (often two-line) text. The title stands space/12 over its text in both	—
Emphasis	a phrase in <strong> or <b> inside a row’s text is Bold 700 — a phrase, never the row	—
Tone	(none) accent · __row--success · __row--danger · __row--neutral	—
Sequence	data-accent=“multicolor” on the list colours the glyphs by row, sequence/1…6 (request 5)	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
`#0b0202` on `#ffffff`	20.51	4.5	text.default on surface.page (promised)	ok

1 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).