@unocss/preset-icons

Use any icons with Pure CSS for UnoCSS.

💡 Recommend reading -
Icons in Pure CSS

Follow the following conventions to use the icons

<prefix><collection>-<icon>
<prefix><collection>:<icon>

For examples:

<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i-mdi-alarm text-orange-400" />
<!-- A large Vue logo -->
<div class="i-logos-vue text-3xl" />
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Twemoji of laugh, turns to tear on hovering -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

^{This is powered by pure CSS}

Install

npm i -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

We use Iconify as our data source of icons. You need to install the corresponding iconset in devDependencies by following the @iconify-json/* pattern. For example, @iconify-json/mdi for Material Design Icons, @iconify-json/tabler for Tabler. You can refer to Icônes or Iconify for all the collections available.

import presetIcons from '@unocss/preset-icons'

Unocss({
  presets: [
    presetIcons({ /* options */ })
    // ...other presets
  ]
})

💡 You can also use this preset alone as a complement to your existing UI frameworks to have pure CSS icons!

If you prefer to install the all the icon sets available on Iconify at once (~130MB):

npm i -D @iconify/json

Configuration

Refer to the type definition for all configurations avaliable.

Extra Properties

You can provide the extra CSS properties to control the default behavior of the icons. The following is an example of make icons inlined by default:

presetIcons({
  extraProperties: {
    'display': 'inline-block',
    'vertical-align': 'middle',
    // ...
  }
})

Modes Overriding

By default, this preset will choose the rendering modes automatically for each icon based on the icons' characteristics. You can read more in this blog post. In some cases, you may want to explicitly set the rendering modes for each icon.

?bg for background-img - renders the icon as a background image
?mask for mask - renders the icon as a mask image

for example, vscode-icons:file-type-light-db, an icon with colors that will be rendered as a background image. Use vscode-icons:file-type-light-db?bg to render it as a mask image and bypass it's colors.

Credits

This preset is inspired from this issue created by @husayt. Based on the work of this PR by @userquin.

JSPM