Icon integration for Astro

Every icon you need.
Zero runtime.

Local SVGs, 300,000+ Iconify icons, sprites, and framework adapters — resolved and optimized at build time. Nothing shipped to the browser.

Get started

300k+Iconify icons

5framework adapters

0 kbclient JavaScript

100%build-time SVGO

01 — What you get

One component, every icon source

Icons are resolved, deduplicated, and optimized when you build — not loaded from a client-side icon pack. Features has examples, comparisons, and deep dives.

Local SVG files

Drop .svg files in src/icons/ and reference them by name. Subfolders work — logos/astro for src/icons/logos/astro.svg.

Iconify icon sets

Install @iconify-json/* packages and use set:icon-name in name — 300,000+ icons across 214+ icon sets.

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} for files that shouldn't live in a shared icon dir.

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 don't pull in whole sets.

02 — How it feels

Name it, ship it

Reference a local file, an Iconify icon, or an imported SVG with the sameIcon component. Repeated icons become sprites automatically.

Getting started →Configuration →

src/pages/index.astro

---
import { Icon } from "astro-iconset/components";
import logo from "../assets/logo.svg?icon";
---

<!-- src/icons/rocket.svg -->
<Icon name="rocket" />

<!-- any Iconify set -->
<Icon name="mdi:account" size={24} />

<!-- one-off import -->
<Icon icon={logo} title="Logo" />

Every icon you need.Zero runtime.