Heading + icon

Security settings panel: shield icon inherits accent color and scales with the heading.

Device trust rules

Require managed browsers on contractor laptops; step-up to hardware keys for finance roles.

Widely Supported

typographysvgno-js

Quick implementation

.icon-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
}
.icon-heading svg {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--accent);
}

Prompt this to your LLM

Settings pages and dashboard modules.

You are adding an inline SVG icon before a section heading.

Goal: Icon and text align on one line; icon uses currentColor from an accent token.

Constraints:
- Use display: inline-flex on the h2; gap between SVG and text.
- SVG is decorative: aria-hidden on the graphic; heading text carries meaning.

Return HTML + CSS.

Why this matters in 2026

Icons speed recognition in dense admin UIs; flex alignment beats floating pseudo-elements for multi-line titles.

The logic

Fixed SVG dimensions prevent layout shift; currentColor keeps strokes in sync with theme switches.

Accessibility & performance

Hide decorative SVG from AT; ensure heading text is descriptive without relying on the icon.