Appearance
QsIcon
<qs-icon>alphaA pixel-art icon rendered as inline SVG. Icons are drawn from a curated
pixelarticons set and inherit their color from
the surrounding text (currentColor) and their size from --qs-icon-size
(defaults to 1em, so an icon matches the adjacent text by default).
Decorative by default (aria-hidden). Pass label to expose the icon to
assistive technology as a standalone image.
Icon
Pixel-art icons rendered as inline SVG, drawn from a curated pixelarticons set (MIT). Icons inherit their color from the surrounding text and their size from the font by default, so they sit naturally inside labels, buttons and prose.
html
<qs-icon name="check"></qs-icon>
<qs-icon name="close"></qs-icon>
<qs-icon name="search"></qs-icon>Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | "" | The icon to display. Must match a name from the curated set (e.g. `check`, `close`, `chevron-right`). See the icon gallery for all available names. |
size | "sm" | "md" | "lg" | "" | "" | Preset size. When omitted, the icon sizes to `1em` and follows the text. |
label | string | "" | Accessible name. When set, the icon is exposed as an image (`role="img"` + `aria-label`); otherwise it is hidden from assistive tech. |
text | string | — | The text content of the element, captured from light DOM before the first render. |
Usage
An icon is decorative by default. Use it to reinforce a nearby text label, never as the only carrier of meaning unless you give it an accessible name (see Accessibility).
Sizing
Without a size, the icon is 1em — it matches the text it sits next to and scales with it. Use the size presets for standalone icons.
Inline
html
<!-- Follows the text (default) -->
<span>Open in new tab <qs-icon name="external-link"></qs-icon></span>
<!-- Preset sizes: sm (16px), md (24px), lg (32px) -->
<qs-icon name="user" size="sm"></qs-icon>
<qs-icon name="user" size="md"></qs-icon>
<qs-icon name="user" size="lg"></qs-icon>For an arbitrary size, set --qs-icon-size on the element:
html
<qs-icon name="user" style="--qs-icon-size: 40px"></qs-icon>Color
Icons paint with currentColor, so set color on the icon or any ancestor and the icon follows.
html
<span style="color: var(--color-error)">
<qs-icon name="square-alert"></qs-icon> Something went wrong
</span>Inside other components
Because the icon is currentColor + 1em, it composes cleanly inside a button or link with no extra styling.
html
<qs-button variant="primary">
<qs-icon name="download"></qs-icon> Download
</qs-button>Accessibility
By default an icon is aria-hidden and removed from the accessibility tree — correct when the adjacent text already conveys the meaning.
When the icon stands alone (e.g. an icon-only button), give it a label. It is then exposed as an image (role="img" + aria-label).
html
<!-- Decorative: text says it all -->
<qs-button><qs-icon name="trash"></qs-icon> Delete</qs-button>
<!-- Meaningful: icon is the only label -->
<button aria-label="Delete">
<qs-icon name="trash" label="Delete"></qs-icon>
</button>Gallery
Every icon in the curated set. Need one that isn't here? Add it with npm run gen:icons -- <name> (any name from pixelarticons.com).