Our icon system is simple, clean, and open. Each icon has a few key things in common with the rest of the set. They use the same stroke weights and corner radii. They show objects from the front and use flattened perspective whenever possible.
They’re designed in two common sizes, and both sets work together seamlessly.
For versatility, our icons can be used with any of our brand colors and with or without bounding shapes.
The standard icon set is best for sizes larger than 32 pixels, like marketing materials, infographics, and diagrams.
Standard icons must be created to spec to ensure they work with the existing set. If you create new icons, share them with us (and everyone else).
1. Start with a 1.5” bounding circle and a 1” icon area, or download our icon template.
2. Use outlines (never solid fills) to make icons that feel open and inviting.
3. Include simple details to add realism without creating clutter.
4. Use heavy lines for edges and actions and fine lines for interiors and details.
5. Make an object virtual by adding a dashed line offset 3 points from the outer edge of the icon.
6. Finalize icons by outlining strokes and creating a single compound path, the saving out versions as shown in our icon finalization guide.
LINES AND ARROWS
Using consistent line and arrow styles is a small detail that goes a long way towards making our icons look like a unified set.
Adding color to icons makes the system even more flexible. Color can be added in two ways—by changing the color of the icon itself, or by placing the icon on a colored shape. Use any shape and color from our color palette. We’ve provided a few to get you started, as well as an .svg file you can edit with Inkscape or Adobe Illustrator.
Screen-based interfaces present special challenges for icon design, especially size and scale. Interfaces require icons that are immediately understood and remain clear at very small sizes.
Our interface icons are flat, simple, bold, and designed for legibility at 14 pixels and also used at 16 pixels. They are usually used in gray or white, though a few use color to provide additional meaning.
We use (and contribute to) the Patternfly icon library. Patternfly is a user interface (UI) framework community that serves as the upstream project for the Red Hat Common User Experience (RCUE). In turn, Patternfly uses Font Awesome as a starting point for many of its icons.
UI designers (internal and external to Red Hat) are encouraged to contribute to the upstream community.
CREATE AN ICON
1. Start with a 14-pixel grid.
2. Shapes must align to the pixel grid (or a half pixel when needed), or they won’t appear crisp.
3. Borrow shapes from existing icons whenever you can.
4. Icons are typically filled in where possible for legibility.
5. Reference our standard icon set, when possible they should have similarities.
6. Keep icons as simple as possible. Include only what’s necessary to identify the icon.
7. Upload the .svg to icomoon and test the icon on a non-retina screen at 14 pixels.
Create icons with solid or filled areas. Icons should be line-based and feel open.
Use 3D effects.
Use a gradient to color an icon. Use flat colors or a bounding shape to add color instead.
Scale a standard icon down to interface size, the lines are too fine and detail is lost.
Use icons drawn in perspective — icons should always show objects straight-on.
Scale an interface icon up to use in a diagram or graphic. They feel too clunky.
ICONS IN USE
Icons are a quick way to add illustration to an infographic, especially if the focus is more on data than a narrative.