unplugin-icons

To use icons in React or Solid without explicit imports, combine unplugin-icons with unplugin-auto-import. You can configure a custom prefix and extension. Type declarations are generated automatically.

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'

export default {
  plugins: [
    AutoImport({
      resolvers: [
        IconsResolver({
          prefix: 'Icon',
          extension: 'jsx',
        }),
      ],
    }),
    Icons({
      compiler: 'jsx', // or 'solid'
    }),
  ],
}

export function Component() {
  return (
    <div>
      <IconCarbonApps />
      <IconMdiAccountBox style="font-size: 2em; color: red" />
    </div>
  )
}

Ember support works with both Vite and Webpack (via Embroider).

Vite Configuration: Add the plugin to your vite.config.mjs alongside @embroider/vite and @rollup/plugin-babel.

Webpack Configuration: Add the plugin to the webpackConfig.plugins array within ember-cli-build.js using compatBuild.

TypeScript Support: Add unplugin-icons/types/ember to your tsconfig.json.

// Vite
import { ember, extensions } from '@embroider/vite'
import { babel } from '@rollup/plugin-babel'
import Icons from 'unplugin-icons/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    ember(),
    Icons({
      compiler: 'ember',
    }),
    babel({
      babelHelpers: 'runtime',
      extensions,
    }),
  ],
})

Add the Icons plugin to your vite.config.ts file.

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Icons({ /* options */ }),
  ],
})

Install the unplugin-icons plugin as a development dependency. Note that this package is ESM-only; ensure your project uses ES modules (e.g., by setting "type": "module" in your package.json or using .mjs extensions).

npm i -D unplugin-icons

To use unplugin-icons, you must integrate it into your build tool's configuration file. The import path varies depending on the tool used (e.g., unplugin-icons/vite, unplugin-icons/webpack, etc.).

// Vite
import Icons from 'unplugin-icons/vite'

// Rollup
import Icons from 'unplugin-icons/rollup'

// Webpack
import Icons from 'unplugin-icons/webpack'

// Rspack
import Icons from 'unplugin-icons/rspack'

// esbuild
import Icons from 'unplugin-icons/esbuild'

Next.js requires the plugin to be added via the webpack function in next.config.mjs. You must set the compiler to jsx and specify the jsx runtime (e.g., react).

Important: When importing icons in Next.js, you must explicitly include the .jsx extension in the import path to ensure correct loading.

// next.config.mjs
import Icons from 'unplugin-icons/webpack'

/** @type {import('next').NextConfig} */
export default {
  reactStrictMode: true,
  webpack(config) {
    config.plugins.push(
      Icons({
        compiler: 'jsx',
        jsx: 'react'
      })
    )
    return config
  }
}

// Usage requirement:
import IconArrowRight from '~icons/dashicons/arrow-right.jsx';

To use icons in Vue 3 without explicit imports, combine unplugin-icons with unplugin-vue-components. This allows you to use icons directly in templates using the naming pattern {prefix}-{collection}-{icon}. Only the icons you actually use will be bundled in your final build.

// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Vue(),
    Components({
      resolvers: [
        IconsResolver(),
      ],
    }),
    Icons(),
  ],
}

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

For SvelteKit or Svelte + Vite, add the plugin to vite.config.ts and set the compiler option to 'svelte'.

TypeScript Support:

• SvelteKit: Add import 'unplugin-icons/types/svelte' to src/app.d.ts.
• Svelte + Vite: Add <reference types="unplugin-icons/types/svelte" /> to src/vite-env.d.ts.
• Svelte 4: Use unplugin-icons/types/svelte4.
• Svelte 3: Use unplugin-icons/types/svelte3.

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import Icons from 'unplugin-icons/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    sveltekit(),
    Icons({
      compiler: 'svelte',
    })
  ]
})

Add the plugin to the vite.plugins array in astro.config.mjs. Set the compiler to 'astro' for standard Astro projects, or 'vue3' if using the @astrojs/vue integration.

// Standard Astro
import { defineConfig } from 'astro/config'
import Icons from 'unplugin-icons/vite'

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

To use icons, you must install the icon data from Iconify. You have three options:

1. Full Collection (Recommended): Installs all icon sets (~120MB). Only icons you actually use are bundled in production.
2. Individual Icon Sets: Install only specific sets to keep your dev dependencies smaller (e.g., @iconify-json/mdi).
3. Auto Install (Experimental): Configure the plugin to automatically install icon sets when they are imported.

Add the Icons plugin to your webpack.config.mjs file. Note that this package is ESM-only and requires ES module syntax.

// webpack.config.mjs
import Icons from 'unplugin-icons/webpack'

export default {
  /* ... */
  plugins: [
    Icons({ /* options */ }),
  ],
}