Iconography
Functional Icons
Arrow Left
<i class="ico ico--sm ico--f-arrow-l"></i>
<i class="ico ico--md ico--f-arrow-l"></i>
<i class="ico ico--lg ico--f-arrow-l"></i>
Arrow Right
<i class="ico ico--sm ico--f-arrow-r"></i>
<i class="ico ico--md ico--f-arrow-r"></i>
<i class="ico ico--lg ico--f-arrow-r"></i>
Arrow Up
<i class="ico ico--sm ico--f-arrow-u"></i>
<i class="ico ico--md ico--f-arrow-u"></i>
<i class="ico ico--lg ico--f-arrow-u"></i>
Arrow Down
<i class="ico ico--sm ico--f-arrow-d"></i>
<i class="ico ico--md ico--f-arrow-d"></i>
<i class="ico ico--lg ico--f-arrow-d"></i>
Blocked
<i class="ico ico--sm ico--f-blocked"></i>
<i class="ico ico--md ico--f-blocked"></i>
<i class="ico ico--lg ico--f-blocked"></i>
Calendar
<i class="ico ico--sm ico--f-calendar"></i>
<i class="ico ico--md ico--f-calendar"></i>
<i class="ico ico--lg ico--f-calendar"></i>
Caret Left
<i class="ico ico--sm ico--f-caret-l"></i>
<i class="ico ico--md ico--f-caret-l"></i>
<i class="ico ico--lg ico--f-caret-l"></i>
Caret Right
<i class="ico ico--sm ico--f-caret-r"></i>
<i class="ico ico--md ico--f-caret-r"></i>
<i class="ico ico--lg ico--f-caret-r"></i>
Caret Up
<i class="ico ico--sm ico--f-caret-u"></i>
<i class="ico ico--md ico--f-caret-u"></i>
<i class="ico ico--lg ico--f-caret-u"></i>
Caret Down
<i class="ico ico--sm ico--f-caret-d"></i>
<i class="ico ico--md ico--f-caret-d"></i>
<i class="ico ico--lg ico--f-caret-d"></i>
Chevron Left Large
<i class="ico ico--sm ico--f-chevron-l-l"></i>
<i class="ico ico--md ico--f-chevron-l-l"></i>
<i class="ico ico--lg ico--f-chevron-l-l"></i>
Chevron Left Small
<i class="ico ico--sm ico--f-chevron-l-s"></i>
<i class="ico ico--md ico--f-chevron-l-s"></i>
<i class="ico ico--lg ico--f-chevron-l-s"></i>
Chevron Right Large
<i class="ico ico--sm ico--f-chevron-r-l"></i>
<i class="ico ico--md ico--f-chevron-r-l"></i>
<i class="ico ico--lg ico--f-chevron-r-l"></i>
Chevron Right Small
<i class="ico ico--sm ico--f-chevron-r-s"></i>
<i class="ico ico--md ico--f-chevron-r-s"></i>
<i class="ico ico--lg ico--f-chevron-r-s"></i>
Chevron Up Large
<i class="ico ico--sm ico--f-chevron-u-l"></i>
<i class="ico ico--md ico--f-chevron-u-l"></i>
<i class="ico ico--lg ico--f-chevron-u-l"></i>
Chevron Up Small
<i class="ico ico--sm ico--f-chevron-u-s"></i>
<i class="ico ico--md ico--f-chevron-u-s"></i>
<i class="ico ico--lg ico--f-chevron-u-s"></i>
Chevron Down Large
<i class="ico ico--sm ico--f-chevron-d-l"></i>
<i class="ico ico--md ico--f-chevron-d-l"></i>
<i class="ico ico--lg ico--f-chevron-d-l"></i>
Chevron Down Small
<i class="ico ico--sm ico--f-chevron-d-s"></i>
<i class="ico ico--md ico--f-chevron-d-s"></i>
<i class="ico ico--lg ico--f-chevron-d-s"></i>
Close
<i class="ico ico--sm ico--f-close"></i>
<i class="ico ico--md ico--f-close"></i>
<i class="ico ico--lg ico--f-close"></i>
Close Small
<i class="ico ico--sm ico--f-close-s"></i>
<i class="ico ico--md ico--f-close-s"></i>
<i class="ico ico--lg ico--f-close-s"></i>
Close Cirlce
<i class="ico ico--sm ico--f-close-circle"></i>
<i class="ico ico--md ico--f-close-circle"></i>
<i class="ico ico--lg ico--f-close-circle"></i>
Copy
<i class="ico ico--sm ico--f-copy"></i>
<i class="ico ico--md ico--f-copy"></i>
<i class="ico ico--lg ico--f-copy"></i>
Download
<i class="ico ico--sm ico--f-download"></i>
<i class="ico ico--md ico--f-download"></i>
<i class="ico ico--lg ico--f-download"></i>
<i class="ico ico--sm ico--f-facebook"></i>
<i class="ico ico--md ico--f-facebook"></i>
<i class="ico ico--lg ico--f-facebook"></i>
Fees
<i class="ico ico--sm ico--f-fees"></i>
<i class="ico ico--md ico--f-fees"></i>
<i class="ico ico--lg ico--f-fees"></i>
File
<i class="ico ico--sm ico--f-file"></i>
<i class="ico ico--md ico--f-file"></i>
<i class="ico ico--lg ico--f-file"></i>
Fullscrean
<i class="ico ico--sm ico--f-fullscrean"></i>
<i class="ico ico--md ico--f-fullscrean"></i>
<i class="ico ico--lg ico--f-fullscrean"></i>
<i class="ico ico--sm ico--f-google"></i>
<i class="ico ico--md ico--f-google"></i>
<i class="ico ico--lg ico--f-google"></i>
Hamburger
<i class="ico ico--sm ico--f-hamburger"></i>
<i class="ico ico--md ico--f-hamburger"></i>
<i class="ico ico--lg ico--f-hamburger"></i>
Help
<i class="ico ico--sm ico--f-help"></i>
<i class="ico ico--md ico--f-help"></i>
<i class="ico ico--lg ico--f-help"></i>
Information
<i class="ico ico--sm ico--f-information"></i>
<i class="ico ico--md ico--f-information"></i>
<i class="ico ico--lg ico--f-information"></i>
<i class="ico ico--sm ico--f-instagram"></i>
<i class="ico ico--md ico--f-instagram"></i>
<i class="ico ico--lg ico--f-instagram"></i>
<i class="ico ico--sm ico--f-linkedin"></i>
<i class="ico ico--md ico--f-linkedin"></i>
<i class="ico ico--lg ico--f-linkedin"></i>
Location
<i class="ico ico--sm ico--f-location"></i>
<i class="ico ico--md ico--f-location"></i>
<i class="ico ico--lg ico--f-location"></i>
Lock
<i class="ico ico--sm ico--f-lock"></i>
<i class="ico ico--md ico--f-lock"></i>
<i class="ico ico--lg ico--f-lock"></i>
<i class="ico ico--sm ico--f-mail"></i>
<i class="ico ico--md ico--f-mail"></i>
<i class="ico ico--lg ico--f-mail"></i>
Meatball
<i class="ico ico--sm ico--f-meatball"></i>
<i class="ico ico--md ico--f-meatball"></i>
<i class="ico ico--lg ico--f-meatball"></i>
Minus
<i class="ico ico--sm ico--f-minus"></i>
<i class="ico ico--md ico--f-minus"></i>
<i class="ico ico--lg ico--f-minus"></i>
Mobile
<i class="ico ico--sm ico--f-mobile"></i>
<i class="ico ico--md ico--f-mobile"></i>
<i class="ico ico--lg ico--f-mobile"></i>
Open
<i class="ico ico--sm ico--f-open"></i>
<i class="ico ico--md ico--f-open"></i>
<i class="ico ico--lg ico--f-open"></i>
Pause
<i class="ico ico--sm ico--f-pause"></i>
<i class="ico ico--md ico--f-pause"></i>
<i class="ico ico--lg ico--f-pause"></i>
Play
<i class="ico ico--sm ico--f-play"></i>
<i class="ico ico--md ico--f-play"></i>
<i class="ico ico--lg ico--f-play"></i>
Plus
<i class="ico ico--sm ico--f-plus"></i>
<i class="ico ico--md ico--f-plus"></i>
<i class="ico ico--lg ico--f-plus"></i>
Phone
<i class="ico ico--sm ico--f-phone"></i>
<i class="ico ico--md ico--f-phone"></i>
<i class="ico ico--lg ico--f-phone"></i>
Search
<i class="ico ico--sm ico--f-search"></i>
<i class="ico ico--md ico--f-search"></i>
<i class="ico ico--lg ico--f-search"></i>
Settings
<i class="ico ico--sm ico--f-settings"></i>
<i class="ico ico--md ico--f-settings"></i>
<i class="ico ico--lg ico--f-settings"></i>
Sound
<i class="ico ico--sm ico--f-sound"></i>
<i class="ico ico--md ico--f-sound"></i>
<i class="ico ico--lg ico--f-sound"></i>
Tick
<i class="ico ico--sm ico--f-tick"></i>
<i class="ico ico--md ico--f-tick"></i>
<i class="ico ico--lg ico--f-tick"></i>
Tick Circle
<i class="ico ico--sm ico--f-tick-circle"></i>
<i class="ico ico--md ico--f-tick-circle"></i>
<i class="ico ico--lg ico--f-tick-circle"></i>
Time
<i class="ico ico--sm ico--f-time"></i>
<i class="ico ico--md ico--f-time"></i>
<i class="ico ico--lg ico--f-time"></i>
<i class="ico ico--sm ico--f-twitter"></i>
<i class="ico ico--md ico--f-twitter"></i>
<i class="ico ico--lg ico--f-twitter"></i>
User
<i class="ico ico--sm ico--f-user"></i>
<i class="ico ico--md ico--f-user"></i>
<i class="ico ico--lg ico--f-user"></i>
Youtube
<i class="ico ico--sm ico--f-youtube"></i>
<i class="ico ico--md ico--f-youtube"></i>
<i class="ico ico--lg ico--f-youtube"></i>
Illustrative Icons
Alert
<i class="ico ico--i ico--i-alert"></i>
<i class="ico ico--lg ico--i ico--i-alert"></i>
Apple
<i class="ico ico--i ico--i-apple"></i>
<i class="ico ico--lg ico--i ico--i-apple"></i>
Bed
<i class="ico ico--i ico--i-bed"></i>
<i class="ico ico--lg ico--i ico--i-bed"></i>
bike
<i class="ico ico--i ico--i-bike"></i>
<i class="ico ico--lg ico--i ico--i-bike"></i>
book
<i class="ico ico--i ico--i-book"></i>
<i class="ico ico--lg ico--i ico--i-book"></i>
building
<i class="ico ico--i ico--i-building"></i>
<i class="ico ico--lg ico--i ico--i-building"></i>
bus
<i class="ico ico--i ico--i-bus"></i>
<i class="ico ico--lg ico--i ico--i-bus"></i>
calendar
<i class="ico ico--i ico--i-calendar"></i>
<i class="ico ico--lg ico--i ico--i-calendar"></i>
car
<i class="ico ico--i ico--i-car"></i>
<i class="ico ico--lg ico--i ico--i-car"></i>
chart
<i class="ico ico--i ico--i-chart"></i>
<i class="ico ico--lg ico--i ico--i-chart"></i>
coffee
<i class="ico ico--i ico--i-coffee"></i>
<i class="ico ico--lg ico--i ico--i-coffee"></i>
computer
<i class="ico ico--i ico--i-computer"></i>
<i class="ico ico--lg ico--i ico--i-computer"></i>
domestic
<i class="ico ico--i ico--i-domestic"></i>
<i class="ico ico--lg ico--i ico--i-domestic"></i>
emissions
<i class="ico ico--i ico--i-emissions"></i>
<i class="ico ico--lg ico--i ico--i-emissions"></i>
exercise
<i class="ico ico--i ico--i-exercise"></i>
<i class="ico ico--lg ico--i ico--i-exercise"></i>
female
<i class="ico ico--i ico--i-female"></i>
<i class="ico ico--lg ico--i ico--i-female"></i>
flag
<i class="ico ico--i ico--i-flag"></i>
<i class="ico ico--lg ico--i ico--i-flag"></i>
flexible
<i class="ico ico--i ico--i-flexible"></i>
<i class="ico ico--lg ico--i ico--i-flexible"></i>
gallery
<i class="ico ico--i ico--i-gallery"></i>
<i class="ico ico--lg ico--i ico--i-gallery"></i>
handleaf
<i class="ico ico--i ico--i-handleaf"></i>
<i class="ico ico--lg ico--i ico--i-handleaf"></i>
handshake
<i class="ico ico--i ico--i-handshake"></i>
<i class="ico ico--lg ico--i ico--i-handshake"></i>
hat
<i class="ico ico--i ico--i-hat"></i>
<i class="ico ico--lg ico--i ico--i-hat"></i>
headset
<i class="ico ico--i ico--i-headset"></i>
<i class="ico ico--lg ico--i ico--i-headset"></i>
health
<i class="ico ico--i ico--i-health"></i>
<i class="ico ico--lg ico--i ico--i-health"></i>
heart
<i class="ico ico--i ico--i-heart"></i>
<i class="ico ico--lg ico--i ico--i-heart"></i>
house
<i class="ico ico--i ico--i-house"></i>
<i class="ico ico--lg ico--i ico--i-house"></i>
info
<i class="ico ico--i ico--i-info"></i>
<i class="ico ico--lg ico--i ico--i-info"></i>
international
<i class="ico ico--i ico--i-international"></i>
<i class="ico ico--lg ico--i ico--i-international"></i>
laptop
<i class="ico ico--i ico--i-laptop"></i>
<i class="ico ico--lg ico--i ico--i-laptop"></i>
lightbulb
<i class="ico ico--i ico--i-lightbulb"></i>
<i class="ico ico--lg ico--i ico--i-lightbulb"></i>
location
<i class="ico ico--i ico--i-location"></i>
<i class="ico ico--lg ico--i ico--i-location"></i>
lock
<i class="ico ico--i ico--i-lock"></i>
<i class="ico ico--lg ico--i ico--i-lock"></i>
<i class="ico ico--i ico--i-mail"></i>
<i class="ico ico--lg ico--i ico--i-mail"></i>
male
<i class="ico ico--i ico--i-male"></i>
<i class="ico ico--lg ico--i ico--i-male"></i>
medal
<i class="ico ico--i ico--i-medal"></i>
<i class="ico ico--lg ico--i ico--i-medal"></i>
medical
<i class="ico ico--i ico--i-medical"></i>
<i class="ico ico--lg ico--i ico--i-medical"></i>
message
<i class="ico ico--i ico--i-message"></i>
<i class="ico ico--lg ico--i ico--i-message"></i>
mobile
<i class="ico ico--i ico--i-mobile"></i>
<i class="ico ico--lg ico--i ico--i-mobile"></i>
movie
<i class="ico ico--i ico--i-movie"></i>
<i class="ico ico--lg ico--i ico--i-movie"></i>
opera
<i class="ico ico--i ico--i-opera"></i>
<i class="ico ico--lg ico--i ico--i-opera"></i>
pencil
<i class="ico ico--i ico--i-pencil"></i>
<i class="ico ico--lg ico--i ico--i-pencil"></i>
people
<i class="ico ico--i ico--i-people"></i>
<i class="ico ico--lg ico--i ico--i-people"></i>
plane
<i class="ico ico--i ico--i-plane"></i>
<i class="ico ico--lg ico--i ico--i-plane"></i>
powerpoint
<i class="ico ico--i ico--i-powerpoint"></i>
<i class="ico ico--lg ico--i ico--i-powerpoint"></i>
present
<i class="ico ico--i ico--i-present"></i>
<i class="ico ico--lg ico--i ico--i-present"></i>
recruit
<i class="ico ico--i ico--i-recruit"></i>
<i class="ico ico--lg ico--i ico--i-recruit"></i>
rocket
<i class="ico ico--i ico--i-rocket"></i>
<i class="ico ico--lg ico--i ico--i-rocket"></i>
science
<i class="ico ico--i ico--i-science"></i>
<i class="ico ico--lg ico--i ico--i-science"></i>
settings
<i class="ico ico--i ico--i-settings"></i>
<i class="ico ico--lg ico--i ico--i-settings"></i>
stall
<i class="ico ico--i ico--i-stall"></i>
<i class="ico ico--lg ico--i ico--i-stall"></i>
star
<i class="ico ico--i ico--i-star"></i>
<i class="ico ico--lg ico--i ico--i-star"></i>
swimming
<i class="ico ico--i ico--i-swimming"></i>
<i class="ico ico--lg ico--i ico--i-swimming"></i>
timer
<i class="ico ico--i ico--i-timer"></i>
<i class="ico ico--lg ico--i ico--i-timer"></i>
train
<i class="ico ico--i ico--i-train"></i>
<i class="ico ico--lg ico--i ico--i-train"></i>
trophy
<i class="ico ico--i ico--i-trophy"></i>
<i class="ico ico--lg ico--i ico--i-trophy"></i>
waste
<i class="ico ico--i ico--i-waste"></i>
<i class="ico ico--lg ico--i ico--i-waste"></i>
water
<i class="ico ico--i ico--i-water"></i>
<i class="ico ico--lg ico--i ico--i-water"></i>
web
<i class="ico ico--i ico--i-web"></i>
<i class="ico ico--lg ico--i ico--i-web"></i>
weight
<i class="ico ico--i ico--i-weight"></i>
<i class="ico ico--lg ico--i ico--i-weight"></i>
wreath
<i class="ico ico--i ico--i-wreath"></i>
<i class="ico ico--lg ico--i ico--i-wreath"></i>
Circle Icons
Group example
Referral letter from GP/Practitioner/Self
Achieve the required marks
Guaranteed entry into an undergraduate degree