Select a language
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 we can consistently and effectively communicate across our business.
Depending on the scale, you might need a different type of icon or an illustration.
User interface (UI) icons are very small and are used in the interfaces of websites or products.
Icons represent a single concept or relationship between 2 things.
Mini-spots are small illustrations that represent a simple concept.
Illustrations have a narrative structure or demonstrate 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.
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.
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.
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
Make icons 2-dimensional with minimal design elements.
Do not make an icon complicated or 3-dimensional.
Use a single line weight in every icon across all icons.
Do not use multiple line weights.
Find a concrete image that can represent the abstract idea.
Do not make an icon so abstract that the user cannot understand the meaning.
Use an icon to represent only 1 concept at a time.
Do not combine 2 concepts to illustrate a more complex concept.
Vary 1 or 2 elements in a pattern to create rhythm and interest.
Do not use the same pattern with no variation. It is boring and repetitive.
Use a pattern that is not too complex and that does not interfere with text.
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.