Doodle Icons for React

React components for doodle-style icons, optimized for modern apps (ESM, TypeScript, tree-shakable).

A beautiful collection of 439 hand-drawn doodle-style SVG icons as React components. Perfect for adding a playful, sketch-like aesthetic to your web applications. Based on Doodle Icons by by Khushmeen Sidhu.

Features

• 439 unique hand-drawn icons
• Fully customizable size and color
• TypeScript support out of the box
• Tree-shakeable for optimal bundle size (~200 bytes per icon)
• React 18+ support (forward-compatible with React 19)
• No external dependencies
• Optimized for modern bundlers (Vite, Webpack, Rollup, esbuild)

Installation

npm install react-doodle-icons
# or
yarn add react-doodle-icons
# or
pnpm add react-doodle-icons

Quick Start

Option 1: Import Individual Icons (Recommended for Tree-Shaking)

For the smallest bundle size, import only the icons you need:

import { ChipIcon } from 'react-doodle-icons/icons/ChipIcon'
import { RocketIcon } from 'react-doodle-icons/icons/RocketIcon'
import { HeartIcon } from 'react-doodle-icons/icons/HeartIcon'

function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <ChipIcon />
      <RocketIcon size={48} color="#ff6b6b" />
      <HeartIcon size={32} className="animate-pulse" />
    </div>
  )
}

Option 2: Import from Main Entry

You can also import multiple icons from the main package (modern bundlers will tree-shake unused icons):

import { ChipIcon, RocketIcon, HeartIcon } from 'react-doodle-icons'

function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <ChipIcon />
      <RocketIcon size={48} color="#ff6b6b" />
      <HeartIcon size={32} className="animate-pulse" />
    </div>
  )
}

API

Props

All icon components accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | string | 24 | Icon size in pixels | | color | string | "currentColor" | Icon fill color | | className | string | - | CSS class name | | style | React.CSSProperties | - | Inline styles | | ...rest | SVGProps<SVGSVGElement> | - | All standard SVG attributes |

Examples

Basic Usage:

<ChipIcon />

Custom Size:

<ChipIcon size={64} />

Custom Color:

<ChipIcon color="#3b82f6" />
// or with Tailwind
<ChipIcon className="text-blue-500" />

With Click Handler:

<ChipIcon 
  size={48} 
  color="green" 
  onClick={() => console.log('Clicked!')}
  style={{ cursor: 'pointer' }}
/>

Responsive Size:

<ChipIcon size={{ xs: 24, md: 48, lg: 64 }} />

Icon Categories

Arrows (26 icons)

ArrowCircleUp, ArrowCircleDown, ArrowLeft, ArrowRight, ChevronsUp, ChevronsDown, etc.

Currency (8 icons)

Dollar, Euro, Pound, Yen, Won, Ruble, Rupee, Franc

E-commerce (25 icons)

ShoppingCart, Bag, Basket, Box, Card, Tag, Sale, QrCode, Truck, Warehouse, etc.

Emojis (13 icons)

HappyEmoji, SmilingEmoji, LaughEmoji, SurprisedEmoji, WinkEmoji, SadEmoji, etc.

Files (17 icons)

FileText, FilePdf, FileImage, FileCode, FileCsv, FileSvg, FileZip, etc.

Finance (13 icons)

Bank, Wallet, PiggyBank, Cash, Coin, TrendUp, TrendDown, Saving, etc.

Food & Drink (15 icons)

Burger, Pizza, Cake, Candy, CoffeeCup, IceCream, Drink, Water, etc.

Gender Symbols (13 icons)

Male, Female, Transgender, NonBinaryTransgender, Bisexual, Gay, Lesbian, etc.

Hand Gestures (48 icons)

ThumbsUp, ThumbsDown, PointUp, PointDown, Clap, Wave, Ok, Peace, etc.

Health & Medical (17 icons)

HeartBeat, FirstAid, Pills, Syringe, Stethoscope, Microscope, etc.

Interface (100+ icons)

Search, Menu, Settings, User, Home, Bell, Bookmark, Calendar, Clock, etc.

Brand Logos (27 icons)

Apple, Google, Facebook, Twitter, Instagram, LinkedIn, GitHub, etc.

Miscellaneous (13 icons)

Bot, Rocket, Car, Plane, Ship, Fire, Bug, Satellite, etc.

Objects (17 icons)

Camera, Crown, Guitar, Tv, Sofa, Frame, PaintBrush, Vector, etc.

Weather (12 icons)

Sunny, Cloudy, Rain, Snow, Thunderstorm, Wind, Snowman, etc.

Development

Setup

# Clone the repository
git clone https://github.com/yourusername/doodle-icons.git
cd doodle-icons

# Install dependencies
npm install

Available Scripts

# Generate icons from SVG files
npm run generate

# Build the package
npm run build

# Watch mode for development
npm run dev

Adding New Icons

1. Add your SVG files to the source directory
2. Run npm run generate to create React components
3. Run npm run build to rebuild the package

Browser Support

| Browser | Version | |---------|---------| | Chrome | Latest | | Firefox | Latest | | Safari | Latest | | Edge | Latest | | IE | 11+ |

Performance

• Optimized bundle size: Individual icons are ~100-200 bytes each
• Full tree-shaking support: Only include the icons you actually use
• No runtime dependencies
• Pure functional components with React.forwardRef for optimal performance
• Side-effect free: Per-icon imports are marked as side-effect-free for maximum tree-shaking efficiency

Bundle Size Optimization

When using per-icon imports (import { Icon } from 'doodle-icons/icons/Icon'), your bundler will only include the specific icons you import, keeping your bundle size minimal.

Example bundle sizes:

• Single icon: ~200 bytes
• 10 icons: ~2KB
• All 439 icons: ~800KB (unminified)

Why so small?

• Icons are split into individual files
• No shared runtime or utility code
• SVG paths are optimized and minified
• Modern bundlers can eliminate unused exports

Accessibility

All icons are implemented as SVG elements with proper ARIA attributes support:

<ChipIcon 
  role="img" 
  aria-label="Computer chip" 
  aria-hidden={false}
/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - feel free to use these icons in your personal and commercial projects.

Acknowledgments

Icon Design: Original doodle-style SVG icons designed by Khushmeen Sidhu

React Library: React component implementation and packaging by Mike Acler

Package Information

| Property | Value | |----------|-------| | Package Name | react-doodle-icons | | Version | 1.0.0 | | Total Icons | 439 | | Categories | arrows, gestures, emoji, ecommerce, currency, finance, files, food, health, interface, communication, brands, gender, weather, objects, nature, miscellaneous | | React Version | >=18 | | TypeScript | Yes, full support | | Tree-shakable | Yes, side-effect free per-icon imports | | Bundle Size | ~200 bytes per icon (minified) | | License | MIT | | Repository | github.com/agilek/react-doodle-icons | | npm | npmjs.com/package/react-doodle-icons | | Icon Designer | Khushmeen Sidhu | | React Implementation | Mike Acler |

Quick Reference

• All icons list: icons.json
• Search index: search-index.json
• Changelog: CHANGELOG.md

React library made by Mike Acler | Icons designed by Khushmeen Sidhu