How to use icons
Why use icons
- To improve the visual interest of our pages
- To create a consistent experience
- To provide a quick visual indicator of topics
- To help site visitors scan pages and navigate quickly
How to choose good icons
Choose icons in one of two ways depending on the content.
- Icons that symbolize the topic of the content. For example: housing, stormwater, pets.
- Icons that symbolize the type of content. For example: report, application, initiative.
1. Icons that symbolize topics
Most often, you'll choose icons based on the topic of your content. This is what your content is about, not the format it takes.
Examples
- For an application for a rental license, the topic of the content is about rental housing or landlords. Some good icon choices could be a house or an apartment building.
- For a report about water quality, the topic is about drinking water or water utilities. Some good icon choices could be a water droplet or a glass.
2. Icons that symbolize types
In some cases you'll choose icons based on the type of your content. This could mean the format of a document, how the content is delivered, or even how site visitors interact with it.
Examples
- For the rental license application, the type of content is an application or a form. Some good icon choices could be a pencil, a piece of paper or a check box.
- For the water quality report, the type is a report or a document. Some good icon choices could be a bar chart or a list of items.
Icon background color
A few content types let you choose a background color for the icon. Choose a color based on the nature of the content.
City green
Use this color when your link goes to a sign-up form or other task-based action.
Purple
Use purple to call out secondary or supplemental content.
Accent yellow
Attract attention to your content with this background color. It works well for important announcements or notices.
Default (City blue)
When in doubt, use the default. This color works for all types of content.
Best practices
- Choose icons based on simple high-level topics expressed in plain language. This will speed up your icon search.
- Don't worry about exact matches. Our icons are meant to be decorative, so high-level matches between your content and your icon are OK.
- Focus on objects instead of people. Objects are easier for site visitors to recognize and understand.
Finding icons
Search the library
The quickest way to find icons is to look through Font Awesome's icon library. Icon names are generally nouns that describe the subject of the icon.
If you have a topic, try to search for an object that may be related. For example, when linking to something about food, try searching for different types of food like bread, egg, sandwich, pizza or soup.
Request new icons
To keep the list manageable, not all Font Awesome icons are available for the site. Contact the Digital Services team if you find an icon on the Font Awesome website and don't see it in our media library.
Common icons
Here are some common icons to get you started. Each tile includes the name of the icon and typical things it can be used for. Try not to use an icon more than once on a page.
Find an icon by typing the name in the filter bar in the T4 icon folder. You can find this under Site Assets > Icons.
Resources
CMS documentation
Accessibility
Help us improve
Send feedback to the Digital Services Team.