Iconography

Icons help symbolize commands, navigation, utility, or common actions and provide additional visual context and enhance usability. Icons should be simple, yet bold enough to grab attention and leave a lasting impression.

FontAwesome Pro is the approved icon set to be used for all web properties. For consistency use the light style for all icons if available. If a custom icon is required please please email City-Marketing.

Best practices

Icons should be familiar

When it’s not clear what an icon represents, the icon immediately loses its meaning and becomes distracting.

Don’t pair icons with conflicting meaning

Icons that could represent multiple things should be avoided. For example, the ‘Heart’ and the ‘Star’ icons can both mean liking or saving an item as a favourite. When used together they can confuse users.

Use labels

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Ensure legibility at various sizes

Icons should be legible and clear at sizes as small as 15px x 15px.

Accessibility

Decorative icons

Decorative icons are only being used for visual or branding reinforcement. If they were removed from the page, users would still understand and be able to use your page. If your icons are purely decorative, you’ll need to manually add an aria-hidden attribute to each of your icons so they’re accessible.

<i class="far fa-smile-beam" aria-hidden="true"></i>

Semantic Icons

Semantic icons are ones that you’re using to convey meaning, rather than just pure decoration. This includes icons without text next to them used as interactive controls — buttons, form elements, toggles, etc. If your icons have semantic meaning, you’ll need to manually add a few things so that your icon is appropriately accessible:

  • aria-hidden attribute.
  • Provide a text alternative inside a <span> (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.
  • title attribute on the icon to provide a tooltip for sighted mouse users.

Time to destination by car: 4 minutes 

<i aria-hidden="true" class="far fa-car" title="Time to destination by car"></i>
<span class="sr-only">Time to destination by car:</span>
<span>4 minutes</span>

In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span> or similar. For instance, simply adding the aria-label attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title attribute or a custom tooltip solution.

<a class="icon-only-link" href="#" aria-label="Search City of Winnipeg" title="Search City of Winnipeg">
  <span class="fas fa-search" aria-hidden="true"></span>
</a>