GEM's iconography conveys essential meanings through simplified design.

Icons are graphic representations that signal key information to readers. They help readers locate different sections of content, making pages more scannable. The icons in GEM's library are carefully crafted for clarity and consistency.

Functional and Illustrative uses

Functional usage means the icon is being used to enable an action. Icons have contrasting hover states to show that they are clickable. Text labels should explain what functional icons do, rather than what they look like. Illustrative usage means the icon is an informative image, and is not clickable. Illustrative icons are not just decorative - they must add user value by clearly communicating an idea.
default
hover
Hover State
default

Functional usage rules

  • make it easier to scan content
  • clearly communicate an idea or object
  • are not used decoratively
  • may be reinforced by accompanying text.

Illustrative usage rules

  • clearly communicate an idea or object
  • must have a text label
  • are reinforced by accompanying text
  • are not used decoratively.
  • How to apply
  • Scholarships
  • Entry pathways
  • Higher degrees
  • Research

Ranked among the top 1% worldwide

Description goes here

Sizes

Icons in the GEM library are reduced to minimalist forms to ensure they are clearly recognisable at a range of sizes. Functional icons are 18, 24 or 36 pixels in size. Illustrative icons are either 40 or 80 pixels in size.

18px

Small size for functional usage

24px

Medium size for functional usage

36px

Large size for functional usage

40px

Minimum size for Illustrative usage only

80px

Maximum size for Illustrative usage only

Icon anatomy

Geometric shapes are used consistently as building blocks in icon design, creating a sense of visual unity across the icon library. GEM icons are simple and legible.
  • 1. Stroke terminal
  • 2. Corner
  • 3. Counter area
  • 4. Stroke
  • 5. Counter stroke
  • 6. Bounding area
UI Icon Anatomy

Stroke weights and ends

Strokes and counter-strokes should always be 2 pixels in width. This includes curves and angles, interior and exterior.

18px

24px

36px

All icons have a stroke weight of 2px

UI Round Stroke

Icons should favour rounded stroke ends over square stroke ends

Recurring elements

GEM icons use common shapes in specific sizes, for greater consistency. The icons below all use circles in either 4, 10 or 20 pixel sizes.

4px

10px

20px

Colour

Icons appear as either coloured lines against a blank background, or white lines against a coloured background.

Best practice

Icons are far easier for users to understand if they are familiar and recognisable. Use icons in consistent ways, and prioritise using the existing GEM library. These icons guidelines are here to help you avoid the most common mistakes when tasked with creating them and if you need to create a new icon, here are some dons and don'ts.

Best Practice Do no.1
Do

When creating icons, use 2px only for the stroke weight.
Best Practice Don't no.1
Don't

When creating new logos, avoid fills.

Best Practice Do no.2
Do

Stroke close up: Do use rounded stroke-ends
Best Practice Don't no.2
Don't

Do not mix or stroke weights other than 2px.
Best Practice Do no.3
Do

Do position icons ‘on pixels’ W - 100 H - 80.
Best Practice Don't no.3
Don't

Do not place icons on a coordinate that is not ‘on pixel’ W-101.75 H - 81.4.
View colour guidelines View typography guidelines