Getting Started

Astro Iconset adds an Icon component and an Astro integration for local SVGs and Iconify sets. This guide assumes you already have an Astro project. If not, see the Astro installation guide.

1. Install the package

astro add is not required. Pick your package manager:

npm

npm install astro-iconset

pnpm

pnpm add astro-iconset

Yarn

yarn add astro-iconset

2. Register the integration

Add the integration to astro.config.mjs:

astro.config.mjs

import { defineConfig } from "astro/config";
 import icon from "astro-iconset";

export default defineConfig({
  integrations: [icon()],
});

3. Add icons

Place .svg files under src/icons/ (the default). You may use subfolders — for example src/icons/logos/astro.svg is referenced as logos/astro.

4. Render an icon

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

<Icon name="my-icon" />

If something does not work as expected, open an issue with a minimal reproduction.

Next steps

• Local & Iconify icons — Iconify sets, include for SSR, and more.
• SVG imports (?icon) — Import a single file with ?icon and pass icon={…}.
• Components — Props, sprites, and is:inline.
• Configuration — iconDir, iconDirs, svgoOptions.

Updating Astro Iconset

Third-party integrations are not handled by @astrojs/upgrade. Install the latest tag manually:

npm

npm install astro-iconset@latest

pnpm

pnpm add astro-iconset@latest

Yarn

yarn add astro-iconset@latest

See the changelog for release notes.

Troubleshooting

Use the configuration reference and the guides in the sidebar. If the problem is Astro itself, the Astro documentation is the best place to start. For bugs and feature requests, use GitHub issues.