Iconography
Iconography can be a helpful design tool for adding visual interest and emphasis to a layout. Iconography can be used on all CU ΊωΒ«ΝήΚΣΖ΅ platforms, including digital, social, print, web and video. Please note that icons cannot be used to brand an individual group or department, and they cannot be used as logos or as part of a type treatment.Μύ
Quick Tips
- Use one-line (unfilled) icons primarily.
- Icons should use a consistent line weight when displayed as a group or within the same document. Make adjustments to stock icons to maintain consistency.
- Do not use iconography as a headline element or hero image. Icons should be used to support body content and infographics.
- Do not use gold icons on a white backgroundβthis is not accessible.
- Only use gold icons on a black background or a background with sufficient contrast for accessibility.
Solid icons may work better than line icons when placed over images. Solid icons may be useful where line icons are not as easily legible, such as when they are used at a smaller scale or on branded merchandise.Μύ
Here are some examples showing style qualities we want to avoid when designing icons or sourcing them from stock.
Example 1: Too Busy
The icons have too many detailed elements, which can make them hard to interpret and to become inaccessible when used at small scale.Μύ
Μύ
Example 2: Too Stylized and Whimsical
Icons that are stylized and whimsical (like clip art) do not align with the CU ΊωΒ«ΝήΚΣΖ΅ iconography style. In these examples, elements like stars, confetti and speed lines are extraneous fine details that stand out and look visually inconsistent when used with in-style icons.Μύ
Example 3: Too Many Fine Details
Icons with fine details, edges and organic shapes are not accessible when printed or viewed at small scale. In the above examples, the icons with plant shapes could be simplified to show one leaf or a smaller group of leaves so that they visually align and balance with other icons that are in CU ΊωΒ«ΝήΚΣΖ΅ visual style.
`
Μύ
Μύ
Μύ
Avoid mixing the use of line icons and solid icons near each other. Do not alternate line icons and solid icons inside of a single content section.
Μύ
Please refer to the 192x192px grid in which icons can be designed and scaled with visual consistency. Using an 8px square in this grid as a reference point, stock icons can be adjusted to match this line weight. When all icons have the same line weight, they appear more consistent and balanced.
Μύ
Μύ
When using iconography, be mindful of the scale of the icon in the final application.
- For print, icons should range in size (using a square for reference) from 5/16β to 3/4β (.3125in to .75in).
- For digital applications, icons should range in size from 72px to 200px.
In some large format applications, icons might need to be placed at a larger scale, but for the majority of CU ΊωΒ«ΝήΚΣΖ΅ design work, these listed dimensions should be used. If icons are being used at a small scale in a print asset, be sure to make a test print or check a proof for icon legibility.
Do's & Don't for Accessible Icons
Do not use solid gold icons on a white background. Gold icons will be most accessible on black or darker colored backgrounds. Gold icons might not be accessible when placed over certain images or color backgrounds with insufficient contrast.Μύ
Examples of Accessible Icon Use on White
For both line icons and solid icons, black and gray will be the most accessible icon color to use on a white or light color background.
Μύ