Icon colors when alone or paired with text
Problem
Icon colors are inconsistent because there is no guidance. We should define logic for deciding how to color icons in these situations:
- Presented alone (primary, secondary, tertiary variations)
- In buttons and badges (alone and with text, in the different color variations)
- Near text (primary, secondary, tertiary variations)
Solution
Use this logic when applying color to text and icons (when alone or paired with text):
- Text uses a shade of color that is dark enough to pass WCAG AA for large text (see Accessibility section of our Colors guidelines) when over a light background of the same color.
- Icons when alone use the same shade of the text color. However, there are some exceptions for disabled (very light gray), success (green), and warning (orange) as these are more problematic colors, where using the same shade of the text color would make the icon too heavy or the color too dark so it would lose its meaning. For these exceptions, a slightly lighter shade of the text color is used.
-
Icons paired with text use a lighter shade of the text color so they are balanced with the text and have the same visual weight. This is because, by nature, icons are visually heavier than text if using the same shade of color (e.g.
500
for both icon and text). There isn't a standard “gap” between icon and text shades, it depends from color to color (sometimes it's just one shade apart, other times two or three).
Example(s)
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Read our contribution guidelines, especially the For GitLabbers section. -
Create a Sketch file in your progress folder just for this pattern and make sure that: -
You have not created a duplicate of an existing pattern, symbol, layer style, or text style. -
You have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Typography uses text styles. When applicable, colors use shared styles.
-
-
Ask a UXer to review your Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. -
QA of your Sketch file by the reviewer. -
Add your changes to the pattern library. When copying things over, watch out for duplicated symbols, layer styles, and text styles. Some of our recommended plugins can help you find and remove duplicates. -
QA of pattern library by the reviewer. -
Create an issue in the Design System to add the pattern documentation. Mark it as related to this issue. -
Add an agenda item to the next UX weekly call to inform everyone (if it's a new pattern, not yet used in the application).
Edited by Pedro Moreira da Silva