Icon

Sizes an inline SVG to the surrounding text and aligns it with the text beside it.

Example

View Code

<a class="icon" href="#">
    <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 21h16" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    Download
</a>

When to use it

Wrap an inline SVG in an icon whenever it should behave like a character: in a link, a button, a list item, a heading. It takes the size and colour of the text around it and stays aligned with it, at any font size.

How it works

The wrapper is an inline flex row with a small gap. The SVG is sized to one em, so it follows the text size, and currentColor inside it follows the text colour. data-align chooses between centering on the line, which suits buttons and labels, and sitting on the baseline, which suits running text; the baseline setting nudges the glyph down an eighth of an em, because an icon whose bottom edge sits exactly on the baseline reads as floating.

<button class="icon" type="button">
    <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/></svg>
    Save
</button>

Why this name

An icon is what it holds. Foundation 6 shipped an icon font instead, which set size and alignment by font rules; inline SVG needs this small layout to do the same.

Attributes

Attribute	Type	Values	Default	Description
`data-gap`	enum	`none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `xs-sm`, `xs-md`, `xs-lg`, `xs-xl`, `xs-2xl`, `xs-3xl`, `sm-md`, `sm-lg`, `sm-xl`, `sm-2xl`, `sm-3xl`, `md-lg`, `md-xl`, `md-2xl`, `md-3xl`, `lg-xl`, `lg-2xl`, `lg-3xl`, `xl-2xl`, `xl-3xl`, `2xl-3xl`	`xs`	Space between the icon and its text.
`data-align`	enum	`start`, `center`, `end`, `stretch`, `baseline`	`center`	How the icon lines up with the text: centered on the line, or on the baseline.

Children

> svg: exactly 1. The icon, an inline SVG, sized to one em.

Tokens

Token	Description
`--yeti-space-xs`	The default gap.

Internal tokens (may change between minor versions)

- `--_yeti-gap` - `--_yeti-align`

Accessibility

When the icon sits beside text, give the SVG aria-hidden="true" so the text is the name. When it stands alone, give the SVG role="img" and an aria-label.

Browser support

Used without guards: inline flexbox gap, translate property
Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.