Design
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 icon library below.
If you require additional icons, you can find them at Material Symbols.
Our icon library
Copy the code
Click an icon to copy the example HTML code to your clipboard.
Update the placeholder code
Replace the placeholder URL and file path (https://your-website.com.au/?a=169317:dist/mysource_files/img/) with the actual path to your hosted icons file.
Arrows
Arrow up
Arrow down
Arrow left
Arrow right
View all
Chevron up
Chevron down
Chevron left
Chevron Right
Functional icons
Attach
Calendar
Close
Copy
Delete or remove
Direction Up Down, sort
Download
Edit or change
Enlarge
Favourite
Filter
Global navigation
Hide
Home
Language
Like
Location
Log in
Log out
Manage accounts
Menu
Minus, subtract or descrease
More vertical
More horizontal
Pause
Play
Plus or add
Refresh
Save
Search
Settings
Share
Show
Sort alphabetically
Stop
Tick, success or confirmed
Upload
Zoom
Descriptive icons
Accessibility
Announcement
Article
Audio
Car
Chart
Time, clock or duration
Code
Cost, money or dollar
Design
Directions
Document
Document error
Document pdf
Document word
Document spreadsheet
External link
Help
Identity
Identity face
Image
Links
Lock
Lock open
Mail or email
Microphone
Notifications
Notification circle
Op ed
Parking
Pending
Phone
Podcast
Profile
Speech
Spreadsheet
Transcript
Users
Video
Wheelchair
Status and alert icons
Cancel
Danger
Error
Information
Maintenance
Success
Warning
Cancel filled
Danger filled
Error filled
Information filled
Maintenance filled
Success filled
Warning filled
Social icons
X (Twitter)
YouTube
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.