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

Logo icons

Brand	Class	Example
White logo	`logo-icon logo-white logo-before`	`<p class="logo-icon logo-white logo-before">Hallam</p>`
Black logo	`logo-icon logo-black logo-before`	`<p class="logo-icon logo-black logo-before">Hallam</p>`
Pink logo	`logo-icon logo-pink logo-before`	`<p class="logo-icon logo-pink logo-before">Hallam</p>`
Yellow logo	`logo-icon logo-yellow logo-before`	`<p class="logo-icon logo-yellow logo-before">Hallam</p>`
Green logo	`logo-icon logo-green logo-before`	`<p class="logo-icon logo-green logo-before">Hallam</p>`
Orange logo	`logo-icon logo-orange logo-before`	`<p class="logo-icon logo-orange logo-before">Hallam</p>`
White logo	`logo-icon logo-white logo-after`	`<p class="logo-icon logo-white logo-after">Hallam</p>`
Black logo	`logo-icon logo-black logo-after`	`<p class="logo-icon logo-black logo-after">Hallam</p>`
Pink logo	`logo-icon logo-pink logo-after`	`<p class="logo-icon logo-pink logo-after">Hallam</p>`
Yellow logo	`logo-icon logo-yellow logo-after`	`<p class="logo-icon logo-yellow logo-after">Hallam</p>`
Green logo	`logo-icon logo-green logo-after`	`<p class="logo-icon logo-green logo-after">Hallam</p>`
Orange logo	`logo-icon logo-orange logo-after`	`<p class="logo-icon logo-orange logo-after">Hallam</p>`

Brand icons

Brand	Class	Example
Facebook	`facebook`	`<p class="facebook">Facebook</p>`
Instagram	`instagram`	`<p class="instagram">Instagram</p>`
LinkedIn	`linkedin`	`<p class="linkedin">LinkedIn</p>`
Snapchat	`snapchat`	`<p class="snapchat">Snapchat</p>`
Twitter	`twitter`	`<p class="twitter">Twitter</p>`
YouTube	`youtube`	`<p class="youtube">YouTube</p>`
TikTok	`tiktok`	`<p class="tiktok">TikTok</p>`
WhatsApp	`whatsapp`	`<p class="whatsapp">WhatsApp</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="download">Download file</a>`
Email	`email`	`<a class="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="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: 29 May 2023 18:28 , Last updated: 16 Dec 2024 10:57