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 regular style for all icons if available. If a custom icon is required please please email City-Marketing.
When it’s not clear what an icon represents, the icon immediately loses its meaning and becomes distracting.
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.
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.
Icons should be legible and clear at sizes as small as 15px x 15px.
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.
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:
- 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.
titleattribute on the icon to provide a tooltip for sighted mouse users.
Time to destination by car: 4 minutes
Icon links or buttons
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.