0
# Icon Collections
1

2
Comprehensive categorized collections of over 1,100 icons from three main sources: FontAwesome, PatternFly design system, and custom Red Hat ecosystem icons. Each collection follows specific naming conventions and serves different use cases.
3

4
## Capabilities
5

6
### FontAwesome Icons (1000+ icons)
7

8
Icons from FontAwesome 5.15.4 including solid, regular, and brand collections with consistent naming patterns.
9

10
```typescript { .api }
11
// FontAwesome Solid Icons (most common usage)
12
const UserIcon: React.ComponentClass<SVGIconProps>;
13
const HomeIcon: React.ComponentClass<SVGIconProps>;
14
const SearchIcon: React.ComponentClass<SVGIconProps>;
15
const BellIcon: React.ComponentClass<SVGIconProps>;
16
const CogIcon: React.ComponentClass<SVGIconProps>;
17
const TrashIcon: React.ComponentClass<SVGIconProps>;
18
const EditIcon: React.ComponentClass<SVGIconProps>;
19
const SaveIcon: React.ComponentClass<SVGIconProps>;
20
const PrintIcon: React.ComponentClass<SVGIconProps>;
21
const DownloadIcon: React.ComponentClass<SVGIconProps>;
22

23
// FontAwesome Regular Icons (outlined versions)
24
const OutlinedUserIcon: React.ComponentClass<SVGIconProps>;
25
const OutlinedBellIcon: React.ComponentClass<SVGIconProps>;
26
const OutlinedFileIcon: React.ComponentClass<SVGIconProps>;
27
const OutlinedCalendarIcon: React.ComponentClass<SVGIconProps>;
28
const OutlinedCheckCircleIcon: React.ComponentClass<SVGIconProps>;
29

30
// FontAwesome Brand Icons (social and company logos)
31
const FacebookIcon: React.ComponentClass<SVGIconProps>;
32
const TwitterIcon: React.ComponentClass<SVGIconProps>;
33
const GithubIcon: React.ComponentClass<SVGIconProps>;
34
const LinkedinIcon: React.ComponentClass<SVGIconProps>;
35
const GoogleIcon: React.ComponentClass<SVGIconProps>;
36
const MicrosoftIcon: React.ComponentClass<SVGIconProps>;
37
const AppleIcon: React.ComponentClass<SVGIconProps>;
38
const DockerIcon: React.ComponentClass<SVGIconProps>;
39
const SlackIcon: React.ComponentClass<SVGIconProps>;
40
```
41

42
**FontAwesome Naming Rules:**
43
- **Solid icons**: Direct conversion `user` → `UserIcon`
44
- **Regular icons**: Prefixed with "Outlined" `user` → `OutlinedUserIcon`
45
- **Brand icons**: Company/service names `facebook` → `FacebookIcon`
46
- **Numeric handling**: `500px` → `FiveHundredPxIcon`
47

48
**Excluded Icons:**
49
- `faFontAwesomeLogoFull` is excluded from the collection
50

51
**Usage Examples:**
52

53
```typescript
54
import { 
55
  UserIcon, 
56
  OutlinedUserIcon, 
57
  FacebookIcon,
58
  FiveHundredPxIcon 
59
} from "@patternfly/react-icons";
60

61
// Solid icon usage
62
<UserIcon title="User profile" />
63

64
// Regular (outlined) icon usage  
65
<OutlinedUserIcon className="outline-style" />
66

67
// Brand icon usage
68
<FacebookIcon onClick={shareOnFacebook} />
69

70
// Numeric name handling
71
<FiveHundredPxIcon />
72
```
73

74
### PatternFly Icons (100+ icons)
75

76
Core PatternFly design system icons optimized for enterprise applications, with some renamed for consistency with the broader collection.
77

78
```typescript { .api }
79
// PatternFly Core Icons
80
const AddCircleOIcon: React.ComponentClass<SVGIconProps>;
81
const ApplicationsIcon: React.ComponentClass<SVGIconProps>;
82
const ArchiveIcon: React.ComponentClass<SVGIconProps>;
83
const ArrowIcon: React.ComponentClass<SVGIconProps>;
84
const BuildIcon: React.ComponentClass<SVGIconProps>;
85
const BundleIcon: React.ComponentClass<SVGIconProps>;
86
const CatalogIcon: React.ComponentClass<SVGIconProps>;
87
const CloudIcon: React.ComponentClass<SVGIconProps>;
88
const ContainerNodeIcon: React.ComponentClass<SVGIconProps>;
89
const CubeIcon: React.ComponentClass<SVGIconProps>;
90

91
// PatternFly Renamed Icons (renamed to avoid conflicts)
92
const SaveAltIcon: React.ComponentClass<SVGIconProps>;        // was 'save'
93
const FolderOpenAltIcon: React.ComponentClass<SVGIconProps>; // was 'folder-open'
94
const EditAltIcon: React.ComponentClass<SVGIconProps>;       // was 'edit'
95
const PrintAltIcon: React.ComponentClass<SVGIconProps>;      // was 'print'
96
const SpinnerAltIcon: React.ComponentClass<SVGIconProps>;    // was 'spinner'
97
const HomeAltIcon: React.ComponentClass<SVGIconProps>;       // was 'home'
98
const MemoryAltIcon: React.ComponentClass<SVGIconProps>;     // was 'memory'
99
const ServerAltIcon: React.ComponentClass<SVGIconProps>;     // was 'server'
100
const UserSecIcon: React.ComponentClass<SVGIconProps>;       // was 'user'
101
const UsersAltIcon: React.ComponentClass<SVGIconProps>;      // was 'users'
102
const InfoAltIcon: React.ComponentClass<SVGIconProps>;       // was 'info'
103
const FilterAltIcon: React.ComponentClass<SVGIconProps>;     // was 'filter'
104
```
105

106
**PatternFly Naming Rules:**
107
- Most icons use direct name conversion: `catalog` → `CatalogIcon`
108
- Conflicting names get "Alt" suffix: `save` → `SaveAltIcon`
109
- Special security context: `user` → `UserSecIcon`
110

111
**Excluded Icons:**
112
- `history` is excluded from PatternFly icons
113

114
**Usage Examples:**
115

116
```typescript
117
import { 
118
  CatalogIcon, 
119
  SaveAltIcon, 
120
  UserSecIcon, 
121
  ApplicationsIcon 
122
} from "@patternfly/react-icons";
123

124
// Standard PatternFly icons
125
<CatalogIcon title="Application catalog" />
126
<ApplicationsIcon className="app-menu-icon" />
127

128
// Renamed PatternFly icons (avoid conflicts with FontAwesome)
129
<SaveAltIcon />      // PatternFly save icon
130
<UserSecIcon />      // PatternFly user icon for security contexts
131
```
132

133
### Custom Icons (10 icons)
134

135
Specialized icons for Red Hat and PatternFly ecosystem tools, providing brand-specific iconography not available in standard collections.
136

137
```typescript { .api }
138
/**
139
 * Red Hat and PatternFly ecosystem icons
140
 */
141
const OpenshiftIcon: React.ComponentClass<SVGIconProps>;     // OpenShift container platform logo
142
const AnsibeTowerIcon: React.ComponentClass<SVGIconProps>;   // Ansible Tower logo (note: typo preserved)
143
const CloudCircleIcon: React.ComponentClass<SVGIconProps>;   // Cloud with circle design
144
const CloudServerIcon: React.ComponentClass<SVGIconProps>;   // Cloud server representation
145
const ChartSpikeIcon: React.ComponentClass<SVGIconProps>;    // Spiked chart visualization
146
const PaperPlaneAltIcon: React.ComponentClass<SVGIconProps>; // Alternative paper plane design
147
const OpenstackIcon: React.ComponentClass<SVGIconProps>;     // OpenStack logo
148
const AzureIcon: React.ComponentClass<SVGIconProps>;         // Microsoft Azure logo
149
const PathMissingIcon: React.ComponentClass<SVGIconProps>;   // Path/route missing indicator
150
const PenToSquareIcon: React.ComponentClass<SVGIconProps>;   // Edit/modify icon
151
```
152

153
**Custom Icon Details:**
154

155
1. **OpenshiftIcon** - OpenShift container platform branding
156
2. **AnsibeTowerIcon** - Ansible Tower automation (note: name contains preserved typo)
157
3. **CloudCircleIcon** - Generic cloud icon with circular design
158
4. **CloudServerIcon** - Cloud computing with server elements
159
5. **ChartSpikeIcon** - Data visualization with spike patterns
160
6. **PaperPlaneAltIcon** - Send/message icon alternative design
161
7. **OpenstackIcon** - OpenStack cloud platform logo
162
8. **AzureIcon** - Microsoft Azure cloud services logo
163
9. **PathMissingIcon** - Error state for missing routes/paths
164
10. **PenToSquareIcon** - Edit action with pen-to-square metaphor
165

166
**Usage Examples:**
167

168
```typescript
169
import { 
170
  OpenshiftIcon, 
171
  AzureIcon, 
172
  CloudServerIcon,
173
  ChartSpikeIcon 
174
} from "@patternfly/react-icons";
175

176
// Red Hat ecosystem branding
177
<OpenshiftIcon title="OpenShift cluster" />
178

179
// Cloud provider branding
180
<AzureIcon className="azure-branding" />
181

182
// Infrastructure visualization
183
<CloudServerIcon title="Cloud infrastructure" />
184

185
// Data visualization
186
<ChartSpikeIcon onClick={showDetailedChart} />
187
```
188

189
### Collection Usage Patterns
190

191
Different collections serve different purposes in applications.
192

193
**By Use Case:**
194

195
```typescript
196
// General UI actions (FontAwesome solid)
197
import { 
198
  UserIcon,      // User profiles
199
  SearchIcon,    // Search functionality
200
  CogIcon,       // Settings/configuration
201
  BellIcon       // Notifications
202
} from "@patternfly/react-icons";
203

204
// Subtle/outlined variants (FontAwesome regular)
205
import { 
206
  OutlinedUserIcon,    // Less prominent user indicators
207
  OutlinedFileIcon,    // Document representations
208
  OutlinedBellIcon     // Inactive notifications
209
} from "@patternfly/react-icons";
210

211
// Social/brand integration (FontAwesome brands)
212
import { 
213
  GithubIcon,     // GitHub integration
214
  SlackIcon,      // Slack notifications
215
  DockerIcon      // Container technology
216
} from "@patternfly/react-icons";
217

218
// Enterprise/PatternFly UI (PatternFly icons)
219
import { 
220
  CatalogIcon,        // Application catalogs
221
  ApplicationsIcon,   // App management
222
  ContainerNodeIcon   // Kubernetes/OpenShift
223
} from "@patternfly/react-icons";
224

225
// Red Hat ecosystem (Custom icons)
226
import { 
227
  OpenshiftIcon,    // Container platforms
228
  AzureIcon,        // Multi-cloud support
229
  ChartSpikeIcon    // Monitoring dashboards
230
} from "@patternfly/react-icons";
231
```
232

233
### Tree Shaking and Performance
234

235
Optimize bundle size by importing icons individually rather than from the main package.
236

237
**Recommended Approach:**
238

239
```typescript
240
// Individual imports for optimal tree shaking
241
import UserIcon from "@patternfly/react-icons/dist/esm/icons/user-icon";
242
import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
243
import FacebookIcon from "@patternfly/react-icons/dist/esm/icons/facebook-icon";
244
```
245

246
**Babel Transform for CommonJS:**
247

248
```javascript
249
// babel.config.js for automatic transform
250
module.exports = {
251
  plugins: [
252
    [
253
      "transform-imports",
254
      {
255
        "@patternfly/react-icons": {
256
          transform: (importName) => 
257
            `@patternfly/react-icons/dist/js/icons/${importName
258
              .split(/(?=[A-Z])/)
259
              .join('-')
260
              .toLowerCase()}`,
261
          preventFullImport: true
262
        }
263
      }
264
    ]
265
  ]
266
};
267
```
268

269
### Icon Discovery
270

271
With over 1,100 icons available, use systematic approaches to find the right icons.
272

273
**By Category:**
274
- **UI Actions**: User, Search, Edit, Save, Delete, Settings
275
- **Navigation**: Arrow, Home, Menu, Back, Forward
276
- **Status**: Check, X, Warning, Info, Success, Error
277
- **Media**: Play, Pause, Volume, Image, Video
278
- **Communication**: Bell, Message, Mail, Phone
279
- **Business**: Calendar, Clock, Chart, Graph, Report
280
- **Technology**: Code, Database, Server, Cloud, Mobile
281

282
**Online Resources:**
283
- PatternFly Icon Documentation: https://react-staging.patternfly.org/icons
284
- FontAwesome 5.15.4 Gallery: https://fontawesome.com/v5.15/icons
285
- Icon search and preview tools in PatternFly documentation