Zappicon Tailwind CSS Plugin

A Tailwind CSS plugin for seamless integration of Zappicon's free & premium UI icon library into your Tailwind projects.

• 11,000+ Free icons (220+ Icons × 5 Styles)
• 5 Styles Available (Light, Regular, Filled, Duotone, Duotone Line)
• Unified keyline shapes on a 24×24 px grid
• Easy customization of colors, sizes, and styles using Tailwind utilities

Features

• Use Zappicon icons as Tailwind CSS components or utilities
• Full TypeScript support
• Works with all Tailwind CSS projects (v3+)
• SVG-based icons that scale perfectly on any device
• Tree-shakeable: only includes icons you use

Installation

# Using npm
npm install @zappicon/tailwind

# Using yarn
yarn add @zappicon/tailwind

# Using pnpm
pnpm add @zappicon/tailwind

Configuration

TailwindCSS v4

@plugin "zappicon-tailwind";

/* with options */
@plugin "zappicon-tailwind" {
  prefix: "za";
  size: "1em";
  color: "orange";
}

TailwindCSS v3

In your tailwind.config.js

const { zappicon } = require("zappicon-tailwind")

module.exports = {
  plugins: [
    zappicon({
      prefix: "za",
      size: "1em",
      color: "orange",
    }),
  ],
}

Usage

You can also use icon classes in your markup (HTML, JSX, etc.):

<i class="za-star-regular text-blue-500 w-6 h-6"></i>

Icon Styles (Variants)

Each icon comes in 5 styles:

| Style | Variant value | Example class | | ------------ | -------------- | ---------------------- | | Filled | filled | za-star-filled | | Regular | regular | za-star-regular | | Light | light | za-star-light | | Duotone | duotone | za-star-duotone | | Duotone Line | duotone-line | za-star-duotone-line |

Customization

Use Tailwind utilities to customize icon size, color, and more:

<i class="za-star-regular text-yellow-500"></i>
<i class="za-star-filled w-8 h-8 text-pink-600"></i>

Support

• Bug Reports: GitHub Issues
• Discussions: GitHub Discussions
• Website: zappicon.com