Icon Components UnoCSS

Unplugin Icons

unplugin-icons is an alternative to Iconify icon components, developed by Anthony Fu.

It generates icon components on demand for multiple frameworks and supports all popular build tools.

Latest documentation is available at unplugin-icons GitHub repository.

Difference

What is the difference from Iconify icon components?

unplugin-icons does not load icon data from API. It detects icons that you are using in your project and bundles them during build process.

It is very easy to use.

Usage

unplugin-icons generates icon components for the following frameworks:

  • Vue 2
  • Vue 3
  • React
  • Preact
  • Svelte
  • Solid

Usage example for 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>
   );
}

See unplugin-icons GitHub repository for more information.

Custom icons

You can use unplugin-icons with custom icons. During build process you can import, clean up and optimise icons using Iconify Tools.

See demo from Iconify Tools package. Configuration is in svelte.config.js.