The purpose of icons is to communicate meaning  based on users' previous experience or understanding of an object, action or idea., 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 4.7.0 icon set and a custom UQ icon set.

We've standardised all icon classes to begin with 'icon' rather than 'fa' from the FontAwesome default. For example, change fa-adjust to icon-adjust

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.


Markup Result
<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.

Markup Result
<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


Markup Result
<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>