Library · Media & Buttons

Icon

Inlines a named SVG from src/icons/ at build time — no runtime fetch, no dependency. Icons inherit currentColor; decorative (aria-hidden) unless ariaLabel is passed. The icon set + naming convention live in src/icons/README.md. Figma: each glyph is a component on the Primitives page Icons band, named identically to its file.

Figma: Primitives / Icons band (12 components) ↗
Live preview — edit theme bottom-right 
---
import Icon from "../components/primitives/icon/Icon.astro";

const names = [
  "arrow-right",
  "chevron-down",
  "chevron-right",
  "close",
  "menu",
  "play",
  "external-link",
  "mail",
  "phone",
  "facebook",
  "instagram",
  "linkedin",
];
---
{names.map((name) => (
  <figure>
    <Icon name={name} size={24} />
    <figcaption class="type-caption">{name}</figcaption>
  </figure>
))}
<figure class="accent">
  <Icon name="arrow-right" size={32} ariaLabel="Next" />
  <figcaption class="type-caption">currentColor + size</figcaption>
</figure>

Props

NameTypeRequiredDescription
name string Yes Icon name = filename in src/icons/ without extension (e.g. 'arrow-right')
size number — Square size in px (default: 24)
ariaLabel string — Accessible label. Omitted = decorative (aria-hidden)
class string — Additional classes

Example with all props

<Icon name="arrow-right" size={16} />

<Icon name="mail" size={20} ariaLabel="Email us" class="contact-icon" />