Skip to content
On this page

Icons with UnoCSS

If you are using UnoCSS, you can easily use over 150,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.

Released under the Apache 2.0 License.