@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.

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

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',
    // ...
  }
})

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