0
# React Feather
1

2
React Feather is a React component library providing 287 individual SVG icon components based on Feather Icons v4.29.0. Each icon is designed on a 24x24 grid with emphasis on simplicity, consistency, and readability, offering customizable color and size properties.
3

4
## Package Information
5

6
- **Package Name**: react-feather
7
- **Package Type**: npm
8
- **Language**: JavaScript with TypeScript definitions
9
- **Installation**: `npm install react-feather` or `yarn add react-feather`
10

11
## Core Imports
12

13
```javascript
14
import { Camera, Heart, Search } from "react-feather";
15
```
16

17
For TypeScript:
18

19
```typescript
20
import { Camera, Heart, Search, IconProps } from "react-feather";
21
```
22

23
Wildcard import:
24

25
```javascript
26
import * as Icon from "react-feather";
27
// Usage: <Icon.Camera />
28
```
29

30
Individual component imports:
31

32
```javascript
33
import Camera from "react-feather/dist/icons/camera";
34
```
35

36
CommonJS:
37

38
```javascript
39
const { Camera, Heart, Search } = require("react-feather");
40
// Or individual: const Camera = require("react-feather/dist/icons/camera").default;
41
```
42

43
## Basic Usage
44

45
```jsx
46
import React from "react";
47
import { Camera, Heart, Search, Settings } from "react-feather";
48

49
function App() {
50
  return (
51
    <div>
52
      {/* Basic usage with default props */}
53
      <Camera />
54
      
55
      {/* Customized size and color */}
56
      <Heart color="red" size={48} />
57
      
58
      {/* Using with additional SVG attributes */}
59
      <Search 
60
        color="#007bff" 
61
        size={24} 
62
        strokeWidth={3}
63
        className="search-icon"
64
        onClick={() => console.log("Search clicked")}
65
      />
66
      
67
      {/* Using wildcard import */}
68
      <Icon.Settings size="2em" color="currentColor" />
69
    </div>
70
  );
71
}
72
```
73

74
## Architecture
75

76
React Feather follows a consistent architecture pattern:
77

78
- **Component Pattern**: All icons are React functional components created with `forwardRef` for ref forwarding
79
- **Props Interface**: Unified `IconProps` interface extending `SVGAttributes<SVGElement>`
80
- **Default Values**: Consistent defaults (`color: "currentColor"`, `size: 24`)
81
- **Type Safety**: Full TypeScript support with proper type definitions
82
- **Tree Shaking**: Individual component imports support tree shaking
83
- **PropTypes**: Runtime validation for JavaScript usage
84

85
## Capabilities
86

87
### Icon Components
88

89
React Feather provides 287 icon components, each following the same API pattern. All icons accept the same props and behave consistently.
90

91
```typescript { .api }
92
interface IconProps extends SVGAttributes<SVGElement> {
93
  /** Icon color, defaults to 'currentColor' */
94
  color?: string;
95
  /** Icon size (width and height), defaults to 24 */
96
  size?: string | number;
97
}
98

99
type Icon = React.FC<IconProps>;
100
```
101

102
#### Complete Icon List
103

104
All 287 available icon components:
105

106
```typescript { .api }
107
// Activity & Status Icons
108
export const Activity: Icon;
109
export const AlertCircle: Icon;
110
export const AlertOctagon: Icon;
111
export const AlertTriangle: Icon;
112
export const Award: Icon;
113
export const Bell: Icon;
114
export const BellOff: Icon;
115
export const CheckCircle: Icon;
116
export const CheckSquare: Icon;
117
export const Check: Icon;
118
export const Clock: Icon;
119
export const HelpCircle: Icon;
120
export const Info: Icon;
121
export const Loader: Icon;
122
export const MinusCircle: Icon;
123
export const MinusSquare: Icon;
124
export const Minus: Icon;
125
export const PlusCircle: Icon;
126
export const PlusSquare: Icon;
127
export const Plus: Icon;
128
export const Power: Icon;
129
export const RefreshCcw: Icon;
130
export const RefreshCw: Icon;
131
export const RotateCcw: Icon;
132
export const RotateCw: Icon;
133
export const Shield: Icon;
134
export const ShieldOff: Icon;
135
export const StopCircle: Icon;
136
export const XCircle: Icon;
137
export const XOctagon: Icon;
138
export const XSquare: Icon;
139
export const X: Icon;
140
export const Zap: Icon;
141
export const ZapOff: Icon;
142

143
// Navigation & Direction Icons
144
export const ArrowDown: Icon;
145
export const ArrowDownCircle: Icon;
146
export const ArrowDownLeft: Icon;
147
export const ArrowDownRight: Icon;
148
export const ArrowLeft: Icon;
149
export const ArrowLeftCircle: Icon;
150
export const ArrowRight: Icon;
151
export const ArrowRightCircle: Icon;
152
export const ArrowUp: Icon;
153
export const ArrowUpCircle: Icon;
154
export const ArrowUpLeft: Icon;
155
export const ArrowUpRight: Icon;
156
export const ChevronDown: Icon;
157
export const ChevronLeft: Icon;
158
export const ChevronRight: Icon;
159
export const ChevronUp: Icon;
160
export const ChevronsDown: Icon;
161
export const ChevronsLeft: Icon;
162
export const ChevronsRight: Icon;
163
export const ChevronsUp: Icon;
164
export const CornerDownLeft: Icon;
165
export const CornerDownRight: Icon;
166
export const CornerLeftDown: Icon;
167
export const CornerLeftUp: Icon;
168
export const CornerRightDown: Icon;
169
export const CornerRightUp: Icon;
170
export const CornerUpLeft: Icon;
171
export const CornerUpRight: Icon;
172
export const ExternalLink: Icon;
173
export const Link: Icon;
174
export const Link2: Icon;
175
export const MousePointer: Icon;
176
export const Move: Icon;
177
export const Navigation: Icon;
178
export const Navigation2: Icon;
179

180
// Media & Playback Icons
181
export const FastForward: Icon;
182
export const Film: Icon;
183
export const Music: Icon;
184
export const Pause: Icon;
185
export const PauseCircle: Icon;
186
export const Play: Icon;
187
export const PlayCircle: Icon;
188
export const Radio: Icon;
189
export const Repeat: Icon;
190
export const Rewind: Icon;
191
export const Shuffle: Icon;
192
export const SkipBack: Icon;
193
export const SkipForward: Icon;
194
export const Speaker: Icon;
195
export const Volume: Icon;
196
export const Volume1: Icon;
197
export const Volume2: Icon;
198
export const VolumeX: Icon;
199

200
// Communication Icons
201
export const AtSign: Icon;
202
export const Mail: Icon;
203
export const MessageCircle: Icon;
204
export const MessageSquare: Icon;
205
export const Mic: Icon;
206
export const MicOff: Icon;
207
export const Phone: Icon;
208
export const PhoneCall: Icon;
209
export const PhoneForwarded: Icon;
210
export const PhoneIncoming: Icon;
211
export const PhoneMissed: Icon;
212
export const PhoneOff: Icon;
213
export const PhoneOutgoing: Icon;
214
export const Send: Icon;
215
export const Voicemail: Icon;
216

217
// File & Document Icons
218
export const Archive: Icon;
219
export const Book: Icon;
220
export const BookOpen: Icon;
221
export const Bookmark: Icon;
222
export const Clipboard: Icon;
223
export const Copy: Icon;
224
export const File: Icon;
225
export const FileMinus: Icon;
226
export const FilePlus: Icon;
227
export const FileText: Icon;
228
export const Folder: Icon;
229
export const FolderMinus: Icon;
230
export const FolderPlus: Icon;
231
export const Paperclip: Icon;
232
export const Save: Icon;
233

234
// Editing & Text Icons
235
export const Bold: Icon;
236
export const Code: Icon;
237
export const Edit: Icon;
238
export const Edit2: Icon;
239
export const Edit3: Icon;
240
export const Italic: Icon;
241
export const PenTool: Icon;
242
export const Scissors: Icon;
243
export const Type: Icon;
244
export const Underline: Icon;
245

246
// Layout & Design Icons
247
export const AlignCenter: Icon;
248
export const AlignJustify: Icon;
249
export const AlignLeft: Icon;
250
export const AlignRight: Icon;
251
export const Columns: Icon;
252
export const Grid: Icon;
253
export const Hash: Icon;
254
export const Layout: Icon;
255
export const List: Icon;
256
export const Menu: Icon;
257
export const MoreHorizontal: Icon;
258
export const MoreVertical: Icon;
259
export const Sidebar: Icon;
260
export const Sliders: Icon;
261
export const Table: Icon;
262

263
// Technology & Devices Icons
264
export const Airplay: Icon;
265
export const Battery: Icon;
266
export const BatteryCharging: Icon;
267
export const Bluetooth: Icon;
268
export const Camera: Icon;
269
export const CameraOff: Icon;
270
export const Cast: Icon;
271
export const Chrome: Icon;
272
export const Command: Icon;
273
export const Cpu: Icon;
274
export const Database: Icon;
275
export const Disc: Icon;
276
export const HardDrive: Icon;
277
export const Headphones: Icon;
278
export const Monitor: Icon;
279
export const Printer: Icon;
280
export const Server: Icon;
281
export const Smartphone: Icon;
282
export const Tablet: Icon;
283
export const Terminal: Icon;
284
export const Tv: Icon;
285
export const Watch: Icon;
286
export const Wifi: Icon;
287
export const WifiOff: Icon;
288

289
// Business & Finance Icons
290
export const Briefcase: Icon;
291
export const CreditCard: Icon;
292
export const DollarSign: Icon;
293
export const Package: Icon;
294
export const ShoppingBag: Icon;
295
export const ShoppingCart: Icon;
296
export const Tag: Icon;
297
export const Truck: Icon;
298

299
// Social & Brand Icons
300
export const Codepen: Icon;
301
export const Codesandbox: Icon;
302
export const Dribbble: Icon;
303
export const Facebook: Icon;
304
export const Figma: Icon;
305
export const Framer: Icon;
306
export const GitHub: Icon;
307
export const Gitlab: Icon;
308
export const Instagram: Icon;
309
export const Linkedin: Icon;
310
export const Pocket: Icon;
311
export const Rss: Icon;
312
export const Slack: Icon;
313
export const Trello: Icon;
314
export const Twitch: Icon;
315
export const Twitter: Icon;
316
export const Youtube: Icon;
317

318
// Tools & Objects Icons
319
export const Anchor: Icon;
320
export const Aperture: Icon;
321
export const Box: Icon;
322
export const Calendar: Icon;
323
export const Coffee: Icon;
324
export const Compass: Icon;
325
export const Crop: Icon;
326
export const Crosshair: Icon;
327
export const Delete: Icon;
328
export const Feather: Icon;
329
export const Filter: Icon;
330
export const Flag: Icon;
331
export const Gift: Icon;
332
export const Key: Icon;
333
export const Layers: Icon;
334
export const LifeBuoy: Icon;
335
export const Lock: Icon;
336
export const Search: Icon;
337
export const Settings: Icon;
338
export const Tool: Icon;
339
export const Trash: Icon;
340
export const Trash2: Icon;
341
export const Umbrella: Icon;
342
export const Unlock: Icon;
343

344
// Weather & Nature Icons
345
export const Cloud: Icon;
346
export const CloudDrizzle: Icon;
347
export const CloudLightning: Icon;
348
export const CloudOff: Icon;
349
export const CloudRain: Icon;
350
export const CloudSnow: Icon;
351
export const Droplet: Icon;
352
export const Moon: Icon; 
353
export const Sun: Icon;
354
export const Sunrise: Icon;
355
export const Sunset: Icon;
356
export const Thermometer: Icon;
357
export const Wind: Icon;
358

359
// Charts & Data Icons
360
export const BarChart: Icon;
361
export const BarChart2: Icon;
362
export const PieChart: Icon;
363
export const TrendingDown: Icon;
364
export const TrendingUp: Icon;
365

366
// User & People Icons
367
export const User: Icon;
368
export const UserCheck: Icon;
369
export const UserMinus: Icon;
370
export const UserPlus: Icon;
371
export const Users: Icon;
372
export const UserX: Icon;
373

374
// Emotions & Expressions Icons
375
export const Frown: Icon;
376
export const Heart: Icon;
377
export const Meh: Icon;
378
export const Smile: Icon;
379
export const ThumbsDown: Icon;
380
export const ThumbsUp: Icon;
381

382
// Geographic & Location Icons
383
export const Globe: Icon;
384
export const Home: Icon;
385
export const Map: Icon;
386
export const MapPin: Icon;
387
export const Target: Icon;
388

389
// Math & Symbols Icons
390
export const Circle: Icon;
391
export const Divide: Icon;
392
export const DivideCircle: Icon;
393
export const DivideSquare: Icon;
394
export const Hexagon: Icon;
395
export const Octagon: Icon;
396
export const Percent: Icon;
397
export const Square: Icon;
398
export const Star: Icon;
399
export const Triangle: Icon;
400

401
// Actions & Controls Icons
402
export const Download: Icon;
403
export const DownloadCloud: Icon;
404
export const Eye: Icon;
405
export const EyeOff: Icon;
406
export const Image: Icon;
407
export const Inbox: Icon;
408
export const LogIn: Icon;
409
export const LogOut: Icon;
410
export const Maximize: Icon;
411
export const Maximize2: Icon;
412
export const Minimize: Icon;
413
export const Minimize2: Icon;
414
export const Share: Icon;
415
export const Share2: Icon;
416
export const Slash: Icon;
417
export const ToggleLeft: Icon;
418
export const ToggleRight: Icon;
419
export const Upload: Icon;
420
export const UploadCloud: Icon;
421
export const Video: Icon;
422
export const VideoOff: Icon;
423
export const ZoomIn: Icon;
424
export const ZoomOut: Icon;
425

426
// Git & Version Control Icons
427
export const GitBranch: Icon;
428
export const GitCommit: Icon;
429
export const GitMerge: Icon;
430
export const GitPullRequest: Icon;
431
```
432

433
### Component Properties
434

435
Each icon component accepts these properties:
436

437
```typescript { .api }
438
interface IconProps extends SVGAttributes<SVGElement> {
439
  /** 
440
   * Icon stroke color
441
   * @default "currentColor" 
442
   */
443
  color?: string;
444
  
445
  /** 
446
   * Icon size for both width and height
447
   * @default 24 
448
   */
449
  size?: string | number;
450
  
451
  // All standard SVG attributes are also supported:
452
  className?: string;
453
  style?: React.CSSProperties;
454
  onClick?: (event: React.MouseEvent<SVGElement>) => void;
455
  strokeWidth?: string | number;
456
  fill?: string;
457
  // ... and all other SVGAttributes<SVGElement>
458
}
459
```
460

461
### Usage Patterns
462

463
**Basic Icon Usage:**
464

465
```jsx
466
import { Camera, Settings, User } from "react-feather";
467

468
function Navigation() {
469
  return (
470
    <nav>
471
      <Camera />
472
      <Settings />
473
      <User />
474
    </nav>
475
  );
476
}
477
```
478

479
**Customizing Icons:**
480

481
```jsx
482
import { Heart, Search, AlertCircle } from "react-feather";
483

484
function CustomIcons() {
485
  return (
486
    <div>
487
      {/* Custom color and size */}
488
      <Heart color="#ff6b6b" size={32} />
489
      
490
      {/* Using CSS units for size */}
491
      <Search size="1.5rem" color="var(--primary-color)" />
492
      
493
      {/* Additional SVG attributes */}
494
      <AlertCircle 
495
        size={24}
496
        color="orange"
497
        strokeWidth={3}
498
        className="warning-icon"
499
        aria-label="Warning"
500
      />
501
    </div>
502
  );
503
}
504
```
505

506
**Ref Forwarding:**
507

508
```jsx
509
import React, { useRef } from "react";
510
import { Download } from "react-feather";
511

512
function RefExample() {
513
  const iconRef = useRef<SVGSVGElement>(null);
514
  
515
  const handleClick = () => {
516
    if (iconRef.current) {
517
      iconRef.current.style.transform = "rotate(180deg)";
518
    }
519
  };
520
  
521
  return (
522
    <Download 
523
      ref={iconRef}
524
      size={24}
525
      onClick={handleClick}
526
    />
527
  );
528
}
529
```
530

531
**Wildcard Import Pattern:**
532

533
```jsx
534
import * as Icons from "react-feather";
535

536
const iconMap = {
537
  camera: Icons.Camera,
538
  heart: Icons.Heart,
539
  search: Icons.Search,
540
};
541

542
function DynamicIcon({ name, ...props }) {
543
  const IconComponent = iconMap[name];
544
  return IconComponent ? <IconComponent {...props} /> : null;
545
}
546
```
547

548
### TypeScript Integration
549

550
React Feather provides complete TypeScript support:
551

552
```typescript { .api }
553
import { FC, SVGAttributes } from 'react';
554

555
interface IconProps extends SVGAttributes<SVGElement> {
556
  color?: string;
557
  size?: string | number;
558
}
559

560
type Icon = FC<IconProps>;
561
```
562

563
**TypeScript Usage Examples:**
564

565
```typescript
566
import React from "react";
567
import { Camera, IconProps } from "react-feather";
568

569
// Using IconProps interface
570
const CustomIcon: React.FC<IconProps> = (props) => {
571
  return <Camera {...props} />;
572
};
573

574
// Type-safe event handling
575
const handleIconClick = (event: React.MouseEvent<SVGElement>) => {
576
  console.log("Icon clicked:", event.currentTarget);
577
};
578

579
function TypeSafeComponent() {
580
  return (
581
    <Camera 
582
      size={24}
583
      color="blue"
584
      onClick={handleIconClick}
585
    />
586
  );
587
}
588
```
589

590
### Error Handling
591

592
React Feather components are designed to be robust:
593

594
- **Invalid props**: Invalid values for `size` or `color` will fall back to defaults
595
- **Missing imports**: Importing non-existent icons will result in build-time errors with TypeScript
596
- **Runtime validation**: PropTypes provide runtime validation in development mode
597

598
### Performance Considerations
599

600
- **Tree Shaking**: Use named imports to enable tree shaking and reduce bundle size
601
- **Individual Imports**: Import specific icons to minimize bundle size
602
- **SVG Rendering**: Icons are rendered as inline SVG elements for optimal performance
603
- **No External Dependencies**: Only requires React and prop-types (for validation)
604

605
### Browser Compatibility
606

607
React Feather icons work in all modern browsers that support:
608
- SVG rendering
609
- React 16.8.6 or higher
610
- ES5+ JavaScript features
611

612
The library has no additional polyfill requirements and works with server-side rendering.