Skip to content
Astro Iconset

Local & Iconify icons

Local icons

Section titled “Local icons”

Add .svg files under src/icons/ by default (or set iconDir / iconDirs). Reference them by path relative to that folder, without the extension:

---
import { Icon } from "astro-iconset/components";
---


<Icon name="logo" />
<Icon name="logos/astro" />

Files are optimized with SVGO. Integration options are in the configuration reference.

Iconify icon sets

Section titled “Iconify icon sets”

Iconify bundles many open-source sets as @iconify-json/* npm packages. After you install a package, icons are available to the Icon component by set:icon-name.

Find icons

Section titled “Find icons”

Browse sets on Iconify Icon Sets or Icônes.

Install a set

Section titled “Install a set”

Example: Material Design Icons (mdi).

Terminal window
npm install @iconify-json/mdi

Use an icon

Section titled “Use an icon”
---
import { Icon } from "astro-iconset/components";
---


<Icon name="mdi:account" />

You can mix local icons and multiple Iconify sets in the same project.