Jump to main content

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.

To view all available icons, visit the Example Icons page on Web Support. If you are unsure of how to insert an icon, visit the Inserting Icons help documentation on Web Support.

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.