unplugin-icons vs SVGR

unplugin-icons combines Iconify's massive icon library with on-demand, tree-shakeable component generation across any modern bundler.

On-Demand Icon Sets vs Custom SVG Conversion

unplugin-icons lets you import icons from Iconify's enormous collection directly as components (`import IconHome from '~icons/mdi/home'`) with automatic tree-shaking and bundler-agnostic support (Vite, Webpack, Rollup, esbuild) — SVGR specifically converts your own local SVG files into components, a different starting point entirely.

unplugin-icons imports from Iconify's massive on-demand icon collection
SVGR converts your own local custom SVG files into components
unplugin-icons works across Vite, Webpack, Rollup, and esbuild uniformly

Which to Reach for and When

Need a standard icon (settings, search, chevron) fast without designing or sourcing it yourself? unplugin-icons pulls it from Iconify instantly. Have a custom brand logo, illustration, or bespoke icon designed specifically for your product? SVGR converts that local file into a usable component.

Standard, common icons: unplugin-icons pulls them from Iconify instantly
Custom, brand-specific SVG assets: SVGR converts your own local files
Many modern projects use unplugin-icons for the bulk of standard UI icons

Frequently Asked Questions

Does unplugin-icons work with plain Vite projects, not just Vue or React?

Yes — it's genuinely framework-agnostic at the bundler level, with specific resolver support for React, Vue, Svelte, Solid, and other component frameworks built on top of the same underlying icon data.

Can I mix unplugin-icons for standard icons and SVGR for custom ones in the same project?

Yes — this is a common, sensible pattern: standard UI icons via unplugin-icons/Iconify, custom brand assets via SVGR, both coexisting in the same codebase without conflict.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Convert Image to SVG — Free