Unplugin Icons

Unplugin Icons is a plug-in that dynamically generates icon components.

You can use it to render icons if you are building an app using one of the following UI frameworks:

• React, Preact
• Vue 2.7+, Vue 3
• Svelte
• Solid
• Astro
• Qwik

With Unplugin Icons, you can easily use over 200,000 open source icons and custom icons with minimal code.

How does it work?

It is a plug-in that works with practically all modern build tools, generating components dynamically as needed.

React example

tsximport HomeIcon from '~icons/mdi/home';

function Demo() {
   return (
       <p>
           Home icon: <HomeIcon />
       </p>
   );
}

Vue example

Example of Vue template:

vue<script setup lang="ts">
import MdiHome from 'virtual:icons/mdi/home';
</script>

<template>
   <p>Home icon: <MdiHome /></p>
</template>


Installation and usage

Installation and usage instructions depend on what build tools and UI framework you are using.

See Unplugin Icons readme for instructions.

Examples

If you want to see full examples, which include both configuration and templates, check out Unplugin Icons examples.

Custom icons

You can use Unplugin Icons with custom icons.

With Iconify Tools you can import, clean up and optimise icons and use them with Unplugin Icons.

You can find a working example in Iconify Tools repository, see vite.config.ts for example of config that loads custom icons.

Functions are documented in Iconify Tools section of this documentation.