Icon list markers

Onboarding checklist: each done item reads with a check glyph that stays top-aligned when text wraps.

Before you merge

CI green on main and your feature branch rebased.
Changelog entry added under “Unreleased” with the issue link.
Screenshots attached for UI changes, including dark mode.

Widely Supported

typographymaskno-js

Quick implementation

.icon-bullets ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.icon-bullets li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 0.55rem;
  align-items: start;
}
.icon-bullets li::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  background-color: color-mix(in oklch, var(--accent) 85%, var(--fg));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

Prompt this to your LLM

Marketing feature lists and onboarding.

You are building a checklist-style ul with checkmark bullets.

Goal: list-style: none; each li gets a ::before icon via SVG mask and currentColor/accent fill.

Constraints:
- Two-column grid: fixed icon column + fluid text; icons top-align for wrapped lines.
- Use em-based icon size to track font-size.

Return HTML + CSS for .icon-bullets.

Why this matters in 2026

Icon bullets communicate completion and tone faster than generic discs, especially in onboarding.

The logic

CSS grid keeps the glyph column stable; masks reuse one SVG for any theme color.

Accessibility & performance

Because list-style: none removes some list semantics in Safari/VoiceOver, add role="list" on ul if you need strict list announcement.