Font Awesome Icon Tutorial
Instructions
In Cascade, there are specific modules where you can use icons, they will be marked by ICON USABLE on template instruction pages.
![]()
You can use the search feature in the table below for the different icons that are authorized by Cal Poly Ðǿմ«Ã½ for Cascade use. Please do not use icons other than these approved ones. If you wish to request a new icon, email brand@cpp.edu
Once you have decided on an icon, copy the code section and paste it in the icons area.
![]()
Example: Clipboard Icon
1. Find icon on table, copy code from that column.
![]()
2. Paste it into the Font Awesome Icon box, then save your changes.
![]()
3. It will appear like below.
![]()
Note: You will not need to worry about color contrast, it should populate as a gold icon on a dark green background.
Icon Options
| Image | Name | Code | Long Name | Description | Link |
| Clipboard | <i class="fa-sharp fa-light fa-clipboard-list-check"></i> | Clipboard list check (sharp light) | Use for policies, procedures, to-dos, check lists, instructions | ||
| House | <i class="fa-sharp fa-light fa-house"></i> | House (sharp light) | Use for homepages | ||
| Building | <i class="fa-sharp fa-thin fa-buildings"></i> | Buildings (sharp thin) | Use for University Housing (dorms, suites) | ||
| Warning | <i class="fa-sharp fa-light fa-triangle-exclamation"></i> | Triangle exclamation (sharp light) | Use for campus safety, alerts, warnings, crisis com | ||
| Virus | <i class="fa-sharp fa-light fa-virus"></i> | Virus (sharp light) | Use for Covid or Safer Return related links | ||
| Medical | <i class="fa-sharp fa-light fa-briefcase-medical"></i> | Briefcase medical (sharp light) | Use for medical-related, Student Health Services, etc. | ||
| Heart Hand | <i class="fa-sharp fa-light fa-hand-holding-heart"></i> | Hand holding heart (sharp light) | Wellbeing, community of care, support 1 | ||
| Heart | <i class="fa-sharp fa-light fa-heart"></i> | Heart (sharp light) | Wellbeing, community of care, support 2 | ||
| Heart Message | <i class="fa-sharp fa-light fa-message-heart"></i> | Message heart (sharp light) | Wellbeing, community of care, support 3 | ||
| Heart Book | <i class="fa-sharp fa-light fa-book-heart"></i> | Book Heart (sharp light) | Mental health 1 | ||
| Heart Head | <i class="fa-sharp fa-light fa-head-side-heart"></i> | Head side heart (sharp light) | Mental health 2 | ||
| Wifi | <i class="fa-sharp fa-regular fa-wifi"></i> | Wifi (sharp regular) | Wifi, internet, IT help | ||
| Computer 1 | <i class="fa-sharp fa-light fa-desktop"></i> | Desktop (sharp light) | Internet, computer lab, IT help 1 | ||
| Computer 2 | <i class="fa-sharp fa-light fa-computer"></i> | Computer (sharp light) | Internet, computer lab, IT help 2 | ||
| Phone 1 | <i class="fa-sharp fa-light fa-phone-rotary"></i> | Phone rotary (sharp light) | Phone, contact us 1 | ||
| Phone 2 | <i class="fa-sharp fa-light fa-phone"></i> | Phone (sharp light) | Phone, contact us 2 | ||
| Phone 3 | <i class="fa-sharp fa-thin fa-mobile-screen-button"></i> | mobile screen button (sharp thin) | Cell phone, internet app, Billy Chat |
|
|
| Address | <i class="fa-sharp fa-thin fa-address-card"></i> | Address card (sharp thin) | Staff page, Meet the team | ||
| Location | <i class="fa-sharp fa-light fa-location-dot"></i> | Location dot (sharp light) | Location, map, directions | ||
| Comment | <i class="fa-sharp fa-light fa-comment"></i> | Comment (sharp light) | Comment, chat, feedback, dicussion, conversation | ||
| Camera | <i class="fa-sharp fa-light fa-camera"></i> | Camera (sharp light) | Photography, image gallery | ||
| Video | <i class="fa-sharp fa-light fa-video"></i> | Video (sharp light) | Video, video playlist, YouTube | ||
| Photo | <i class="fa-sharp fa-light fa-image"></i> | Image (sharp light) | Image gallery, nature | ||
| Alarm | <i class="fa-sharp fa-light fa-bell"></i> | Bell (sharp light) | Alarm, alert, important info, reminders, notifications | ||
| Search | <i class="fa-light fa-magnifying-glass"></i> | Magnifying glass (sharp light) | Search, look up, research | ||
| Calendar | <i class="fa-sharp fa-light fa-calendar-days"></i> | Calendar Days (sharp light) | Calendar | ||
| Question | <i class="fa-sharp fa-regular fa-question"></i> | Question (sharp regular) | Question, help, information | ||
| Drink | <i class="fa-sharp fa-light fa-mug-hot"></i> | mug hot (sharp light) | coffee with a cop, food menu, dining | ||
| Food | <i class="fa-sharp fa-light fa-pizza-slice"></i> | pizza slice (sharp light) | pizza with the presidents, food menu, dining | ||
| Books 1 | <i class="fa-sharp fa-light fa-books"></i> | books (sharp light) | books, library, studying, school work, academics | ||
| Books 2 | <i class="fa-sharp fa-light fa-book"></i> | book (sharp light) | books, library, studying, school work, academics | ||
| Newspaper | <i class="fa-sharp fa-light fa-newspaper"></i> | newspaper (sharp light) | news, news articles, publications | ||
| <i class="fa-sharp fa-light fa-print"></i> | print (sharp light) | printing, other services (think Library, common rooms) | |||
| Information 1 | <i class="fa-sharp fa-light fa-circle-info"></i> | circle info (sharp light) | information 1 | ||
| Information 2 | <i class="fa-sharp fa-light fa-memo-circle-info"></i> | memo circle info (sharp light) | information 2 | ||
| Microphone | <i class="fa-sharp fa-light fa-microphone"></i> | microphone (sharp light) | audio, podcast, singing | ||
| Money 1 | <i class="fa-sharp fa-light fa-file-invoice-dollar"></i> | file invoice dollar (sharp light) | money, finacial aid office, scholarships, payroll 1 | ||
| Money 2 | <i class="fa-sharp fa-light fa-money-check-dollar-pen"></i> | money check dollar pen (sharp light) | money, finacial aid office, scholarships, payroll 2 |
|
|
| Money 3 | <i class="fa-sharp fa-light fa-sack-dollar"></i> | Sack dollar (sharp light) | money, finacial aid office, scholarships, payroll 3 | ||
| Plant 1 | <i class="fa-sharp fa-light fa-seedling"></i> | seedling (sharp light) | agriculture, farm, grow, nature, plants, vegan, health | ||
| Plant 2 | <i class="fa-sharp fa-light fa-hand-holding-seedling"></i> | hand holding seed (sharp light) | community, volunteer, nature, green, earth-friendly |
|
|
| Plane | <i class="fa-sharp fa-light fa-plane"></i> | plane (sharp light) | aerospace engineering, travel, study abroad, international | ||
| Car | <i class="fa-sharp fa-light fa-car"></i> | car (sharp light) | parking services, car, autobody, mechinical engineering | ||
| Shopping | <i class="fa-sharp fa-light fa-cart-shopping"></i> | shopping (sharp light) | bookstore, shopping, purchase, store, buy | ||
| World | <i class="fa-sharp fa-light fa-earth-americas"></i> | earth americas (sharp light) | geography, travel, study abroad, international, | ||
| Star | <i class="fa-sharp fa-light fa-star"></i> | star (sharp light) | space, innovation, excellence, award | ||
| Graduation | <i class="fa-sharp fa-light fa-graduation-cap"></i> | graduation cap (sharp light) | graduation, commencement | ||
| Ticket | <i class="fa-sharp fa-light fa-ticket"></i> | Ticket (sharp light) | ticket, commencement, eventbright, register | ||
| Award | <i class="fa-sharp fa-light fa-award"></i> | Award (sharp light) | award, prize, winner, recognition | ||
| Award 2 | <i class="fa-sharp fa-regular fa-medal"></i> | Medal (sharp regular) | award, prize, winner, recognition | ||
| Award 3 | <i class="fa-sharp fa-solid fa-trophy"></i> | Trophy (solid) | award, prize, winner, recognition | ||
| Lightbulb | <i class="fa-sharp fa-light fa-lightbulb"></i> | Lightbulb (sharp light) | Ideas, innovation | ||
| Gear | <i class="fa-sharp fa-light fa-gear"></i> | Gear (sharp light) | Fix, tools, maintence, build | ||
| Paper | <i class="fa-sharp fa-light fa-file-pen"></i> | File pen (sharp light) | writing, academics, scholarly, notes 1 | ||
| Pencil | <i class="fa-sharp fa-light fa-pencil"></i> | pencil (sharp light) | writing, academics, scholarly, notes 2 | ||
| Envelope | <i class="fa-sharp fa-light fa-envelope"></i> | envelope (sharp light) | mail, letters, email, contact us | ||
| Classroom | <i class="fa-sharp fa-light fa-chalkboard-user"></i> | chalkboard user (sharp light) | study, teacher, classroom, learning, teaching, faculty | ||
| Annoucement | <i class="fa-sharp fa-light fa-megaphone"></i> | megaphone (sharp light) | annoucements, events, school spirit | ||
| Link | <i class="fa-regular fa-link"></i> | link (sharp regular) | websites, links, connections | ||
| List | <i class="fa-sharp fa-light fa-ballot-check"></i> | ballot check (sharp light) | Use for policies, procedures, to-dos, check lists, instructions | ||
| Check 1 | <i class="fa-sharp fa-light fa-file-check"></i> | File-check (sharp light) | checklists, requirements, to-dos | ||
| Check 2 | <i class="fa-sharp fa-regular fa-check"></i> | Check (sharp regular) | checklists, requirements, to-dos | ||
| Thumbs Up | <i class="fa-sharp fa-light fa-thumbs-up"></i> | thumbs up (sharp light) | Social media 1 | ||
| Hashtag | <i class="fa-sharp fa-light fa-hashtag"></i> | hashtag (sharp light) | Social media 2 | ||
| Pie Chart | <i class="fa-sharp fa-light fa-chart-pie"></i> | chart pie (sharp light) | pie chart, data, marketing, stats, facts and figures | ||
| Bar Graph | <i class="fa-sharp fa-light fa-chart-simple"></i> | bar graph (sharp light) | bar graph, data, marketing, stats, facts and figures | ||
| Music | <i class="fa-sharp fa-light fa-music"></i> | music (sharp light) | music, performance | ||
| Art | <i class="fa-sharp fa-regular fa-palette"></i> | pallette (sharp regular) | art, design | ||
| People 1 | <i class="fa-sharp fa-light fa-user-group"></i> | user group (sharp light) | people, community, event, classroom, family, gathering 1 | ||
| People 2 | <i class="fa-sharp fa-light fa-screen-users"></i> | screen users (sharp light) | people, community, event, classroom, family, gathering 2 | ||
| People 3 | <i class="fa-sharp fa-light fa-people-roof"></i> | people roof (sharp light) | people, community, event, classroom, family, gathering 3 | ||
| Balance | <i class="fa-sharp fa-light fa-scale-balanced"></i> | scales balanced (sharp light) | diversity, equity, inclusion | ||
| Clock | <i class="fa-sharp fa-light fa-clock"></i> | clock (sharp light) | time, clock | ||
| Celebrate | <i class="fa-sharp fa-light fa-party-horn"></i> | party horn (sharp light) | celebration, party, acheivement, winner, school spirit | ||
| Animal | <i class="fa-sharp fa-regular fa-paw"></i> | Paw (sharp regular) | Animal, animal care, vet, animal science | ||
| Globe | <i class="fa-sharp fa-light fa-globe"></i> | Globe (sharp light) | World, international, website, WWW, internet, connection | ||
| Mountains | <i class="fa-sharp fa-regular fa-mountain-sun"></i> | Mountains-sun (sharp regular) | Travel, nature, outdoors, camping | ||
| Beach | <i class="fa-sharp fa-light fa-umbrella-beach"></i> | Ubrella-beach (sharp light) | retirement, beach, travel | ||
| Labor | <i class="fa-sharp fa-light fa-person-carry-box"></i> | Person-carry-box (sharp light) | labor, workers comp, | ||
| Meeting | <i class="fa-sharp fa-light fa-business-time"></i> | business-time (sharp light) | business, benefits, meeting | ||
| Legal | <i class="fa-sharp fa-light fa-landmark"></i> | landmark (sharp light) | law, legal, | ||
| Network | <i class="fa-sharp fa-light fa-network-wired"></i> | Network-wired (sharp light) | network, meeting, connections, flow chart, |