Iconography

Designing

All icons used to build components are included in the Figma UI Kit. However, you can also see all icons that are included in our symbol library below.

If you require additional icons, you can find them at https://fontawesome.com/search or https://fonts.google.com/icons.

Symbol library

Functional icons

Descriptive icons

Status and alert icons

Research and rationale

Why we use SVGs with symbols for our default icons:

Our Design System uses an approach very similar to the USA Design System incorporating all our icons in a single SVG sprite sheet.

This method offers numerous advantages:

• reducing the number of HTTP requests, improving load times and overall system performance
• SVGs are scalable and resolution-independent, allowing for easy resizing without quality loss
• SVGS can be easily manipulated with CSS and JavaScript, providing a high degree of flexibility and control
• a single file for all SVGs simplifies maintenance and updates to the symbol library, enhancing efficiency
• mitigates the risks associated with icon fonts, which can fail due to cross-domain loading issues, font file loading failures, and browser bugs.

This strategy results in a more efficient, manageable, and dependable Design System, enhancing both the user experience and the development process.

Why we are moving to material icons

There are 4 key reasons why we promote material icons as the recommended icon library for our Design System, consistency, versatility, accessibility and cost.

Consistency

Google Material Icons are designed with a consistent aesthetic in mind. This means that all the icons share the same visual language, which can help to create a cohesive look and feel across your Design System. This consistency can also make it easier for users to understand and interact with your system.

Versatility

Google Material Icons come in a variety of styles and themes, making it easy to find an icon that fits your specific needs. They're also scalable, meaning they can be easily resized without losing quality.

Accessibility

Google Material Icons are designed with accessibility in mind. They use simple, clear designs that are easy to understand, even for users with visual impairments. They also support screen readers and other assistive technologies, making them accessible to a wide range of users.

Cost

Google Material icons are released under the Apache License Version 2.0, which allows you to freely use, modify, and distribute them. This means there aren't licensing issues for sites that choose to use our Design System.

Adding icons using our Design System

Our Design System provides a streamlined way to add icons to your web pages. Here are step-by-step instructions:

Step 1: add SVG element

Start by adding an SVG (Scalable Vector Graphics) element to your HTML. This is where the icon will be displayed.

Step 2: apply classes for styling and size

There are 2 classes you should add to the SVG element:

• qld__icon: this class is necessary for the basic visual appearance of the icon, it also tell the icon what colour to be depending on if it sits within a link element and also based on what background it appears on
• qld__icon--size: this class determines the size of the icon. Replace size with one of the following: sx, s, m, l, xl, xxl.

Step 3: add an aria-label and role for accessibility

Inside the SVG element, add role="img" and an aria-label that describes the icons function. This is important for accessibility, however it should only be added if:

• the icon has a function
• the aria label does not duplicate any text used alongside the icon

If an icon is decorative it does not need an aria-label.

Step 4: use element to reference icon

Inside the SVG element, after the title, add an element. The href attribute should point to the URL of the SVG sprite sheet, and you should include the ID of the icon you want to display after the #.

In the example below, icon-Profile is the ID of the icon. Make sure to replace it with the ID of the icon you want to use.

Adding icons associated with text or links

When incorporating icons that are closely associated with text or links, the following steps should be taken.

Step 1: add SVG element inside the link element

Similar to the standalone icons, you’ll add an SVG element. But in this case, the SVG element will be nested inside an anchor <a> element.

Step 2: apply the appropriate classes for positioning

Along with the previously mentioned classes, you need to use one additional class to determine the position of the icon with respect to the text.

• qld__icon--lead: use this class if the icon is placed before the text.
• qld__icon--trail: use this class if the icon is placed after the text.

Step 3: add role and aria label if necessary

In most situations a functional icon will always be accompanied by text describing its action.  In these situations you do not need to add any additional labels or alt text as this would cause duplicate text being read out by screen readers.

In the first example below, the icon is used as a leading element before the text "Close". The SVG has the class qld__icon--lead which ensures it's placed before the text. The icon does not require an aria label describing its action.

In the second example, the icon is used alone without supporting  text. In this situation the word "Close" is included in the aria-label for the icon. The role "img" is added to the icon to ensure it is identified correctly.

Accessibility consideration

When icons are used alongside text or within actionable elements like links or buttons, no aria-label is necessary. This is because you want to ensure screen readers don't read out an action twice. The text next the icon should be sufficient for understanding the action.

When adding icons that are associated with text or links, it’s essential to ensure they're positioned correctly using qld__icon--lead or qld__icon--trail, and that they don't interfere with the accessibility of the text.

Leading icons are for reinforce the meaning of a label or button, indicating what action will be performed, such as a "play" icon before a "Play" button.  Leading icons also guide the user's attention and establish a visual hierarchy, making it easier to scan lists or menus. This is especially useful in navigation menus where icons can represent categories.

Trailing icons are often used to suggest that more options are available or that the content will lead somewhere else.

Replacing or updating icons

You can modify, update or add icons by updating the symbol library in the SVG file. You can also choose to use either the Google Material icon symbols library or font-awesome library by simply changing the source icon file. Please note if you choose to use font-awesome on your site you'll need to have an active licence for font-awesome 6.

Google Material Icons

Font-Awesome Icons

Classes, variables and icon IDs

Classes and variables

Icon IDs (standard icons)

Status Icons

Social icons

Accessible icon requirements

When it comes to accessibility, the Web Content Accessibility Guidelines (WCAG) 2.1 provide several guidelines related to icons:

Our default icons have already been designed to meet accessibility requirements for Level AA compliance. However, keep these considerations in mind if you're modifying the Design System or creating a custom component

WCAG guidelines

1.4.1 Non-text Contrast

The visual presentation of user interface components, graphical objects, and icons must have a contrast ratio of at least 3:1 against adjacent color(s).

1.4.3 Content on Hover or Focus (Level AA)

If pointer hover or keyboard focus can trigger additional content to become visible (such as tooltip icons), this additional content should be dismissible, hoverable, and persistent to be accessible.

1.3.3 Sensory Characteristics

Instructions provided for understanding and operating icons must not rely solely on sensory characteristics such as shape, size, visual location, or sound.

2.4.4 Link Purpose (In Context)

If an icon serves as a link, the purpose of the link should be determinable from the icon alone or from the icon and its programmatically associated text.

2.4.7 Focus Visible

If an icon is actionable, it should have a clearly visible focus indicator when it receives keyboard focus.

2.5.5 Target Size

(Level AAA, but recommended for better accessibility at AA)

If an icon is used as a control, the size of the target for pointer inputs should be at least 44 by 44 CSS pixels, unless there's an equivalent link or control on the same page that is easier to use. Note that this guideline is technically Level AAA, but it's highly recommended for better accessibility even at Level AA.

It's also good practice to provide alternative text (alt text) for icons, especially if they convey information or have a function, to make them accessible to screen reader users. This doesn't have a specific WCAG guideline but it's a general best practice for accessibility.

4.1.2 Name, Role, Value

For icons that are interactive or convey information, these icons must be programmatically determined with a name that can be spoken by screen readers, and the role (e.g. button) and current value (e.g. pressed) should be programmatically set.