0
# Static Icon Components
1

2
Individual React components for each Lucide icon, optimized for tree-shaking and static imports. Each icon is a separate component that can be imported directly, ensuring only the icons you use are included in your bundle.
3

4
## Capabilities
5

6
### Individual Icon Components
7

8
Each Lucide icon is available as a named export from the main package. Icons are named in PascalCase (e.g., `AirVent`, `Camera`, `Grid`).
9

10
```typescript { .api }
11
import type { SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
12

13
type ElementAttributes = RefAttributes<SVGSVGElement> & Partial<SVGProps<SVGSVGElement>>;
14

15
/**
16
 * Individual icon components with consistent API
17
 * All icons support the same props and are forwardRef components
18
 */
19
type LucideIcon = ForwardRefExoticComponent<
20
  Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
21
>;
22

23
interface LucideProps extends ElementAttributes {
24
  /** Icon size in pixels or CSS units */
25
  size?: string | number;
26
  /** Use absolute stroke width (adjusts for icon size) */
27
  absoluteStrokeWidth?: boolean;
28
}
29

30
type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
31
type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
32
```
33

34
**Usage Examples:**
35

36
```typescript
37
import { Camera, Grid, Pen, AirVent } from "lucide-react";
38

39
// Basic usage with default props
40
<Camera />
41

42
// Customized with props
43
<Grid 
44
  size={32} 
45
  color="blue" 
46
  strokeWidth={3} 
47
  className="my-icon"
48
/>
49

50
// Using size as string
51
<Pen size="2rem" />
52

53
// Absolute stroke width (maintains visual weight at different sizes)
54
<AirVent size={16} absoluteStrokeWidth={true} />
55
```
56

57
### Icon Props
58

59
All icon components accept the same standardized props for consistent styling.
60

61
#### Size Property
62

63
```typescript { .api }
64
/**
65
 * Controls the width and height of the icon
66
 * @param size - Number in pixels or string with CSS units
67
 * @default 24
68
 */
69
size?: string | number;
70
```
71

72
**Usage Examples:**
73

74
```typescript
75
// Number (pixels)
76
<Camera size={48} />
77

78
// String with units
79
<Camera size="2rem" />
80
<Camera size="100%" />
81
<Camera size="2.5em" />
82
```
83

84
#### Color and Stroke Properties
85

86
Icons inherit standard SVG stroke properties for styling.
87

88
```typescript { .api }
89
/**
90
 * Standard SVG stroke properties
91
 * Icons use stroke-based rendering with default attributes
92
 */
93
color?: string;        // Alias for stroke
94
stroke?: string;       // SVG stroke color
95
strokeWidth?: number;  // SVG stroke width
96
fill?: string;         // SVG fill color
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
// Color variants
103
<Camera color="red" />
104
<Camera stroke="#3B82F6" />
105
<Camera color="currentColor" /> // Default - inherits text color
106

107
// Stroke width
108
<Camera strokeWidth={1} />   // Thin
109
<Camera strokeWidth={3} />   // Bold
110

111
// Fill (most icons are stroke-based, but some support fill)
112
<Camera fill="none" />       // Default
113
<Camera fill="currentColor" />
114
```
115

116
#### Absolute Stroke Width
117

118
```typescript { .api }
119
/**
120
 * Maintains consistent visual stroke width across different icon sizes
121
 * @param absoluteStrokeWidth - When true, stroke width is adjusted based on icon size
122
 * @default false
123
 */
124
absoluteStrokeWidth?: boolean;
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
// Standard behavior - stroke scales with icon
131
<Camera size={16} strokeWidth={2} />  // Thin strokes
132
<Camera size={48} strokeWidth={2} />  // Thick strokes
133

134
// Absolute stroke width - maintains visual consistency
135
<Camera size={16} strokeWidth={2} absoluteStrokeWidth={true} />  // Stroke adjusted
136
<Camera size={48} strokeWidth={2} absoluteStrokeWidth={true} />  // Same visual weight
137
```
138

139
### Default Attributes
140

141
All icons inherit these default SVG attributes:
142

143
```typescript { .api }
144
/**
145
 * Default SVG attributes applied to all icons
146
 * These can be overridden by passing props
147
 */
148
interface DefaultAttributes {
149
  xmlns: "http://www.w3.org/2000/svg";
150
  width: 24;
151
  height: 24;
152
  viewBox: "0 0 24 24";
153
  fill: "none";
154
  stroke: "currentColor";
155
  strokeWidth: 2;
156
  strokeLinecap: "round";
157
  strokeLinejoin: "round";
158
}
159
```
160

161
### SVG Attributes Support
162

163
Icon components accept all standard SVG element attributes for advanced customization.
164

165
```typescript { .api }
166
/**
167
 * All standard SVG element attributes are supported
168
 * Icons are rendered as <svg> elements
169
 */
170
interface SVGSupport extends SVGProps<SVGSVGElement> {
171
  // Common SVG attributes
172
  className?: string;
173
  style?: CSSProperties;
174
  transform?: string;
175
  opacity?: number;
176
  filter?: string;
177
  mask?: string;
178
  clipPath?: string;
179
  // ... all other SVG attributes
180
}
181
```
182

183
**Usage Examples:**
184

185
```typescript
186
// CSS classes and styles
187
<Camera className="icon-class" style={{ marginRight: '8px' }} />
188

189
// SVG transformations
190
<Camera transform="rotate(45)" />
191

192
// Accessibility
193
<Camera role="img" aria-label="Camera icon" />
194
<Camera aria-hidden="true" />  // Decorative icons
195

196
// Advanced SVG properties
197
<Camera opacity={0.5} filter="drop-shadow(2px 2px 4px rgba(0,0,0,0.3))" />
198
```
199

200
### Ref Support
201

202
All icon components support React refs using `forwardRef`.
203

204
```typescript { .api }
205
/**
206
 * Icons support refs to access the underlying SVG element
207
 * Useful for imperative operations like focus management
208
 */
209
const iconRef = useRef<SVGSVGElement>(null);
210
```
211

212
**Usage Examples:**
213

214
```typescript
215
import { useRef, useEffect } from 'react';
216
import { Camera } from 'lucide-react';
217

218
const MyComponent = () => {
219
  const iconRef = useRef<SVGSVGElement>(null);
220
  
221
  useEffect(() => {
222
    if (iconRef.current) {
223
      // Access SVG element directly
224
      iconRef.current.focus();
225
      console.log(iconRef.current.getBBox());
226
    }
227
  }, []);
228
  
229
  return <Camera ref={iconRef} />;
230
};
231
```
232

233
### Icon Naming Convention
234

235
Icons follow PascalCase naming derived from the original icon names:
236

237
```typescript { .api }
238
/**
239
 * Icon names are converted from kebab-case to PascalCase
240
 * Examples:
241
 * - "air-vent" -> AirVent
242
 * - "chevron-right" -> ChevronRight  
243
 * - "wifi-off" -> WifiOff
244
 */
245
```
246

247
### Icons Namespace
248

249
All icons are also available through the `icons` namespace export:
250

251
```typescript { .api }
252
/**
253
 * Namespace containing all icon components
254
 * Useful when you want to access icons programmatically
255
 */
256
import { icons } from "lucide-react";
257

258
// Access icons through namespace
259
const CameraIcon = icons.Camera;
260
const GridIcon = icons.Grid;
261
```
262

263
**Usage Examples:**
264

265
```typescript
266
import { icons } from "lucide-react";
267

268
// Programmatic icon access
269
const getIcon = (iconName: keyof typeof icons) => {
270
  return icons[iconName];
271
};
272

273
// Dynamic component selection
274
const IconDisplay = ({ name }: { name: keyof typeof icons }) => {
275
  const IconComponent = icons[name];
276
  return <IconComponent />;
277
};
278

279
// Icon picker/gallery
280
const IconGallery = () => (
281
  <div>
282
    {Object.entries(icons).map(([name, IconComponent]) => (
283
      <div key={name}>
284
        <IconComponent />
285
        <span>{name}</span>
286
      </div>
287
    ))}
288
  </div>
289
);
290
```
291

292
### Aliases
293

294
Some icons have alias exports for backward compatibility:
295

296
```typescript { .api }
297
/**
298
 * Icon aliases provide alternative names for the same icon
299
 * Useful for backward compatibility and alternative naming preferences
300
 */
301
import { Pen, Edit2 } from "lucide-react";  // Edit2 is alias for Pen
302
```