Freehand Icons (React)

Hand-drawn Streamline Freehand React icon library with TypeScript, full tree-shaking support, accessibility features, and customizable sizes and colors.

Features

• 🎨 1,000 hand-drawn SVG icons with reinforced stroke geometry.
• ⚡ Tree-shaking ready: only the icons you import will be bundled.
• 📦 Dual ESM & CommonJS support: works across Vite, Next.js, Remix, Astro, Webpack, etc.
• 🛠️ TypeScript strict: includes complete .d.ts type definitions and ref forwarding.
• 💅 Easy styling: native className, Tailwind CSS support, plus size and color props.

Installation

npm install @nanonoir/freehand-icons
# or
pnpm add @nanonoir/freehand-icons
# or
yarn add @nanonoir/freehand-icons

Usage

Basic Example

import { AlertAlarmBell, SearchMagnifier, ShoppingCartTrolleyFull } from '@nanonoir/freehand-icons';

export function Example() {
  return (
    <div>
      {/* Default (24x24, currentColor) */}
      <AlertAlarmBell />

      {/* Custom size and color */}
      <SearchMagnifier size={32} color="#3b82f6" />

      {/* Tailwind CSS classes */}
      <ShoppingCartTrolleyFull className="h-6 w-6 text-emerald-500 hover:text-emerald-600 transition-colors" />
    </div>
  );
}

Component Props

Every icon accepts standard SVG attributes plus custom helpers:

| Prop | Type | Default | Description | |---|---|---|---| | size | number \| string | 24 | Sets width and height simultaneously. | | color | string | 'currentColor' | Sets the fill and stroke color. | | className | string | undefined | CSS class name for custom styling. | | ref | React.Ref<SVGSVGElement> | undefined | Forwarded SVG DOM element ref. | | ...props | React.SVGProps<SVGSVGElement> | — | Native SVG attributes (onClick, aria-label, etc.). |

Build Pipeline Scripts

If you clone the repository and want to regenerate the library:

# 1. Export bold SVG assets from Iconify
npm run icons:export

# 2. Generate React TSX components and src/index.ts
npm run icons:generate

# 3. Build ESM, CJS, and TypeScript types
npm run build

# Or run the complete pipeline in one go
npm run icons:pipeline