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 Khushmeen Sidhu.
- 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)
npm install react-doodle-icons
# or
yarn add react-doodle-icons
# or
pnpm add react-doodle-iconsFor 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>
)
}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>
)
}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 |
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 }} />ArrowCircleUp, ArrowCircleDown, ArrowLeft, ArrowRight, ChevronsUp, ChevronsDown, etc.
Dollar, Euro, Pound, Yen, Won, Ruble, Rupee, Franc
ShoppingCart, Bag, Basket, Box, Card, Tag, Sale, QrCode, Truck, Warehouse, etc.
HappyEmoji, SmilingEmoji, LaughEmoji, SurprisedEmoji, WinkEmoji, SadEmoji, etc.
FileText, FilePdf, FileImage, FileCode, FileCsv, FileSvg, FileZip, etc.
Bank, Wallet, PiggyBank, Cash, Coin, TrendUp, TrendDown, Saving, etc.
Burger, Pizza, Cake, Candy, CoffeeCup, IceCream, Drink, Water, etc.
Male, Female, Transgender, NonBinaryTransgender, Bisexual, Gay, Lesbian, etc.
ThumbsUp, ThumbsDown, PointUp, PointDown, Clap, Wave, Ok, Peace, etc.
HeartBeat, FirstAid, Pills, Syringe, Stethoscope, Microscope, etc.
Search, Menu, Settings, User, Home, Bell, Bookmark, Calendar, Clock, etc.
Apple, Google, Facebook, Twitter, Instagram, LinkedIn, GitHub, etc.
Bot, Rocket, Car, Plane, Ship, Fire, Bug, Satellite, etc.
Camera, Crown, Guitar, Tv, Sofa, Frame, PaintBrush, Vector, etc.
Sunny, Cloudy, Rain, Snow, Thunderstorm, Wind, Snowman, etc.
# Clone the repository
git clone https://github.com/yourusername/doodle-icons.git
cd doodle-icons
# Install dependencies
npm install# Generate icons from SVG files
npm run generate
# Build the package
npm run build
# Watch mode for development
npm run dev- Add your SVG files to the source directory
- Run
npm run generateto create React components - Run
npm run buildto rebuild the package
| Browser | Version |
|---|---|
| Chrome | Latest |
| Firefox | Latest |
| Safari | Latest |
| Edge | Latest |
| IE | 11+ |
- 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
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
All icons are implemented as SVG elements with proper ARIA attributes support:
<ChipIcon
role="img"
aria-label="Computer chip"
aria-hidden={false}
/>Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License - feel free to use these icons in your personal and commercial projects.
Icon Design: Original doodle-style SVG icons designed by Khushmeen Sidhu
React Library: React component implementation and packaging by Mike Acler
| 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 |
- All icons list:
icons.json - Search index:
search-index.json - Changelog:
CHANGELOG.md
React library made by Mike Acler | Icons designed by Khushmeen Sidhu