Log in / Register Account

Icons symbolize abstract and literal concepts, helping us depict a variety of ideas and technologies. Each icon in our icon set has a specific meaning and consistent design so that we can consistently and effectively communicate across our business.

Depending on the scale, you might need a different type of icon or an illustration.

UI icons

UI icons are very small and are used in the interfaces of websites or products.

Standard icons

Icons represent a single concept or relationship between 2 things.

Mini-spots

Mini-spots are small illustrations that represent a simple concept.

Illustrations

Illustrations have a narrative structure or demonstrates a complex concept.

We have 2 types of icons: standard and UX. Standard icons are used in marketing materials, slides, infographics, and diagrams, while UX icons are used in interfaces.

Standard icons

Our icon system is simple, clean, and open. All icons use the same stroke weights and corner radii, show objects from the front, use flattened perspective, and are made solely from geometric shapes. By default, our standard icons are available in 2 versions: filled and unfilled. They are also available in 3 colors–red, black, and white–but they can be changed to any color in our brand palette.

Use standard icons in marketing materials, presentations, web content, infographics, and diagrams. They work best for sizes between 32 and 100 pixels.

Creating standard icons

Our icon library is built collaboratively over time. If you create new icons, share them with us. To ensure icons you create work with the existing set, use the template and follow the guidelines below.

1. Draw icons on a 36-pixel artboard. Extend into the inner margin as needed to keep each icon a similar proportion and size, but keep the outer margin clear.

2. All angles should be 0°, 45°, 90°, or 1 of these angles plus or minus 12°. We use 12° angles because they match the angle of the ascenders and descenders in our font.

3. Create unfilled icons first. Use a 1.5 stroke weight, and make sure the terminals and corners are rounded.

4. Use only geometric shapes to establish the basic form of the icon.

5. Use dots and straight lines to add detail. Use a 1.5-point gap in the stroke to create openness or show depth. For dotted lines, use a 0-point dash and a 2.5-point gap.

6. Small arrows should be 90° and 2 pixels long on both ends. Larger arrows should use the same proportions as smaller ones.

Creating filled icons

1. To create a filled icon, start with the outlined version and make the fill the same color as the stroke, keeping the size of the stroke the same.

2. Change any details to white.

3. Modify the size of any details to maintain a 1.5- or 0.5-point gap between elements. Depending on the icon, you may want to extend the line instead.

User interface (UI) 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. At these smaller sizes, use the same principles for UI icons as for standard icons: 12° and right angles, rounded corners and terminals, and geometric shapes. 

Our UI icons are flat, simple, and legible at 16 pixels. They are typically used in gray or white.

1. Start with a 16-pixel artboard and a 1-point stroke. Set a margin of 1 pixel around your design.

2. Make sure the icon fits within a grid of 14 pixels.

3. Reference standard icons and borrow from existing ones. Use only the necessary elements to identify the icon.

Icons as patterns

Patterns are a way to use our icons to create engaging, visually interesting graphics quickly. Use patterns for backgrounds or to fill spaces.

Approaches to patterns

When creating patterns, try changing 1 or 2 elements within the pattern to make it more dynamic. A pattern should be dynamic and interesting, not boring or monotonous. 

Use 1 icon and vary the size, color, or fill. 

Use a set of related icons at the same size.

Add connecting lines to icons in a set.

Experiment with color and scale.

Icons in use

Do this

Make icons 2-dimensional with minimal design elements.

Do not do this

Do not make an icon complicated or 3-dimensional.

Do this

Use a single line weight in every icon across all icons.

Do not do this

Do not use multiple line weights.

Do this

Find a concrete image that can represent the abstract idea.

Do not do this

Do not make an icon so abstract that the user cannot understand the meaning.

Do this

Use an icon to represent only 1 concept at a time.

Do not do this

Do not combine 2 concepts to illustrate a more complex concept.

Do this

Vary 1 or 2 elements in a pattern to create rhythm and interest.

Do not do this

Do not use the same pattern with no variation. It is boring and repetitive.

Do this

Use a pattern that is not too complex and that does not interfere with text.

Do not do this

Do not use a pattern that gets in the way of the message.

Standard icons are a quick way to add visual interest and reinforce main points in presentation decks.

In the interface of redhat.com, UI icons allow users to more quickly and intuitively navigate our site.