About · Icons · Packages · License · Support

Zappicon Tailwind CSS Plugin

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

• 2,000+ Free icons (400+ 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.

Pro Version with 23,000+ icons coming soon.

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