Content

Icon

Size inline icons through the component that holds them.

On this page

Put icon on the <svg>, <img> or icon component itself. Components never style their children by element type; each one sets --icon-size and the icon follows it, so a button, a badge and a tab size the same markup differently.

One icon, three contexts

PreviewCode

<button type="button" class="btn btn-sm">  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">    <path d="M12 5v14M5 12h14" />  </svg>Small</button><button type="button" class="btn">  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">    <path d="M12 5v14M5 12h14" />  </svg>Medium</button><button type="button" class="btn btn-lg">  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">    <path d="M12 5v14M5 12h14" />  </svg>Large</button>

#In text

Outside a component an icon is 1em, set slightly below the baseline so it sits with lowercase text.

In text

PreviewCode

<p class="m(0) text-sm fg-text-body">Press<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">  <path d="M12 3v12M7 10l5 5 5-5M5 21h14" /></svg>to download the report.</p>

#Stroke

Stroke icons drawn on a 24px grid use a 1.5 stroke: about 1px at 16px. --icon-stroke adjusts it for a set; fill icons are unaffected.

Stroke

PreviewCode

<svg class="icon fg-text-strong" style="--icon-size: 1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">  <circle cx="12" cy="12" r="8" />  <path d="M12 8v4l2.5 2.5" /></svg><svg class="icon fg-text-strong" style="--icon-size: 1.5rem; --icon-stroke: 1.25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">  <circle cx="12" cy="12" r="8" />  <path d="M12 8v4l2.5 2.5" /></svg><svg class="icon fg-text-strong" style="--icon-size: 1.5rem; --icon-stroke: 2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">  <circle cx="12" cy="12" r="8" />  <path d="M12 8v4l2.5 2.5" /></svg>

#Accessibility

Hide a decorative icon with aria-hidden="true".
An icon-only control carries the name itself, such as aria-label on a square button.

#Custom properties

Property	Default	Description
`--icon-size`		Width and height. The component that holds the icon sets it; without one it is 1em
`--icon-stroke`		Stroke width of a stroke icon, 1.5 when not set; fill icons are unaffected
`--icon-color`		Color of the icon. A component sets it to quiet or tint its icons; without one the icon takes the text color

#Classes

Class	Description
`icon`	An inline icon sized by --icon-size, 1em outside a component, set slightly below the baseline

#Source

@master/ui/components/icon.css

/* * Icon: sizes an inline icon by the --icon-size its component provides. * Put .icon on the <svg>, <img> or icon component itself. Components never reach into * their children by element type; they set --icon-size, --icon-stroke and --icon-color instead. */@layer components {  .icon {    flex: none;    width: var(--icon-size, 1em);    height: var(--icon-size, 1em);    /* Icons carry internal whitespace; a control pulls them toward its edge by --icon-offset. */    margin-inline: var(--icon-offset, 0);    /* Overrides a stroke icon's own stroke-width; fill icons are unaffected. */    stroke-width: var(--icon-stroke, 1.5);    /* A component may quiet its icons next to a strong label; by default an icon takes the text color. */    color: var(--icon-color, inherit);    vertical-align: -.125em;  }}