Icon
A functional glyph, or a mark generated from a name, drawn in the current text color.
Live demo
Icon renders one glyph from a small functional set (chevrons, arrows, close, check, the status marks, a spinner, the menu dots, and the media-transport family: play, pause, stop, skip-forward, skip-back) as inline SVG. It carries no color of its own: the glyph is drawn in currentColor, so it inherits the text color around it and matches the derived theme with nothing to wire.
It sizes off the surrounding type by default, so an icon set beside a word lines up with it; size steps it in fixed em for a standalone glyph. An optional tone tints it to a semantic role or named hue, spin turns it into a loading affordance, and a label promotes it from decorative to a named image for assistive tech. Beyond the lookup, a name can carry a spec: a terse grammar (shield--star-s45-c1) the engine parses into a layered mark and composes on the fly, placing primitives on a grid, sizing, rotating, outlining, or knocking them out, and coloring them from the theme's own series via colors so a generated mark recolors with the theme. A parametric letter primitive typesets a glyph as a mark (--letter-A) in an indexed theme font slot (f0 sans, f1 display, f2 mono) that a ---f finish can swap for another theme font or a named web font. Lookup for the common glyph, generation for everything else, one element for both.
When to use
How this component composes with the rest of the set.
Button before or after the label for an icon-and-text control, or on its own in an icon-only button. Text at its default size to sit a glyph on the baseline mid-sentence. tone with a matching status glyph (success + tone="success") for a colored inline indicator. spin on the loader glyph for a lightweight busy indicator where a full Spinner is too much. Props
7 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Sizes
sm
A compact glyph for dense inline hints.
md
The default glyph, matching body text.
lg
A prominent glyph for a featured control.
xl
A large glyph for an empty-state or hero mark.
States
spin
Rotates continuously as a loading affordance; suppressed under reduced-motion.
Anatomy
The named parts that make up the component, with their selectors.
icon
The <svg> glyph, drawn in currentColor on a 24×24 grid.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent
--accent-2
--accent-3
--accent-4
--black
--blue
--brown
--cyan
--danger
--gray
--green
--info
--neutral
--orange
--pink
--purple
--red
--success
--warn
--white
--yellow
Accessibility
label the icon is aria-hidden, so an adjacent text label carries the meaning and the icon is not announced twice. label for a standalone icon that conveys meaning on its own (an icon-only button's glyph); it becomes role="img" with the name. spin honors prefers-reduced-motion, freezing the glyph for users who ask for less motion. Code
Glyphs and sizes
A few glyphs from the set, and the size steps.
<xtyle-icon name="search"></xtyle-icon>
<xtyle-icon name="check"></xtyle-icon>
<xtyle-icon name="chevron-right"></xtyle-icon>
<xtyle-icon name="menu" size="sm"></xtyle-icon>
<xtyle-icon name="menu" size="lg"></xtyle-icon><script lang="ts">
import { Icon } from "@xtyle/svelte";
</script>
<Icon name="search" />
<Icon name="check" />---
import Icon from "@xtyle/astro/Icon.astro";
---
<Icon name="search" />
<Icon name="check" />Toned and spinning
A tone colors the glyph; spin turns the loader into a busy indicator.
<xtyle-icon name="success" tone="success"></xtyle-icon>
<xtyle-icon name="warning" tone="warn"></xtyle-icon>
<xtyle-icon name="error" tone="danger"></xtyle-icon>
<xtyle-icon name="loader" spin label="Loading"></xtyle-icon><script lang="ts">
import { Icon } from "@xtyle/svelte";
</script>
<Icon name="success" tone="success" />
<Icon name="loader" spin label="Loading" />---
import Icon from "@xtyle/astro/Icon.astro";
---
<Icon name="success" tone="success" />
<Icon name="error" tone="danger" />Generated marks
A name carrying a spec is composed on the fly: primitives on a grid, sized / rotated / outlined / knocked out, colored from the theme's series via colors.
<!-- a name carrying a spec is composed, not looked up -->
<xtyle-icon name="crest--shield-c1--star-s45-cf" size="xl"></xtyle-icon>
<!-- a functional glyph rides as a charge by its bare name -->
<xtyle-icon name="check-badge--circle-c3--check-s55-cf" size="xl"></xtyle-icon>
<!-- a negative-space die: three pips knocked out of a rounded face -->
<xtyle-icon name="dice-3--square3-c1--dot-p7-s14-ko--dot-s14-ko--dot-p3-s14-ko" size="xl"></xtyle-icon>
<!-- the same spec re-skinned by scheme -->
<xtyle-icon name="chip--hex-c1--dot-s30-c2" colors="statuses" size="xl"></xtyle-icon><script lang="ts">
import { Icon } from "@xtyle/svelte";
</script>
<Icon name="crest--shield-c1--star-s45-cf" size="xl" />
<Icon name="chip--hex-c1--dot-s30-c2" colors="statuses" size="xl" />---
import Icon from "@xtyle/astro/Icon.astro";
---
<Icon name="crest--shield-c1--star-s45-cf" size="xl" />
<Icon name="chip--hex-c1--dot-s30-c2" colors="statuses" size="xl" />Text marks
The letter primitive typesets a glyph as a mark, drawn in an indexed theme font slot (f0 sans, f1 display, f2 mono); a ---f finish swaps a slot for another theme font or a named web font, and iconFontImports returns the loading code for a named web font.
<!-- the letter primitive typesets a glyph; -f1 draws it in the display font -->
<xtyle-icon name="initial--letter-A" size="xl"></xtyle-icon>
<xtyle-icon name="mono--letter-7-f2" size="xl"></xtyle-icon>
<!-- a monogram badged, colored, and scaled like any primitive -->
<xtyle-icon name="badge--circle-c1--letter-A-cb-s55" size="xl"></xtyle-icon>
<!-- a ---f finish swaps a slot to a named web font (load it separately) -->
<xtyle-icon name="mark--letter-Q-f1---f1-noto+sans+symbols" size="xl"></xtyle-icon><script lang="ts">
import { Icon } from "@xtyle/svelte";
</script>
<Icon name="initial--letter-A" size="xl" />
<Icon name="badge--circle-c1--letter-A-cb-s55" size="xl" />---
import Icon from "@xtyle/astro/Icon.astro";
---
<Icon name="initial--letter-A" size="xl" />
<Icon name="badge--circle-c1--letter-A-cb-s55" size="xl" />