iconheader

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.

STANDARD ICONS

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).

Download our standard icon library

CREATING ICONS

RH_icons_howto1b

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.

RH_icons_howto2b

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

RH_icons_linesarrows

ADDING COLOR

Using consistent line and arrow styles is a small detail that goes a long way towards making our icons look like a unified set.

Download sample lines and arrows

iconcolors

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.

Download sample shapes

INTERFACE ICONS

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.

 

 

PATTERNFLY

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.

View Patternfly icon library

Download icon SVGs

Participate and give feedback to Patternfly

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.

SOCIAL MEDIA ICONS

Our social media icons can be used for both screen-based interfaces and print. Social media icons should have square corners and use a color from our palette, usually white or gray.

Download social media icons

socialicons

DON’T

RH_icons_dont_fill

Create icons with solid or filled areas. Icons should be line-based and feel open.

RH_icons_dont_3D

Use 3D effects.

RH_icons_dont_gradient

Use a gradient to color an icon. Use flat colors or a bounding shape to add color instead.

RH_icons_dont_tiny

Scale a standard icon down to interface size, the lines are too fine and detail is lost.

RH_icons_dont_isometric

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

iconexample_diagramDiagrams, even very technical ones, can use icons as shorthand. Here the user and hardware components are represented with icons.

iconexample_infographic

Icons are a quick way to add illustration to an infographic, especially if the focus is more on data than a narrative.

redhatdotcom_iconexample

On this page of redhat.com, icons representing different industries add visual interest to a series of tabs.

iconexample_borh

In this spread of The Book of Red Hat, icons are used as a repeating pattern that reinforces the central message.