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 150,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
import HomeIcon from '~icons/mdi/home';
function Demo() {
return (
<p>
Home icon: <HomeIcon />
</p>
);
}Vue example
Example of Vue template:
<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.js for example of config that loads custom icons.
Functions are documented in Iconify Tools section of this documentation.