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