Icons

Icons add a lot to a page and make it feel much less flat and text-heavy. They're also great for making information easily findable on a page, like phone numbers and addresses.

content

Brand icons

Brand	Class	Example
Facebook	`facebook`	`<p class="facebook">Facebook</p>`
Instagram	`instagram`	`<p class="instagram">Instagram</p>`
LinkedIn	`facebook`	`<p class="facebook">Facebook</p>`
Snapchat	`snapchat`	`<p class="snapchat">Snapchat</p>`
Twitter	`twitter`	`<p class="twitter">Twitter</p>`
YouTube	`youtube`	`<p class="youtube">YouTube</p>`

General icons

Icon	Class	Example
Calendar	`calendar`	`<p class="calendar">1 January 2023</p>`
Clock	`clock`	`<p class="clock">Deadline at 11:59pm</p>`
Download	`download`	`<a class="button download">Download file</a>`
Email	`email`	`<a class="button email" href="mailto:name@su.uni.ac.uk">name@su.uni.ac.uk</a>`
Location	`location`	`<p class="location">Our address</p>`
Phone	`phone`	`<a class="button phone" href="tel:00000000000">00000 000000</a>`
Warning	`warning`	`<p class="warning">Check again</p>`
Image	`image`	`<p class="image">Image icon</p>`
Search	`search`	`<p class="search">Find what you need</p>`
Tick	`tick`	`<p class="tick">Success!</p>`
Cross	`cross`	`<p class="cross">Error</p>`
Basket	`basket`	`<p class="basket">It's in your basket</p>`
Tickets	`tickets`	`<p class="tickets">Get your ticket</p>`
Award	`award`	`<p class="award">Winner</p>`

Published: 22 Nov 2022 11:39 , Last updated: 17 Mar 2023 12:55

Site design by Elliot Parker.