About · Icons · Packages · License · Support

Zappicon Vue

Zappicon is a free and premium UI icon library, crafted with care for designers, developers, and creators.

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

Pro Version with 23,000+ icons coming soon.

Features

• Full TypeScript support with proper type definitions.
• Easy customization of style with CSS.
• Built with Vue 3+ and modern best practices.
• SVG-based icons that scale perfectly on any device.
• Tree-shakeable icons let you import only what you use.

Installation

# Using npm
npm install @zappicon/vue

# Using yarn
yarn add @zappicon/vue

# Using pnpm
pnpm add @zappicon/vue

How to use

Zappicon uses ES Modules for full tree-shaking, so your bundle only includes the icons you import.

<script setup>
import { Star } from "@zappicon/vue"
</script>

<template>
  <div>
    <Star />
  </div>
</template>

Props

Name	Type	Default	Possible Values
size	number	24	Any valid CSS size unit
color	string	currentColor	Any CSS color
variant	string	"regular"	"filled" | "regular" | "light" | "duotone" | "duotone-line"
class	string	""	Additional CSS classes

Example

<script setup>
import { Star } from "@zappicon/vue"
</script>

<template>
  <div>
    <Star variant="filled" :size="48" color="#ff9900" />
  </div>
</template>

variant

Each icon comes in 5 styles:

Style	Variant value
Filled	variant="filled"
Regular	variant="regular"
Light	variant="light"
Duotone	variant="duotone"
Duotone Line	variant="duotone-line"

Example:

<!-- One Variant -->
<script setup>
import { Star } from "@zappicon/vue"
</script>

<template>
  <div>
    <Star variant="regular" />
  </div>
</template>

<!-- Different Variants -->
<script setup>
import { Star } from "@zappicon/vue"
</script>

<template>
  <div>
    <Star variant="light" />
    <Star variant="regular" />
    <Star variant="filled" />
    <Star variant="duotone" />
    <Star variant="duotone-line" />
  </div>
</template>

class

This allows you to apply Tailwind CSS utilities or your own custom CSS classes for size, color, and other effects.

<!-- Tailwind CSS -->
<Star variant="regular" class="w-8 h-8 text-blue-500" />

<!-- Custom CSS -->
<Star variant="regular" class="my-icon" />

Support

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