Jump to section

UI icons

Along with other elements of our design language, our UI (user interface) icons help our customers recognize that they’re using a Red Hat interface. They use the same style and metaphors as other Red Hat® icons, including consistent line weights, geometric shapes, and rounded details.

An image that shows 10 Red Hat UI icons. The icons are white on a black background.
An image that shows 10 Red Hat UI icons. The icons are black on a light gray background.

Screen-based interfaces present special challenges for icon design, especially size and scale. To help our customers navigate our product interfaces and web properties quickly and efficiently, our UI icons and microns are designed to be clear at very small sizes and use universally understood metaphors.

An image that shows 9 UI icons and 9 microns. The icons are black on a light gray background.
An image that shows the “view” and “view off” UI icons. The icons are overlaid with rectangular and circular grid lines.

Which type of Red Hat icon should I use?

At Red Hat, we have 3 types of icons. Which type of icon you should use depends on the context and what you’re trying to represent.

An image that shows 4 UI icons and 4 microns. The icons are black on a white background.

UI icons and microns

UI icons and microns are utilitarian, designed to convey information and facilitate navigation in user interfaces. UI icons are designed to be used between 14px and 24px. Microns are extremely small, and are designed to be used between 8px and 12px.

An image that shows 3 standard icons. The icons are red on a white background.

Icons

Icons are designed to be used as artwork, typically paired with text to add visual interest to information. They’re used in places like web cards and presentation slides between 36px and 100px.

Learn more about icons 

An image that shows 2 technology icons on a white background.

Technology icons

Technology icons represent Red Hat products and their components—like features, plug-ins, and operators. Each technology icon is designed to be used to represent a specific Red Hat offering.

Learn more about technology icons

UI icon design

An image shows the UI icon for “broken link.” On the left, the icon is outlined and sits on a grid to show the details. On the right, the icon is shown at-scale.

Grid and stroke

UI icons are designed on a 32px grid with a 2px stroke, allowing them to scale to 16px with a 1px stroke in application.

In specific circumstances, the stroke weight can be adjusted to better match the visual weight of other icons and maximize legibility.

An image shows the UI icon for “broken link.” The icon sits on a bounding shape and is overlaid with diagonal lines denoting the angles used in Red Hat icon design.

Details

The Red Hat icon style uses rounded corners and ends plus 12º, 45º, and 90º angles (whenever possible).

To create parity between our icon sets, we use the same visual metaphors for UI icons as found in our standard and technology icons.

An image shows the UI icon for “broken link.” The icon is shown on a bounding shape with rectangular and circular grid lines.

Key lines

Key lines on the artboard guide the height and width of the icons. Icons based on circles overshoot rectangular icons by 1px so that all icons appear the same size.

Applying UI icons

A screenshot of the Red Hat Hybrid Cloud Console shows multiple widgets. Each widget has 2 UI icons in the upper right corner showing the ability to move and scale the widget windows.

Interfaces built using PatternFly use Red Hat UI icons to represent information and facilitate user interactions (Red Hat UI icons coming to PatternFly 7).

A screenshot of the Red Hat homepage shows 4 UI icons in the upper right corner. The UI icons represent the ability to search, change the language, navigate the site, and log in.

UI icons are used in the Red Hat Digital Design System, like the Red Hat homepage masthead. The icons appear in white on a gray-95 background, providing an 18:1 contrast ratio.

Image showing misuse: An image shows the user icon merged with the search icon.

Don’t alter or combine UI icons to create new icons; each icon is designed to represent a single concept as simple as possible. If you can’t find a UI icon that meets your needs, suggest a new one.

Image showing misuse: A screenshot of a presentation slide shows UI icons used as decoration.

Never use UI icons for artwork or decoration; their small size lacks details necessary to create visual interest. Use standard icons or illustrations instead.

Image showing misuse: An image shows the link icon in dark gray on a black background.

Don’t use UI icons in a color with insufficient contrast against the background. Color contrast for UI icons should always be 3:1 or greater.

Micron design

In some situations, we need icons that are even smaller. For these applications, we created a limited set of extremely small, utilitarian icons. Unlike UI icons, microns are only used as interactive elements for actions like expanding dropdowns, closing alerts, or searching.

An image shows the micron for “external link.” On the left, the icon is outlined and sits on a grid to show the details. On the right, the icon is shown at-scale.

Grid and stroke

Microns are designed on a 20px grid with a 2px stroke, allowing them to scale to 10px with a 1px stroke in application.

An image shows the micron for “external link.” The icon sits on a bounding shape and is overlaid with diagonal lines denoting the angles used in Red Hat icon design.

Details

The Red Hat icon style uses rounded corners and ends plus 12º, 45º, and 90º angles (whenever possible).

To create parity between our icon sets, we use the same visual metaphors for microns as found in our UI, standard, and technology icons.

An image shows the micron for “external link.” The icon is shown on a bounding shape with rectangular and circular grid lines.

Key lines

Key lines on the artboard guide the height and width of the icons. Icons based on circles overshoot rectangular icons by 1px so that all icons appear the same size.

Applying microns

A screenshot of the Red Hat Hybrid Cloud Console shows multiple widgets. Each widget has 2 UI icons in the upper right corner showing the ability to move and scale the widget windows.

In PatternFly interfaces, certain interactive components like labels, dropdowns, and alerts require microns due to size and legibility limitations (Red Hat microns coming to PatternFly 7).

A screenshot of breadcrumbs on the Red Hat OpenShift homepage uses caret microns to separate individual breadcrumb links.

Interactive components in the Red Hat Digital Design System—like breadcrumbs and paginators—use microns.

Image showing misuse: A screenshot of multiple label elements in dark mode shows the X micron in dark gray against a black background.

Don’t use microns with insufficient contrast against the background. Like UI icons, microns should have 3:1 color contrast or greater.

Image showing misuse: An image shows a pattern made from the external link micron.

Don’t use microns for decoration or artwork at any size. Use standard icons or illustrations instead.

Image showing misuse: A screenshot of the masthead of the Red Hat homepage shows 1 button using a micron and 3 buttons using UI icons.

Don’t use a micron when you could use a UI icon. Microns are reserved for extremely small spaces where UI icons are too large—in spaces that are 12px or less.

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.