Access thousands of icons as components on-demand universally

Written by Bahaa Zidan

May 16, 2025

Today I’m showcasing unplugin-icons. An amazing library that basically solved the icon problem for me. Here’s a feature list from their README:

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, Vue 2, 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

Usage (React)

import IconAccessibility from "~icons/carbon/accessibility";
import IconAccountBox from "~icons/mdi/account-box";
 
function App() {
  return (
    <div>
      <IconAccessibility />
      <IconAccountBox style={{ fontSize: "2em", color: "red" }} />
    </div>
  );
}

Installation

Since it’s framework agnostic, I’m not gonna be listing all the different ways you can get it to work in your framework of choice. I’ll only show how I got it to work in SvelteKit

Install unplugin-icon

pnpm add -D unplugin-icons

Either install the full iconify pack or your icon pack of choice. I’ll install the tabler pack:

pnpm add @iconify-json/tabler

In your vite.config.ts:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vitest/config";
import Icons from "unplugin-icons/vite";
 
export default defineConfig({
  plugins: [
    sveltekit(),
    Icons({
      compiler: "svelte",
    }),
  ],
});

Finally, in your src/app.d.ts file:

import "unplugin-icons/types/svelte";
 
declare global {
  namespace App {}
}
 
export {};

And that’s it! Now you can import the icons across your SvelteKit project with ease:

<script>
  import GoogleIcon from "virtual:icons/tabler/brand-google-filled";
  import GitHubIcon from "virtual:icons/tabler/brand-github-filled";
</script>
 
<button class="btn btn-error btn-active text-white">
  <GoogleIcon width={32} height={32} />
  Google
</button>
<button class="btn btn-neutral btn-active">
  <GitHubIcon width={32} height={32} />
  GitHub
</button>

As you can see, you can also style them because at runtime it’s just an svg.