Local SVG files
Drop .svg files in src/icons/ (or your own paths) and reference them by name. Subfolders work — e.g. logos/astro for src/icons/logos/astro.svg.
Astro Iconset
Local SVGs, Iconify, sprites, and framework adapters — all optimized at build time with zero icon runtime in the browser.
What you get
Section titled “What you get”Icons are resolved, deduplicated, and optimized when you build — not loaded from a client-side icon pack. Here is the full surface area; Features has examples, comparisons, and deep dives.
Iconify icon sets
Install @iconify-json/* packages and use set:icon-name in name — thousands of sets via Iconify.
Framework islands
astro-iconset/react, /vue, /svelte, /preact, and /solid for icons inside framework components, not only .astro files.
SVG imports (?icon)
Use import logo from "../assets/logo.svg?icon" and pass icon={logo} when a file should not live in a shared icon directory.
Sprites
Repeated uses of the same icon share <symbol> / <use> output automatically — smaller HTML on icon-heavy pages.
SVGO optimization
Local SVGs pass through SVGO at build time; tune behavior with svgoOptions in config.
Named icon directories
iconDirs maps prefixes to folders — e.g. brand:logo from src/brand-icons/. Mix multiple sets without collisions.
SSR bundle control
For server or hybrid output, include limits which Iconify icons ship in server bundles so you do not pull in whole sets.