unplugin-icons is a build tool plugin that provides on-demand access to thousands of icons as components across any framework and build system.
The tool solves the problem of icon management by letting developers use icons from over 150 icon sets containing more than 200,000 icons without bundling unused ones. It works by integrating with popular build tools through the unplugin framework, which supports Vite, Webpack, Rollup, Nuxt, and Rspack. Icons are imported using a simple naming convention and rendered as native components in the target framework. The plugin fetches icon data from Iconify and only includes icons actually used in the final bundle. It supports server-side rendering and generation without flash of unstyled content, and icons can be styled like regular elements through CSS classes and inline styles.
Developers should choose this tool if they need icon support across multiple frameworks or want to avoid maintaining separate icon solutions for different parts of their codebase. It suits projects using React, Vue, Solid, Svelte, or other modern frameworks, as well as vanilla JavaScript and web components. The tool offers three installation modes for icon data: installing the full collection for maximum flexibility, installing individual icon sets to minimize dependencies, or using experimental auto-installation. TypeScript support and auto-importing of icons as components are built in, and a VS Code extension provides inlay previews and auto-completion.
The project maintains active engagement with its ecosystem through multiple maintained examples covering Vite with Vue and React, Next.js, Nuxt, SvelteKit, and Astro. The codebase is written in TypeScript and published as an ESM-only package. The tool has undergone significant evolution, including a rename from its original name and a major version update that raised the Node.js requirement.
