Iconography

Sermona defaults to inline SVG icons (IconJar, Figma, etc.). Tokens own size, stroke weight, tile size, color, and optional icon-font variables so you can stay on SVGs or layer a glyph font with one :root override.

Principles

1. One stroke family — Pick ~1.5–2px stroke at 24px frame (align with --sermona-icon-stroke) so glyphs feel like one kit.
2. currentColor — Let stroke="currentColor" / fill="currentColor" inherit from .sermona-icon so gold / white / muted swap with one class.
3. Metaphor beats novelty — Use familiar shapes (clock, shield, play) before clever abstractions.
4. Label first — Icons support scanning; they rarely replace visible text except universally understood controls (play, close, menu).

Icon fonts (Material Symbols, Phosphor, etc.)

When you prefer a hosted icon font, set the token variables once; components keep the same size utilities.

Token	Typical use
--sermona-icon-font-family	e.g. "Material Symbols Outlined", "Phosphor Icons"
--sermona-icon-font-weight	Variable-font axis or static weight
--sermona-icon-font-style	normal / italic
--sermona-icon-font-variation-settings	e.g. FILL 0, wght 400, GRAD 0, opsz 24 (Material Symbols)

Markup: add .sermona-icon--font next to .sermona-icon. The utility applies the font metrics, line-height, and hides a nested svg so you can ship SVG for environments without the font and glyph text or ligatures where the font loads.

<span class="sermona-icon sermona-icon--font" aria-hidden="true">home</span>
<!-- or ligature / codepoint per your font’s docs -->

Default in tokens is font.family: inherit — icons match the UI face until you override. Pair with @font-face or your provider’s stylesheet. Tokens lists the same variables for fonts and mono stacks.

When to skip icons: Dense legal copy, noisy dashboards where icons compete with charts, or one-off ornament with no semantic tie — use type and space instead.

Sizes & modifiers

Class	Typical use
.sermona-icon	Default 24px
.sermona-icon--sm	Meta rows, chips
.sermona-icon--lg	Tile headers
.sermona-icon--xl	Media controls, hero markers
.sermona-icon--accent	Gold glyph
.sermona-icon--muted	De-emphasized or “avoid” lists
.sermona-icon--font	Icon font / variable font (see section above); hides child svg

SVG checklist: viewBox set; no hard-coded hex; aria-hidden="true" when paired with visible text; meaningful aria-label on the button or link, not only on the SVG.

Icon-led lists

Use .sermona-icon-list for scan-friendly bullets with a consistent marker column. Variants:

• Default — bordered tile markers (--sermona-icon-tile-sm).
• .sermona-icon-list--compact — smaller column, no tile; for dense prose or sidebars.
• .sermona-icon-list--checks — gold-tinted marker for success / “do” lists.

Markup shape:

<ul class="sermona-icon-list">
  <li class="sermona-icon-list__item">
    <span class="sermona-icon-list__marker" aria-hidden="true">
      <span class="sermona-icon">…svg…</span>
    </span>
    <p class="sermona-icon-list__body">Short line of body text.</p>
  </li>
</ul>

Optional title + body inside the text column:

• .sermona-icon-list__title — bold meta line
• .sermona-icon-list__body — primary line
• .sermona-icon-list__body--muted — supporting line in meta color

Demo: default list

Shipping checklist

• Accessibility pass

  Focus order, contrast, and labels on icon-only controls.

• Performance budget

  Keep icon SVGs lean; prefer strokes over massive paths.

• Content review

  Labels beside icons; no orphan glyphs. See Voice & copy.

Demo: compact + checks

Compact

• Single-line bullets in sidebars or footnotes.

• Tighter vertical rhythm than default tiles.

Checks (do / criteria)

• Glyph aligns to --sermona-icon-stroke for visual parity.

• Markers pick up gold border / soft fill from .sermona-icon-list--checks.

Feature list vs icon list

Pattern	When to use
.sermona-feature-list	Marketing features — large icon tile, title + body, more vertical air.
.sermona-icon-list	Prose-adjacent bullets, criteria, release notes, settings — denser scan.

Chips & strip

Use .sermona-icon-chip and .sermona-icon-strip for stacks, integrations, or toolchains — short noun labels beside small icons.

Partners & stack

DesignShipMeasureDocs

Icon tiles

.sermona-icon-tile for section highlights in a grid — one metaphor per card, title + short supporting copy.

Editorial systems

Structured layouts for long-form and mixed media.

Motion & media

Playback and slide treatments aligned to accent.

Deployable tokens

One CSS bundle for docs, marketing, and prototypes.

Feature list (large)

• IconJar-friendly

  Swap glyphs without changing layout; stroke ties to tokens.

• Touch targets

  Tiles and chips use token padding so tappable rows feel comfortable on dark UI.

Logo row

Monochrome marks at a shared optical height — press, integrations, trust.

See also

• Voice & copy — labels beside icons, errors, buttons
• Components — full CSS primitive index
• Foundations — color and type roles