Back to Designs page

Table of Contents

Related Research

No research entries have been linked to this design.

Resources

No resources available for this entry.

Additional tags

No tags are assigned to this entry.

Icons

Design type: Details page | Product area: Hybrid Cloud Console

Author: Kevin Hatchoua
Last edit: March 21, 2023

General guidelines

  • Use icons when they are meaningful (Avoid using purely decorative icons in most cases)
    • Be judicious with icon use. 
    • Example: Use icons to show status along with a word
    • Example: Use icons to describe a “type” of the report, which otherwise would be in text, to add decorative visual elements as well as actionable information.
  • Do not use icons for elements that could have types/variations which would grow exponentially
    • For example: navigation items where you could be in a situation where you’re coming up with hundreds of icons
  • Use Red Hat brand icons when an icon would be used for primarily decorative purposes.
    • Use the red or black variations as appropriate
  • Use Patternfly icons (Font Awesome)  for actions, UI indicators, and icons that are not primarily decorative. 
    • Example:  to signify a status
    • Example: toolbar actions that are well known

Icon use in tables

General guidelines

  • Keep colored icons for “status” related things
  • Keep black check mark/Xs for “facts” ie: present/not present, yes/no
  • Always accompany an icon with text, for clarity.
    • Optional: if you have space restrictions, make it responsive, so that when space becomes limited or screen width narrows, the words hide. 
  • The choice of icon should be consistent in a single column
    • For example, if you choose to do a green checkmark circle for success, you should choose a red checkmark circle for error.
    • Similarly, if you choose a black check for yes, you should choose a black check for no
       

For “Yes” or “No” / “Present” or “Not present” / “True” or “False”

  • Use the black check mark and X + text
  • DO NOT use the colored circle status icons. Those should only be used to indicate status (success or error, for example)
     

For Status

  • Use the colored circle status icons + text
  • The red X-colored circle should depict an error
  • The green √ colored circle should depict the success

Other examples

When to use an icon+text vs. a label

https://clarity.design/documentation/labels


Icons in tabs

Icons in tabs can be positioned to the left or to the right of the tab text, depending on the use case.

 

Position to the LEFT when:

  • The icon describes the tab text or goes hand in hand with the text 
  • The icon will ALWAYS be there no matter what the user does
  • Example: Using a cog icon with a settings tab for added clarity

Position the RIGHT when:

  • The icon is showing a status
  • The icon does not serve the purpose of “describing” the tab text
  • The icon may or may not be present, depending on the context
    • Eg: an exclamation-circle to signify an action required. Once the action is completed, the icon would no longer be shown in the tab.
  • Example: adding a status icon to the tab to get user attention, and signify that the user needs to do something in this tab. 

Example of icon on both the left AND right:

Imagine the user is prompted to do something in settings, (like update their software), this is what that tab may look like. Once the user addresses the issue, the exclamation-circle would go away, but the cog icon would remain since it is part of the tab.


Icons for adding/deleting

Adding: Use a solid plus-circle

Removing: Use solid minu-circle

Deleting: use a trash icon

 

Colors: The general guidance is that if the icon is on its own, it should be grey by default. However, if the icon is accompanied by some text, it should be blue, as it would become a link button. See table below for visuals.
 

Note:The plus circle for adding, and minus circle for removing should be used in the same view - usually an edit view. You should avoid using a minus circle on it’s own as it could look confusing to the user. If you need a remove/delete icon on it’s own, use a trash icon.

 Without textWith text
Adding
To add element

Component: plus-circle icon button

Grey by default, black on click/hover

Component: Link button with icon on left

Becomes a link button with an icon, and therefore should be link blue

Removing
Use in active editing modal/wizard/situation

Component: minus-circle

Grey by default, black on click/hover

 
Deleting
Use for things that have already been created

Component: trash

Grey by default, black on click/hover

 

Example 1: in Cost Management


Icons in links

Check the Buttons and links document for guidelines on when to use an external icon with a link, in cloud.redhat.com.