@unocss/preset-icons

What is @unocss/preset-icons?

@unocss/preset-icons is a preset for UnoCSS that provides a convenient way to use icons from various icon sets in your projects. It allows you to easily integrate and customize icons using utility-first CSS.

What are @unocss/preset-icons's main functionalities?

Basic Icon Usage

This feature allows you to use icons from various icon sets by simply adding a class to your HTML or JSX. The class name follows a specific pattern that includes the icon set and the icon name.

import { defineConfig } from 'unocss';
import presetIcons from '@unocss/preset-icons';

export default defineConfig({
  presets: [
    presetIcons(),
  ],
});

// In your HTML or JSX
<div class="i-heroicons-outline-home"></div>

Customizing Icon Size

You can easily customize the size of the icons by using utility classes like `text-2xl`. This leverages the utility-first approach of UnoCSS to provide flexible and easy-to-use customization options.

<div class="i-heroicons-outline-home text-2xl"></div>

Customizing Icon Color

Similar to size customization, you can also change the color of the icons using utility classes like `text-red-500`. This makes it easy to integrate icons that match your design system.

<div class="i-heroicons-outline-home text-red-500"></div>

Other packages similar to @unocss/preset-icons

react-icons

react-icons provides a comprehensive set of icons for React applications. It supports a wide range of icon libraries and allows for easy integration and customization. Compared to @unocss/preset-icons, react-icons is specifically designed for React and offers a more component-based approach.

fontawesome

Font Awesome is a popular icon library that offers a vast collection of icons. It provides both free and premium icons and can be used in various frameworks and libraries. While @unocss/preset-icons focuses on utility-first CSS, Font Awesome provides a more traditional approach with its own set of classes and customization options.

heroicons

Heroicons is a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. It is often used in combination with Tailwind CSS. Compared to @unocss/preset-icons, Heroicons is more focused on providing a specific set of icons rather than integrating multiple icon sets.

README

@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