Skip to content
Astro Digital Garden

Icons

Installation

  1. Install dependencies

    Terminal window
    pnpm add unplugin-icons @iconify/json

  2. Configure Astro

    astro.config.mjs
    import Icons from "unplugin-icons/vite";
    

    export default defineConfig({
      vite: {
        plugins: [
          Icons({
            compiler: "astro",
          }),
        ],
      },
    });

  3. Configure TypeScript (if you use TypeScript)

    tsconfig.json
    {
      "extends": "astro/tsconfigs/strict",
      "compilerOptions": {
        "types": ["unplugin-icons/types/astro"]
      }
    }

Example

import AstroLogo from "~icons/logos/astro-icon";


<AstroLogo style="font-size:3em" class="icon" />

Further improvements