Components / Content patterns

Icon

Small inline visuals and compact labels.

Basic structure

span.icon > svg

Try it

A decorative icon inherits text color.

<p><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></svg></span> A decorative icon inherits text color.</p>

Class or attribute	What it does
`icon.is-small/is-large`	Explicit icon sizes; SVG inherits currentColor.
`aria-hidden / accessible name`	Hide decorative icons; name icon-only actions.