@vezham/icons-vue

Vezham Vue

1273+ pixel-perfect SVG icons • outline, filled, duotone-outline, and duotone-filled weights • Vue 3 component wrapper • Zero dependencies • MIT Licensed

Install • Usage • Props • Tree-shaking • Icon Names • TypeScript

Vezham Vue is the official Vue 3 package for Vezham — a free, open-source SVG icon library featuring 1273+ handcrafted, grid-aligned icons. Every component is tree-shakeable, fully TypeScript-ready, and ships with zero dependencies.

Install

npm i @vezham/icons-vue
# or
bun add @vezham/icons-vue
# or
yarn add @vezham/icons-vue

Usage

Basic

<script setup>
import { Home, ShieldCheck, AltArrowDown } from '@vezham/icons-vue';
</script>

<template>
  <div>
    <Home />
    <ShieldCheck :size="32" color="#d97757" />
    <AltArrowDown weight="filled" />
  </div>
</template>

Weights

Every icon ships in four weights — outline, filled, duotone-outline, and duotone-filled:

<Home />                     <!-- outline (default) -->
<Home weight="filled" />     <!-- filled -->
<Home weight="duotone-outline" />
<Home weight="duotone-filled" />

Sizing & coloring

<Home :size="32" />                    <!-- 32×32px -->
<Home :size="48" color="#d97757" />    <!-- Custom size and color -->
<Home color="currentColor" />          <!-- Inherits parent text color -->

Direct icon import (smallest bundle)

For the absolute minimum bundle size, import icons directly from the sub-path:

import Home from '@vezham/icons-vue/icons/Home';
import ShieldCheck from '@vezham/icons-vue/icons/ShieldCheck';

All SVG attributes are supported

Pass any standard SVG attribute — class, style, onClick, aria-*, etc.:

<Home
  :size="48"
  color="red"
  class="my-icon"
  :style="{ marginRight: 8 }"
  @click="console.log('clicked')"
  aria-label="Home"
/>

Props

Any valid SVG attribute (e.g. id, aria-*) is forwarded to the underlying <svg> element.

Tree-shaking

Every icon is a standalone ES module. Modern bundlers — Vite, Webpack, Rollup, esbuild — automatically tree-shake unused icons, keeping only what you import.

// ✅ Only Home is included in your production bundle
import { Home } from '@vezham/icons-vue';

// ✅ Even smaller — direct path import skips the barrel file entirely
import Home from '@vezham/icons-vue/icons/Home';

The package is marked "sideEffects": false for optimal dead-code elimination.

Icon Names

Icons use PascalCase, derived from their original kebab-case file names:

Browse and search all 1273+ icons at vezham.com.

TypeScript

Full type declarations ship with the package — no separate @types/ installation needed.

import { Home, type IconProps, type IconWeight } from '@vezham/icons-vue';

const weight: IconWeight = 'filled';
const props: IconProps = { size: 32, color: '#d97757', weight };

Exported types

Features

• 1273+ icons — Handcrafted, pixel-perfect SVGs across a wide range of categories
• Four weights — outline, filled, duotone-outline, and duotone-filled, with consistent 24×24 grid alignment
• Tree-shakeable — Import only what you use; every icon is a standalone ES module
• Zero dependencies — No runtime overhead beyond Vue itself
• TypeScript-ready — Full type declarations included, no extra packages needed
• SVG attribute passthrough — All standard SVG props (class, style, aria-*, etc.) are forwarded
• MIT licensed — Free for personal and commercial use

Related packages

Links

• 🌐   Website: vezham.com
• 📖   Documentation: vezham.com/docs
• 📦   npm: npmjs.com/package/@vezham/icons-vue
• 🐙   GitHub: github.com/vezham/reicon
• 🐛   Issues: github.com/vezham/reicon/issues

License

MIT © Dev Chauhan

Free to use in personal and commercial projects. Attribution is appreciated but not required.