Overview

Overview

Icons serve as an intuitive and visually engaging method to accentuate content, signify possible actions, or denote particular statuses, thereby minimising the cognitive effort required by users.

We've chosen to use the font-awesome light library for all icons across our Design System. Implementing a uniform set of functional, alert, and descriptive icons across all sites enhances user familiarity and consistency, contributing to a seamless user experience.

These icons are each associated with a specific function or concept and ensure predictability and reliability in user interactions. For instance, an envelope icon should consistently represent email, not a mailing address in a different context. This consistency allows users to trust that a specific icon will always signify the same action or concept, irrespective of its location on the site.

Font awesome light

Icons used in the Queensland Government are simple and recognisable and use the thin line style.

The Font Awesome Library light library is the preferred icon suite. It contains a large variety of quality icons and is already used extensively across government websites. The light collection consisting of over 1,800 icons with more continually being added.

If you wish to use this on your website, you may need to purchase your own licence.

Functional icons

Function icons are those that form part of our components and are the key functionality of the Design System. Functional icons are those that indicate actions and activities. These are reserved icons that need to be used with caution outside of their existing patterns and components.

Functional icons are implemented as SVGs and a sprite sheet. this is done in favour of using an icon font because it improves the performance, scalability, maintainability, and accessibility of your website or application.

Below is sample of function icons. See the implementation tab for the full list.

Preset sizes

We have 6 preset sizes for icons ranging from extra small (xs) to extra extra large (xxl) and a dedicated feature size for large or detailed icons. Feature icons use a background shade to help make it stand out from other elements on the page.

This size range allows for flexibility and adaptability in various design contexts while maintaining visual harmony and balance. These predefined sizes ensure that icons are proportionate and legible, enhancing their effectiveness and the overall aesthetic of the site.

Colour

Icons used for actions

Icons that are clickable should use secondary action colour. This allows them to be consistent with other action items on the site but differentiated from links and link text which ordinarily are the same as the primary action colour.

Decorative icons

Icons that are used to help convey information but aren't associated with actions are by default set to use the text-heading colour. This makes them stand out from content on the page but not in any way be clickable. As an alternative users can override these icons and use the sites brand accent colour, but care should be taken so that this doesn't make these icons appear interactive.

Alert icons

Icons used to represent alert information should use the appropriate colour, for example an icon used to represent an error should use the red error colour.

Usage guidelines

It's crucial that each icon serves a singular, functional purpose consistently across a site or service, reinforcing user understanding and interaction.

When to use icons

To aid understanding: Icons can act as visual aids to help users understand concepts, actions, or feedback. They can simplify complex ideas and make them easier to grasp.

To enhance navigation: Icons can be used in primary navigation to support way-finding. They can help users find their way around a website or application.

To draw attention: Icons can be used to draw attention to specific areas, actions, or information. They can be used in banners to highlight specific themes, such as announcements or errors.

To add clarity: Icons can be used inline with text to add clarity. They can help to clarify the content by providing a visual cue and improve the legibility and scalability of the user interface.

To represent actions, objects, or concepts: Icons can represent specific actions, objects, or concepts. They should be used when they can clearly represent a specific action or concept.

When to avoid icons

Avoid ambiguity: If the meaning of an icon is ambiguous by itself, it needs accompanying text. Icons shouldn't be used if they can lead to confusion or misinterpretation.

Avoid overuse: Overuse of icons can result in user interfaces that are visually overwhelming or distracting. Icons should be used sparingly and only when they add value to the user experience.

Don't use icons to replace text: Icons shouldn't be used to replace the name of a product or feature. The purpose of an icon is to clarify the content, not to replace it.

Compensating for page structure. Icons can't solve problems with a poorly organised page. They aren't a quick fix for a confusing layout or hard-to-find content. Before using an icon to highlight something important, make sure the content is well-structured and easy to find.

How to use

The following are some general best practice guidlines for using icons:

• sites benefit from all using the same default functional and alert icons
• while it's recommended that 'Font-awesome' be used for custom icons users may choose alternative icons if an appropriate option within font-awesome isn't available. Material icons may be a good alternative. When adding custom fonts though try to ensure they match the same visual weight and appearance as other icons on the site
• avoid having icons alone without text this is because they may be interpreted differently by different users
• use the same icons consistently across your site or app to maintain a familiar and intuitive user experience
• avoid redefining established icons. Icons that have been used for a long time worldwide have a higher chance of being recognise and understood quickly. Don't reinvent an icon that's already been accepted as the convention.