Using Icons
Icons work great to accompany text and set items apart on your pages. Long gone are the days of designing or browsing for the perfect icon—we have found that Google’s Material Icons fulfill many of our requirements and have made these available to you right inside OU Campus.
Icon styles
You can choose between three sizes and three colors when inserting icons, but before doing so, let’s cover some general guidelines to ensure they look great alongside your content.
facefaceface
UNC Blue
small, medium, large
facefaceface
UNC Gold
small, medium, large
Don't use blue icons on dark colored or blue backgrounds. They're perfect for white backgrounds. Stay away from gold icons if your background is butter or another similar color.
facefaceface
white
small, medium, large
facefaceface
white
small, medium, large
White icons are suitable for most dark backgrounds. If you can't find an appropriate icon color to use, please leave them out.
faceThe large icon over powers this small text.
Don't mix icon and text sizes. Be mindful of surrounding space.
Heading 3 motorcycle
Heading 4 directions_boat
Heading 5 gold local_pizza
Heading 6 android
Avoid using icons in headers. This is important for SEO and semantics.
Do it today!! local_mall face star
starstar star BUY NOW star star star
copyright Surf Science, 2016
Don't use icons sequentially, to create new styles, or when not needed.
Finding appropriate icons
The most important thing to remember is that icons should support your content, not replace it—when used properly, they should add additional value to your page and eliminate the need for your visitors to overthink the action they are about to take. Keeping this in mind, they also have the potential to confuse visitors. Don’t use icons strictly for navigation, rather use them to assist visitors by directing them to content they may find important.
To make sure you’re familiar with the available icons, it is important to review them before inserting on your pages. When you’re ready to insert an icon, use your best judgment. If you’re having trouble finding an icon, leave it out—we don’t want to confuse visitors.
Below is an example with icons used correctly.
To complete the FAFSA:
person_outline
Have your Federal Student Aid ID (FSA ID) ready
info_outline
Use UNC’s School Code 001349
compare_arrows
Expedite your application by using the IRS Data Retrieval Option
done
Apply at fafsa.gov
A note about accessibility
Thinking in terms of accessibility for our visitors using assistive technology, using appropriate icons becomes especially important. For example, the “event seat” icon might look like a plain old chair to you or me, but this might not make the most sense when placed next to information about a classroom to a visitor using a screen reader. Because screen readers rely on image descriptions to tell users what the image is (via alt-tags when inserting images), most screen readers will read the name of the icon you are using. Because the “group work” icon almost looks like a really gourmet pizza with extravagant toppings, this icon also has the potential to be misused. You are sure to find many icons like this, but using your best judgment is greatly appreciated.
