unplugin / unplugin-icons

unplugin-icons Access thousands of icons as components **on-demand** universally. Features • 🌏 Universal • 🤹 **Any** icon sets - ~150 popular sets with over 200,000 icons, logos, emojis, etc. Powered by Iconify. • 📦 **Major** build tools - Vite, Webpack, Rollup, Nuxt, Rspack, etc. Powered by unplugin. • 🚀 **Major** frameworks - Vanilla, Web Components, React, Vue 3, Solid, Svelte, and more. Contribute. • 🍱 **Any** combinations of them! • ☁️ On-demand - Only bundle the icons you really use, while having all the options. • 🖨 SSR / SSG friendly - Ship the icons with your page, no more FOUC. • 🌈 Stylable - Change size, color, or even add animations as you would with styles and classes. • 📥 Custom icons - load your custom icons to get universal integrations at ease. • 📲 Auto Importing - Use icons as components directly in your template. • 🦾 TypeScript support. • 🔍 Browse Icons    💡 **Story behind this tool**: Journey with Icons Continues - a blog post by Anthony    > ** has been renamed to **, see the migration guide Quick Start Basic Usage Import icons using the convention and use them as components. Auto importing is also supported. **React Example:** **Vue Example:** Installation > **Note**: This package is ESM-only. Make sure your project uses ES modules ( in or file extensions). Step 1: Install the Plugin Step 2: Install Icon Data We use Iconify as the icons data source (supports 100+ icon sets). > [!TIP] > ✨ **VS Code Users**: Install the Iconify IntelliSense extension for inlay preview, auto-completion, and hover information. **Option A: Install Full Collection** (Recommended for flexibility) This installs all icon sets (~120MB). Only icons you actually use will be bundled in production. **Option B: Install Individual Icon Sets** Install only the icon sets you need: **Option C: Auto Install** (Experimental) Let automatically install icon sets when you import them: Examples Check out the playgrounds page to try examples online in StackBlitz. Available examples: • Vite + Vue 3 • Vite + React • Next.js • Nuxt 4 • SvelteKit • Astro • And more... Configuration This section covers how to configure for different build tools and frameworks. Build Tools Vite Rollup Webpack Nuxt Nuxt 2 and Nuxt Bridge Nuxt 3/4 Or work with unplugin-vue-components resolvers See the Nuxt example for a working example project. Rspack Vue CLI > **Note**: This package is ESM-only. You need to use with ES module syntax (requires ). SvelteKit Add to your : Check instructions in the section below if you faced module import errors. See the SvelteKit example for a working example project. Svelte + Vite Svelte support requires the plugin: Add to your : Check instructions in the section below if you faced module import errors. See the Svelte + Vite example for a working example project. Next.js > **Note**: This package is ESM-only. You need to use with ES module syntax. Add to your : Check instructions in the section below if you faced module import errors. ⚠️ **Warning:** to import an icon is necessary to explicitly add the extension to the import path, so that Next.js knows how to load it, by example: See the Next.js example for a working example project. esbuild Astro See the Astro example for a working example project. Astro + Vue Required @astrojs/vue installed. See the Astro + Vue example for a working example project. Frameworks Configure the option based on your framework. Some frameworks may require additional peer dependencies. Vue 3 **Configuration:** **Peer Dependency:** > **Note**: As of Vue 3.2.13+, is included in the main package, so no additional installation is needed. If you're using an older version: **TypeScript Support:** Add to your : See the Vue 3 example for a complete setup. React **Configuration:** **Peer Dependencies:** **TypeScript Support:** Add to your : See the React example for a complete setup. Preact **Configuration:** **Peer Dependencies:** **TypeScript Support:** Add to your : See the Preact example for a complete setup. Solid **Configuration:** **TypeScript Support:** Add to your : See the Solid example for a complete setup. Svelte **Configuration:** **TypeScript Support:** **For SvelteKit**, add to : **For Svelte + Vite**, add to : **For Svelte 4**, use: **For Svelte 3**, use: See the Svelte example for a complete setup. Astro **Configuration:** **TypeScript Support:** Add to your : See the Astro example for a complete setup. Astro + Vue **Configuration:** **Requirements:** Requires @astrojs/vue to be installed. **TypeScript Support:** Add to your : See the Astro + Vue example for a complete setup. Qwik **Option 1: Native Qwik Compiler** (Recommended) **Configuration:** **Peer Dependency:** **Option 2: JSX Compiler** **Configuration:** **Peer Dependencies:** **TypeScript Support:** Add to your : See the Qwik example for a complete setup. Ember **Configuration:** **Build Tool Support:** Ember works with either Webpack or Vite. **For Vite applications**, add to : **TypeScript Support:** Add to your : Ember + Webpack Assuming your app was generated with , or manually migrated to embroider following the instructions on the old embroider readme Add the Icon plugin to the webpack plugins array in : See the Ember (with Webpack) or Ember vite example for a working example project. Raw SVG Import > Available from Import icons as raw SVG strings by adding to the import path. Useful for embedding SVG directly in HTML templates. **Example (Vue 3):** Custom Icons Load your own custom icons and use them with the same universal API. Then use as > 💡 SVG Authoring Tips: > - To make your icons color adaptable, set or in your SVG. > - Leave the and unspecified, we will set them for you. Auto-Import with Resolver When using auto-importing, register your custom collection names: See the Vue 3 example for a c…