0
# PatternFly React Icons
1

2
PatternFly React Icons provides over 1,100 icon components for React applications, offering a comprehensive collection from FontAwesome, PatternFly design system, and custom Red Hat ecosystem icons. All icons are provided as tree-shakable React components with full TypeScript support and built-in accessibility features.
3

4
## Package Information
5

6
- **Package Name**: @patternfly/react-icons
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @patternfly/react-icons`
10

11
## Core Imports
12

13
```typescript
14
import { UserIcon, ArrowRightIcon } from "@patternfly/react-icons";
15
import { createIcon } from "@patternfly/react-icons/dist/esm/createIcon";
16
import type { SVGIconProps, IconDefinition } from "@patternfly/react-icons/dist/esm/createIcon";
17
```
18

19
For individual icon imports (recommended for tree-shaking):
20

21
```typescript
22
import UserIcon from "@patternfly/react-icons/dist/esm/icons/user-icon";
23
import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon";
24
```
25

26
For CommonJS:
27

28
```javascript
29
const { UserIcon, ArrowRightIcon } = require("@patternfly/react-icons");
30
```
31

32
## Basic Usage
33

34
```typescript
35
import { UserIcon, ArrowRightIcon, CheckIcon } from "@patternfly/react-icons";
36

37
function MyComponent() {
38
  return (
39
    <div>
40
      {/* Simple icon usage */}
41
      <UserIcon />
42
      
43
      {/* Icon with accessibility title */}
44
      <ArrowRightIcon title="Navigate to next page" />
45
      
46
      {/* Icon with custom styling */}
47
      <CheckIcon className="text-green-500" style={{ fontSize: '24px' }} />
48
    </div>
49
  );
50
}
51
```
52

53
## Architecture
54

55
PatternFly React Icons is built around several key components:
56

57
- **Icon Factory**: `createIcon` function generates React class components from icon definitions
58
- **Icon Components**: Over 1,100 pre-built icon components with consistent naming (`{Name}Icon`)
59
- **Type System**: Full TypeScript integration with `SVGIconProps` and `IconDefinition` interfaces
60
- **Accessibility Engine**: Built-in ARIA support with optional titles and semantic markup
61
- **Build System**: Generated components support both ESM and CJS with optimal tree-shaking
62

63
## Capabilities
64

65
### Icon Components
66

67
Pre-built React components for all icons from FontAwesome, PatternFly, and custom sources. Each icon follows consistent naming patterns and includes accessibility features.
68

69
```typescript { .api }
70
// Example icon components
71
const UserIcon: React.ComponentClass<SVGIconProps>;
72
const ArrowRightIcon: React.ComponentClass<SVGIconProps>;
73
const CheckIcon: React.ComponentClass<SVGIconProps>;
74

75
interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
76
  title?: string;
77
  className?: string;
78
}
79
```
80

81
[Icon Components](./icon-components.md)
82

83
### Icon Factory
84

85
Factory function for creating custom icon components from icon definitions, enabling creation of custom icons that match the library's patterns.
86

87
```typescript { .api }
88
function createIcon(iconDefinition: IconDefinition): React.ComponentClass<SVGIconProps>;
89

90
interface IconDefinition {
91
  name?: string;
92
  width: number;
93
  height: number;
94
  svgPath: string | SVGPathObject[];
95
  xOffset?: number;
96
  yOffset?: number;
97
  svgClassName?: string;
98
}
99

100
interface SVGPathObject {
101
  path: string;
102
  className?: string;
103
}
104
```
105

106
[Icon Factory](./icon-factory.md)
107

108
### Icon Collections
109

110
Comprehensive categorized collections of icons from different sources, each with specific naming conventions and use cases.
111

112
```typescript { .api }
113
// FontAwesome Icons (1000+ icons)
114
const TimesIcon: React.ComponentClass<SVGIconProps>;          // Solid icons
115
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;  // Regular icons  
116
const FacebookIcon: React.ComponentClass<SVGIconProps>;      // Brand icons
117

118
// PatternFly Icons (100+ icons)
119
const SaveAltIcon: React.ComponentClass<SVGIconProps>;
120
const EditAltIcon: React.ComponentClass<SVGIconProps>;
121

122
// Custom Icons (10 icons)
123
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;
124
const AzureIcon: React.ComponentClass<SVGIconProps>;
125
```
126

127
[Icon Collections](./icon-collections.md)
128

129
## Types
130

131
```typescript { .api }
132
interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
133
  /** Accessibility title for the icon */
134
  title?: string;
135
  /** Additional CSS classes */
136
  className?: string;
137
}
138

139
interface IconDefinition {
140
  /** Display name for the icon component */
141
  name?: string;
142
  /** Icon width in pixels */
143
  width: number;
144
  /** Icon height in pixels */
145
  height: number;
146
  /** SVG path data or array of path objects */
147
  svgPath: string | SVGPathObject[];
148
  /** X-axis offset (default: 0) */
149
  xOffset?: number;
150
  /** Y-axis offset (default: 0) */
151
  yOffset?: number;
152
  /** CSS class for the SVG element */
153
  svgClassName?: string;
154
}
155

156
interface SVGPathObject {
157
  /** SVG path data */
158
  path: string;
159
  /** CSS class for this specific path */
160
  className?: string;
161
}
162

163
interface IconConfig {
164
  name: string;
165
  height: number;
166
  width: number;
167
  svgPath: string | SVGPathObject[];
168
  yOffset: number;
169
  xOffset: number;
170
  svgClassName: string | null;
171
}
172
```