mostlycss
Theme

Icon

.icon

.icon — the consumer-facing surface for the sprite.

Examples

Three sizes, one sprite

View “Three sizes, one sprite” as
<svg class="icon icon-sm" aria-hidden="true"><use href="#icon-check"></use></svg>
<svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>
<svg class="icon icon-lg" aria-hidden="true"><use href="#icon-check"></use></svg>

Colour comes from currentColor, so an icon takes the colour of whatever it sits in. The accessible name goes on the control, never on the <svg>, which is always aria-hidden.

Tokens 1

Level 2, declared on .icon itself. Set any of them on that selector to restyle this utility without touching the skin.

Level 2 tokens declared by icon
TokenDefault
--icon-size1em

Variants and states

Variants

  • .icon-lg
  • .icon-md
  • .icon-sm

Inside it

  • .icon-solid

State it reads

None.

Before you ship it

What you have to do 3 requirements

  1. Serve the sprite. npx mostlycss sprite --out public, once. Nothing in this stylesheet fetches it, so without that step every <use href> resolves to nothing and every icon is an empty box with no error anywhere.
  2. Name the control, never the glyph. On an icon-only button the accessible name belongs to the <button> — aria-label, or .sr-only text inside it. An <svg> carrying the label leaves the control itself unnamed.
  3. aria-hidden="true" on every decorative icon. An icon next to a text label that says the same thing is read twice without it.

src/css/utilities/icon.css · npx mostlycss add icon