The purpose of icons is to communicate meaning  based on users' previous experience or understanding of an object, action or idea. https://www.nngroup.com/articles/icon-usability/, 21 July 2016

Our icons are font icons which means they are controlled by the font size and colour of the HTML element they are attached to. It also means they will respond on mobile devices the same as text.

Available icons

We use the FontAwesome icon set and a custom UQ icon set.

FontAwesome reference set

Note: You will need to replace the "fa" at the start of these icons with our modified version "icon". 

Example: fa-adjust to icon-adjust

UQ reference set

Using icons

Icons are made with at least 2 classes:

  • icon - defines the element to be an icon.
  • icon-search - defines which icon to use. 'search' is replaced with whichever icon name you want to use.

Examples

<span class="icon icon-search"></span>
<a class="icon icon-search" href=""></a>  

Combining icons with other styles

Icons can be used on a range of HTML elements and combined with other styles such as buttons.

<a class="button" href=""><span class="icon icon-search"> </span></a>  
<a class="button" href=""><span class="icon icon-search icon--prefix"></span>Search</a> Search

Icons attached to HTML elements with text can be placed at the start or end of the element using the modifier classes:

  • icon--prefix
  • icon--suffix

Larger icons

Icons can be increased in size using these modifier classes:

  • icon-2x
  • icon-3x
  • icon-4x
  • icon-5x

Examples

<span class="icon icon-search icon-2x"></span>
<span class="icon icon-search icon-3x"></span>
<span class="icon icon-search icon-4x"></span>
<span class="icon icon-search icon-5x"></span>