Iconography
Iconography can be a helpful design tool for adding visual interest and emphasis to a layout. Iconography can be used on all CU Boulder 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.
[Insert graphic: Too busy.]
[image alt text] Icons that are busy with lots of details.
Example 2: Too Stylized and Whimsical
Icons that are stylized and whimsical (like clip art) do not align with the CU Boulder 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.
[Insert graphic: Too stylized and whimsical.]
[image alt text] Icons with many style details.
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 Boulder visual style.
[Insert graphic: Too many fine details.]
[image alt text] Icons with fine details.
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.
[Insert graphic: Avoid mixing the use of line icons and solid icons in close proximity…]
[image alt text] Mix of icons that are solid and outlined.
[Insert graphic: Adjusting the previous example with some new icon choices…]
[image alt text] Icons that are outlined only.
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.
[Insert graphic: 192 pixels]
[image alt text] 192x192px grid.
[Insert graphic: Balancing line weights to be consistent]
[image alt text] Icons that have consistently balanced line weights.
[Insert graphic: No copy, but four graphics that have consistent line weight–house, grad cap, etc.]
[image alt text] Icons that have consistently balanced line weights.
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 Boulder 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.
Examples of Inaccessible Gold 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.
[Insert graphic: No text, but graphic of icons on three different backgrounds]
[image alt text] Icons on white, black and image backgrounds.
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. Gold filled icons can be used on a white background if they have black outlines.
[Insert graphic: No text, but graphic of icons with gradient gray to black]
[image alt text] Black and gray icons on white background.
Some resources for stock iconography and iconography inspiration include: the Noun Project, Font Awesome and Adobe Stock.