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:

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

Examples:

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.