Jump to section

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.

UI icons on a dark background
UI icons on a light background

Our UI (user interface) icons use the same metaphors as other Red Hat® icons to create a consistent design language across all Red Hat assets. UI icons are utilitarian; they appear on our web pages and product interfaces to facilitate navigation or add visual context to text-based content.

UI icons outlined and filled.
UI icons on a grid.

Design

Diagram highlighting the grid and stroke

Grid and stroke

UI icons are designed on a 48px grid with a 2px stroke, allowing them to scale to 24px with a 1px stroke in the interface. Using a whole number for stroke weight maximizes legibility on screens with lower resolution.

Diagram highlighting rounded corners and angles

Details

Rounded corners and ends, consistent stroke width, plus using 12º, 45º, and 90º angles whenever possible defines the Red Hat icon style.

Diagram highlighting color contrast

Contrast

For accessibility, UI icons should have a minimum of 3:1 contrast against the background. More is better.

UI search icon.
Do this

Use UI icons as provided, without modifications.

Modified UI search icon.
Red X saying do not do this

Do not distort, combine, or otherwise modify existing UI icons.

UI icons being used in a website.
Do this

Use UI icons in interfaces at small sizes.

Incorrect use of UI icons in a presentation.
Red X saying do not do this

Do not substitute UI icons for other types of icons. UI icons are designed for interfaces only.

UI link icon
Do this

Make sure UI icons have enough contrast against the background (at least 3:1).

UI link icon with low contrast
Red X saying do not do this

Do not use UI icons in a color that has insufficient contrast against the background.

UI gear icon combined with text
Do this

Use UI icons purposefully to facilitate navigation or identify content in the interface.

Incorrect use of a UI icon as a pattern.
Red X saying do not do this

Do not use UI icons as decorative artwork.

Creative Commons

Using a Creative Commons license lets us share our icons and UI icons with our customers, partners, and communities.

This icon is licensed under a Creative Commons Attribution 4.0 International license. If you redistribute this icon, Red Hat should be given attribution. For individual uses, such as a diagram or presentation, attribution is optional.