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 text | With 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.