0
# Icon Components
1
2
Pre-built React icon components providing access to over 1,100 icons from FontAwesome, PatternFly design system, and custom Red Hat ecosystem collections. Each icon is a React class component with consistent properties and built-in accessibility features.
3
4
## Capabilities
5
6
### Component Structure
7
8
All icon components share the same structure and properties.
9
10
```typescript { .api }
11
/**
12
* Base icon component interface - all icons implement this structure
13
*/
14
interface IconComponent extends React.ComponentClass<SVGIconProps> {
15
/** Component display name for debugging */
16
displayName: string;
17
}
18
19
interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
20
/** Accessibility title for screen readers */
21
title?: string;
22
/** Additional CSS classes */
23
className?: string;
24
}
25
```
26
27
### Usage Patterns
28
29
Icons can be imported and used in multiple ways depending on your bundling requirements.
30
31
**Named Imports (for development convenience):**
32
```typescript
33
import { UserIcon, ArrowRightIcon, CheckIcon } from "@patternfly/react-icons";
34
35
<UserIcon />
36
<ArrowRightIcon title="Next page" />
37
<CheckIcon className="success-icon" />
38
```
39
40
**Individual Imports (recommended for production tree-shaking):**
41
```typescript
42
import UserIcon from "@patternfly/react-icons/dist/esm/icons/user-icon";
43
import ArrowRightIcon from "@patternfly/react-icons/dist/esm/icons/arrow-right-icon";
44
45
<UserIcon />
46
<ArrowRightIcon title="Next page" />
47
```
48
49
### Icon Props
50
51
All icon components accept standard SVG element properties plus additional options.
52
53
```typescript { .api }
54
/**
55
* Props accepted by all icon components
56
*/
57
interface SVGIconProps extends Omit<React.HTMLProps<SVGElement>, 'ref'> {
58
/**
59
* Accessibility title - adds <title> element and aria-labelledby attribute
60
* When omitted, icon has aria-hidden="true"
61
*/
62
title?: string;
63
64
/** Additional CSS classes to apply to the SVG element */
65
className?: string;
66
67
/** Standard SVG properties like style, onClick, onMouseOver, etc. */
68
// Inherits all React.HTMLProps<SVGElement> except 'ref'
69
}
70
```
71
72
**Usage Examples:**
73
74
```typescript
75
// Accessibility with title
76
<UserIcon title="User profile" />
77
78
// Custom styling
79
<ArrowRightIcon
80
className="nav-arrow"
81
style={{ color: 'blue', fontSize: '20px' }}
82
/>
83
84
// Event handling
85
<CheckIcon
86
onClick={() => console.log('Clicked')}
87
onMouseOver={() => console.log('Hovered')}
88
/>
89
90
// ARIA attributes and other SVG props
91
<TimesIcon
92
role="button"
93
tabIndex={0}
94
data-testid="close-button"
95
/>
96
```
97
98
### Accessibility Features
99
100
All icons include comprehensive accessibility support out of the box.
101
102
**ARIA Attributes:**
103
- `role="img"` for semantic meaning
104
- `aria-hidden="true"` when no title is provided
105
- `aria-labelledby` links to title element when title is provided
106
107
**Visual Properties:**
108
- `fill="currentColor"` inherits text color from parent
109
- `width="1em"` and `height="1em"` scale with font size
110
- `viewBox` properly configured for each icon
111
112
**Title Support:**
113
- Optional `title` prop adds `<title>` element with unique ID
114
- Automatically manages `aria-labelledby` relationship for screen readers
115
116
### CSS Classes
117
118
Every icon receives consistent CSS classes for styling integration.
119
120
```typescript { .api }
121
/**
122
* CSS classes applied to all icon components
123
*/
124
interface IconCSSClasses {
125
/** Base PatternFly v6 SVG identifier - always present */
126
'pf-v6-svg': true;
127
128
/** Icon-specific class from svgClassName property (if defined) */
129
[iconSpecificClass: string]: boolean;
130
131
/** Custom classes from className prop */
132
[customClass: string]: boolean;
133
}
134
```
135
136
**Styling Examples:**
137
138
```css
139
/* Target all PatternFly icons */
140
.pf-v6-svg {
141
transition: color 0.2s ease;
142
}
143
144
/* Custom icon styling */
145
.my-icon {
146
color: #0066cc;
147
font-size: 18px;
148
}
149
150
/* Hover effects */
151
.clickable-icon:hover .pf-v6-svg {
152
color: #004499;
153
}
154
```
155
156
### Icon Configuration Objects
157
158
Each icon component also exports a configuration object containing its definition data.
159
160
```typescript { .api }
161
/**
162
* Configuration object exported alongside each icon component
163
* Available as {IconName}Config export
164
*/
165
interface IconConfig {
166
/** Component name */
167
name: string;
168
/** Icon height in pixels */
169
height: number;
170
/** Icon width in pixels */
171
width: number;
172
/** SVG path data or array of path objects */
173
svgPath: string | SVGPathObject[];
174
/** Y-axis offset */
175
yOffset: number;
176
/** X-axis offset */
177
xOffset: number;
178
/** CSS class for the SVG element */
179
svgClassName: string | null;
180
}
181
```
182
183
**Usage Example:**
184
185
```typescript
186
import { UserIcon, UserIconConfig } from "@patternfly/react-icons";
187
188
console.log(UserIconConfig);
189
// {
190
// name: 'UserIcon',
191
// height: 448,
192
// width: 448,
193
// svgPath: 'M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128z...',
194
// yOffset: 0,
195
// xOffset: 0,
196
// svgClassName: null
197
// }
198
```
199
200
### Naming Convention
201
202
All icon components follow a consistent PascalCase naming pattern with "Icon" suffix.
203
204
**Transform Rules:**
205
- Kebab-case to PascalCase: `arrow-right` → `ArrowRightIcon`
206
- Numbers to words: `500px` → `FiveHundredPxIcon`
207
- Special prefixes: `outlined-user` → `OutlinedUserIcon`
208
- Brand names preserved: `facebook` → `FacebookIcon`
209
210
**Component Examples:**
211
```typescript
212
// Standard icons
213
const UserIcon: React.ComponentClass<SVGIconProps>;
214
const ArrowRightIcon: React.ComponentClass<SVGIconProps>;
215
const CheckCircleIcon: React.ComponentClass<SVGIconProps>;
216
217
// Outlined (FontAwesome regular) icons
218
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;
219
const OutlinedBellIcon: React.ComponentClass<SVGIconProps>;
220
221
// Brand icons
222
const FacebookIcon: React.ComponentClass<SVGIconProps>;
223
const TwitterIcon: React.ComponentClass<SVGIconProps>;
224
const GithubIcon: React.ComponentClass<SVGIconProps>;
225
226
// PatternFly renamed icons
227
const SaveAltIcon: React.ComponentClass<SVGIconProps>;
228
const EditAltIcon: React.ComponentClass<SVGIconProps>;
229
const UserSecIcon: React.ComponentClass<SVGIconProps>;
230
231
// Custom Red Hat ecosystem icons
232
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;
233
const AzureIcon: React.ComponentClass<SVGIconProps>;
234
const OpenstackIcon: React.ComponentClass<SVGIconProps>;
235
```