Zappicon Vue

Free & premium UI icons library, crafted to simplify workflows 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.

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