Vezham is the core vanilla JavaScript package for Vezham — a free, open-source SVG icon library featuring 1273+ handcrafted, grid-aligned icons. Use it directly as ES modules, or load via CDN with zero build step. Every icon is tree-shakeable, fully TypeScript-ready, and ships with no dependencies.

| 🔗   Resource | Link | |---|---| | 🌐   Website & icon browser | vezham.com | | 📖   Documentation | vezham.com/docs | | ⚛️   React package | @vezham/icons-react | | 🎨   Figma plugin | vezham.com/docs/figma |

Install

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

CDN (no build step required)

<script src="https://cdn.jsdelivr.net/npm/@vezham/icons@latest/dist/cdn/vezham-icons.js"></script>

No bundler, no framework — just a <script> tag.

Usage

Vanilla JS — create SVG elements

import { Home, ShieldCheck, AltArrowDown } from '@vezham/icons';

document.body.appendChild(Home());
document.body.appendChild(ShieldCheck({ size: 32, color: '#d97757' }));
document.body.appendChild(AltArrowDown({ weight: 'filled' }));

Get SVG as a string

import { Home } from '@vezham/icons';

const svgString = Home.toSvg({ size: 32, color: 'red' });
element.innerHTML = svgString;

Weights

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

import { Home } from '@vezham/icons';

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: 'red' })  // Custom size and color
Home({ color: 'currentColor' })   // Inherits parent text color

CDN / Script tag

<script src="https://cdn.jsdelivr.net/npm/@vezham/icons@latest/dist/cdn/vezham-icons.js"></script>
<script>
  document.body.appendChild(VezhamIcons.Home());
  document.body.appendChild(VezhamIcons.ShieldCheck({ size: 32, color: '#d97757' }));
</script>

Direct SVG CDN

<img src="https://cdn.jsdelivr.net/npm/@vezham/icons@latest/dist/cdn/icons/home.svg" alt="Home" />
<img src="https://cdn.jsdelivr.net/npm/@vezham/icons@latest/dist/cdn/icons/home-filled.svg" alt="Home" />
<img src="https://cdn.jsdelivr.net/npm/@vezham/icons@latest/dist/cdn/icons/home-duotone-outline.svg" alt="Home" />
<img src="https://cdn.jsdelivr.net/npm/@vezham/icons@latest/dist/cdn/icons/home-duotone-filled.svg" alt="Home" />

Use /dist/cdn/icons/{name}.svg for the default outline SVG, /dist/cdn/icons/{name}-filled.svg for filled, /dist/cdn/icons/{name}-duotone-outline.svg, or /dist/cdn/icons/{name}-duotone-filled.svg. Every direct SVG uses a flat kebab-case filename under /dist/cdn/icons.

Direct icon import (smallest bundle)

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

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | size | number | string | 24 | Icon width & height (number = px) | | color | string | — | Primary icon stroke/fill color. Leave unset to use CSS. | | weight | 'outline' | 'filled' | 'duotone-outline' | 'duotone-filled' | 'outline' | Icon style variant | | strokeWidth | number | string | — | Override the default stroke width | | className | string | — | Additional CSS class on the <svg> element | | attrs | object | — | Any additional SVG attributes |

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';

// ✅ Even smaller — direct path import skips the barrel file entirely
import Home from '@vezham/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:

| Original name | PascalCase import | |---------------|-------------------| | home | Home | | shield-check | ShieldCheck | | alt-arrow-down | AltArrowDown | | shopping-cart | ShoppingCart | | user-circle | UserCircle |

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

TypeScript

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

import { Home, IconOptions, IconWeight } from '@vezham/icons';

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

const svg: SVGSVGElement = Home(options);
document.body.appendChild(svg);

Exported types

| Type | Description | |------|-------------| | IconOptions | Options for creating an SVG element | | IconWeight | 'outline' | 'filled' | 'duotone-outline' | 'duotone-filled' |

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 whatsoever
• TypeScript-ready — Full type declarations included, no extra packages needed
• CDN ready — Drop a <script> tag and start using icons immediately
• toSvg() helper — Get raw SVG markup for any framework or template
• MIT licensed — Free for personal and commercial use

Related packages

| Package | Description | |---------|-------------| | vezham | This package. Core vanilla JS + CDN runtime. No framework required. | | @vezham/icons-react | React components for 1273+ icons. | | @vezham/icons-vue | Vue 3 components for 1273+ icons. | | @vezham/icons-svelte | Svelte components for 1273+ icons. |

Links

• 🌐   Website: vezham.com
• 📖   Documentation: vezham.com/docs
• 📦   npm: npmjs.com/package/@vezham/icons
• 🐙   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.