Vezham React is the official React 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.

| 🔗   Resource | Link | |---|---| | 🌐   Website & icon browser | vezham.com | | 📖   Documentation | vezham.com/docs | | 📦   Core package (vanilla JS) | vezham | | 🎨   Figma plugin | vezham.com/docs/figma |

Install

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

• React ≥ 16.8 (Hooks-compatible)
• No other dependencies required.

Usage

Basic

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

function App() {
  return (
    <div>
      <Home />
      <ShieldCheck size={32} color="#d97757" />
      <AltArrowDown weight="filled" />
    </div>
  );
}

Weights

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

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

<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-react/icons/Home';
import ShieldCheck from '@vezham/icons-react/icons/ShieldCheck';

All SVG attributes are supported

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

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

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | string | 24 | Icon width & height (number = px) | | color | string | — | Primary icon stroke/fill color. Leave unset to use CSS class. | | secondaryColor | string | same as color | Secondary (accent) fill color | | 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 element |

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

Tree-shaking

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

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

// ✅ Even smaller — direct path import skips the barrel file entirely
import Home from '@vezham/icons-react/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 | | arrow-right-up | ArrowRightUp |

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

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

<Home {...props} />

Exported types

| Type | Description | |------|-------------| | IconProps | Combined icon props + React SVG attributes | | IconWeight | 'outline' | 'filled' | 'duotone-outline' | 'duotone-filled' | | IconComponent | Signature of any icon component |

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 React itself
• TypeScript-ready — Full type declarations included, no extra packages needed
• SVG attribute passthrough — All standard SVG props (style, onClick, aria-*, etc.) are forwarded
• MIT licensed — Free for personal and commercial use

Related packages

| Package | Description | |---------|-------------| | vezham | Core vanilla JS + CDN runtime. No framework required. | | @vezham/icons-react | You are here. 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-react
• 🐙   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.