Icon

Material Symbols Rounded, outline by default and filled for selected states; always one line-height in size.

CSS only components/icon.css

Outline and fill

<p class="dsgn-body"><span class="dsgn-icon" aria-hidden="true">receipt_long</span> <span class="dsgn-icon" data-fill aria-hidden="true">receipt_long</span> <span class="dsgn-icon" aria-hidden="true">favorite</span> <span class="dsgn-icon" data-fill aria-hidden="true">favorite</span> <span class="dsgn-icon" aria-hidden="true">schedule</span> <span class="dsgn-icon" data-fill aria-hidden="true">schedule</span></p>

Standalone sizes and colours

Outside text or a control: data-size s 16 · m 20 · l 24 · xl 32 · 2xl 48 and data-intent for the colour.

<div class="dsgn-cluster" style="align-items: end"><span class="dsgn-icon" data-size="s" aria-hidden="true">savings</span><span class="dsgn-icon" data-size="m" aria-hidden="true">savings</span><span class="dsgn-icon" data-size="l" aria-hidden="true">savings</span><span class="dsgn-icon" data-size="xl" aria-hidden="true">savings</span><span class="dsgn-icon" data-size="2xl" aria-hidden="true">savings</span>
  <span class="dsgn-icon" data-size="xl" data-intent="neutral" data-fill aria-hidden="true">savings</span><span class="dsgn-icon" data-size="xl" data-intent="accent" data-fill aria-hidden="true">savings</span><span class="dsgn-icon" data-size="xl" data-intent="success" data-fill aria-hidden="true">savings</span><span class="dsgn-icon" data-size="xl" data-intent="warning" data-fill aria-hidden="true">savings</span><span class="dsgn-icon" data-size="xl" data-intent="danger" data-fill aria-hidden="true">savings</span></div>

With a background

The same icon on a tinted square: data-variant="subtle" or "solid". The glyph keeps its size and padding is added: s 24 · m 36 (default) · l 48 · xl 64 · 2xl 80. data-intent picks the colour (accent by default); corners follow the Radius mode (Pill = circle).

<div class="dsgn-cluster" style="align-items: end"><span class="dsgn-icon" data-variant="subtle" data-size="s" aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="m" aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="l" aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="xl" aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="2xl" aria-hidden="true">bolt</span>
  <span class="dsgn-icon" data-variant="subtle" data-size="l" data-intent="neutral" data-fill aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="l" data-intent="success" data-fill aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="l" data-intent="warning" data-fill aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="subtle" data-size="l" data-intent="danger" data-fill aria-hidden="true">bolt</span>
  <span class="dsgn-icon" data-variant="solid" data-size="l" data-intent="accent" aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="solid" data-size="l" data-intent="success" aria-hidden="true">bolt</span><span class="dsgn-icon" data-variant="solid" data-size="l" data-intent="danger" aria-hidden="true">bolt</span></div>

Usage

Size = the line-height of the surrounding text (1lh in font-size resolves against the parent), so an icon always sits exactly in a line of text or a control. Decorative by default: always aria-hidden. A meaningful icon needs a text label on its control (aria-label), never on the glyph.

Standalone (outside text or a control): data-size s 16 · m 20 · l 24 · xl 32 · 2xl 48 px (optical size follows) data-intent neutral (muted) · accent · success · warning · danger (colour; default = text)

Background — the same icon on a tinted square (feature lists, empty states, cards):

Details

Classes: .dsgn-icon
Tokens used: --dsgn-accent-solid --dsgn-accent-solid-text --dsgn-accent-subtle --dsgn-accent-text --dsgn-danger-solid --dsgn-danger-solid-text --dsgn-danger-subtle --dsgn-danger-text --dsgn-duration-fast --dsgn-ease --dsgn-font-icon --dsgn-icon-grade --dsgn-icon-optical-size --dsgn-icon-size --dsgn-neutral-solid --dsgn-neutral-solid-text --dsgn-neutral-subtle --dsgn-neutral-text --dsgn-radius-l --dsgn-radius-m --dsgn-space-12 --dsgn-space-16 --dsgn-space-20 --dsgn-space-24 --dsgn-space-32 --dsgn-space-4 --dsgn-space-48 --dsgn-space-8 --dsgn-success-solid --dsgn-success-solid-text --dsgn-success-subtle --dsgn-success-text --dsgn-text-muted --dsgn-warning-solid --dsgn-warning-solid-text --dsgn-warning-subtle --dsgn-warning-text
In Figma: Icon · icon/outline · icon/fill (text styles)
Import alone: dsgn.systems/components/icon.css