Skip to content

Icons with UnoCSS

If you are using UnoCSS, you can easily use over 200,000 open source icons and custom icons with minimal code.

Among other features, UnoCSS has @unocss/preset-icons package that dynamically generates icons. It uses icon data from Iconify.

Usage

To use icons with UnoCSS, add @unocss/preset-icons preset to config:

jsimport presetIcons from '@unocss/preset-icons';

UnoCSS({
   presets: [
       presetIcons({
           /* options */
       }),
       // ...other presets
   ],
});

In your code add element with the following class name: "i-" + icon set prefix + "-" + icon name.

Examples:

html<span class="i-carbon-logo-github"></span>
<span class="i-mdi-light-home"></span>

It is that simple.

For more information, see README file in preset-icons package.

Icon size

Be aware that by default, UnoCSS scales icons to 1.2em.

You can change that by changing scale option.

Custom icons

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

See demo from Iconify Tools package. Configuration is in unocss.config.ts.

Functions used in that config file are documented in Iconify Tools section of this documentation.

Released under the Apache 2.0 License.