@unocss/preset-icons

Use any icons with Pure CSS for UnoCSS.

<!-- 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!

Configurations

// TODO:

Prefix

// TODO:

Mode

// TODO:

Credits

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

License

MIT License © 2021-PRESENT Anthony Fu