Icons
Used sparingly, icons help users to more quickly make meaning of buttons and other interface elements.
Icon Finder
All Font Awesome icons are baked into LibGuides by default. We have preselected some useful icons for you, here. For the full icon set (Version 4), visit Font Awesome.com.
Classes for Size, Orientation, Space and Spin
Icons take the size and color of the containing element. However, you may specify an alternate size, orientation, horizontal spacing and even add a spin to your icons with the specialty classes below!
| Name | Icon | HTML | Copy |
|---|---|---|---|
| android, operating system | <i class="fa fa-android" aria-hidden="true"></i> |
||
| apple, operating system | <i class="fa fa-apple" aria-hidden="true"></i> |
||
| archive, box, folder | <i class="fa fa-archive" aria-hidden="true"></i> |
||
| area chart, graph | <i class="fa fa-area-chart" aria-hidden="true"></i> |
||
| arrow, circle, down | <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i> |
||
| arrow, circle, left | <i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i> |
||
| arrow circle, right | <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> |
||
| arrow, circle, up | <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> |
||
| at, mark, whorl, snail | <i class="fa fa-at" aria-hidden="true"></i> |
||
| balance, scale | <i class="fa fa-balance-scale" aria-hidden="true"></i> |
||
| bar, chart | <i class="fa fa-bar-chart" aria-hidden="true"></i> |
||
| bell, alarm | <i class="fa fa-bell-o" aria-hidden="true"></i> |
||
| bell, alarm | <i class="fa fa-bell-slash-o" aria-hidden="true"></i> |
||
| binoculars, search, find | <i class="fa fa-binoculars" aria-hidden="true"></i> |
||
| book | <i class="fa fa-book" aria-hidden="true"></i> |
||
| bookmark | <i class="fa fa-bookmark" aria-hidden="true"></i> |
||
| briefcase, satchel, business | <i class="fa fa-briefcase" aria-hidden="true"></i> |
||
| bug, insect | <i class="fa fa-bug" aria-hidden="true"></i> |
||
| bullhorn, announce, feedback | <i class="fa fa-bullhorn" aria-hidden="true"></i> |
||
| calculator | <i class="fa fa-calculator" aria-hidden="true"></i> |
||
| calendar, reservation, appointment | <i class="fa fa-calendar" aria-hidden="true"></i> |
||
| calendar, reservation, appointment | <i class="fa fa-calendar-minus-o" aria-hidden="true"></i> |
||
| calendar, reservation, appointment | <i class="fa fa-calendar-o" aria-hidden="true"></i> |
||
| calendar, reservation, appointment | <i class="fa fa-calendar-plus-o" aria-hidden="true"></i> |
||
| calendar, reservation, appointment | <i class="fa fa-calendar-times-o" aria-hidden="true"></i> |
||
| camera, retro, photograph | <i class="fa fa-camera-retro" aria-hidden="true"></i> |
||
| cc, closed caption | <i class="fa fa-cc" aria-hidden="true"></i> |
||
| chat, speech bubble, talk, IM | <i class="fa fa-commenting" aria-hidden="true"></i> |
||
| link, broken, chain | <i class="fa fa-chain-broken" aria-hidden="true"></i> |
||
| check | <i class="fa fa-check" aria-hidden="true"></i> |
||
| check, circle | <i class="fa fa-check-circle-o" aria-hidden="true"></i> |
||
| check, square | <i class="fa fa-check-square-o" aria-hidden="true"></i> |
||
| circle | <i class="fa fa-circle" aria-hidden="true"></i> |
||
| clipboard, copy | <i class="fa fa-clipboard" aria-hidden="true"></i> |
||
| clock, time, hour | <i class="fa fa-clock-o" aria-hidden="true"></i> |
||
| clone, copy, duplicate | <i class="fa fa-clone" aria-hidden="true"></i> |
||
| cloud, web, net | <i class="fa fa-cloud" aria-hidden="true"></i> |
||
| cloud, web, net, download | <i class="fa fa-cloud-download" aria-hidden="true"></i> |
||
| cloud, web, net, upload | <i class="fa fa-cloud-upload" aria-hidden="true"></i> |
||
| code, program, brackets | <i class="fa fa-code" aria-hidden="true"></i> |
||
| cog, machinery, gear | <i class="fa fa-cog" aria-hidden="true"></i> |
||
| cogs, machinery, gears | <i class="fa fa-cogs" aria-hidden="true"></i> |
||
| comment, speech, bubble | <i class="fa fa-comment-o" aria-hidden="true"></i> |
||
| compass, navigate, bubble | <i class="fa fa-compass" aria-hidden="true"></i> |
||
| copyright | <i class="fa fa-copyright" aria-hidden="true"></i> |
||
| creative commons, cc | <i class="fa fa-creative-commons" aria-hidden="true"></i> |
||
| database | <i class="fa fa-database" aria-hidden="true"></i> |
||
| envelope, email | <i class="fa fa-envelope" aria-hidden="true"></i> |
||
| envelope, email | <i class="fa fa-envelope-square" aria-hidden="true"></i> |
||
| envelope, email | <i class="fa fa-envelope-o" aria-hidden="true"></i> |
||
| envelope, email, open | <i class="fa fa-envelope-open" aria-hidden="true"></i> |
||
| envelope, email, open | <i class="fa fa-envelope-open-o" aria-hidden="true"></i> |
||
| eraser | <i class="fa fa-eraser" aria-hidden="true"></i> |
||
| exclamation, circle, alert | <i class="fa fa-exclamation-circle" aria-hidden="true"></i> |
||
| exclamation, triangle, alert, caution, warning | <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> |
||
| external link | <i class="fa fa-external-link" aria-hidden="true"></i> |
||
| external link | <i class="fa fa-external-link-square" aria-hidden="true"></i> |
||
| eye, visible, see | <i class="fa fa-eye" aria-hidden="true"></i> |
||
| eye, invisible, not see | <i class="fa fa-eye-slash" aria-hidden="true"></i> |
||
| female, woman, chica, betty | <i class="fa fa-female" aria-hidden="true"></i> |
||
| file, sound | <i class="fa fa-file-audio-o" aria-hidden="true"></i> |
||
| file, code, program | <i class="fa fa-file-code-o" aria-hidden="true"></i> |
||
| file, excel, spreadsheet, microsoft | <i class="fa fa-file-excel-o" aria-hidden="true"></i> |
||
| file, image, picture | <i class="fa fa-file-image-o" aria-hidden="true"></i> |
||
| file, text | <i class="fa fa-file-o" aria-hidden="true"></i> |
||
| file, pdf, adobe | <i class="fa fa-file-pdf-o" aria-hidden="true"></i> |
||
| file, powerpoint, presentation, microsoft | <i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> |
||
| file, text, plain | <i class="fa fa-file-text-o" aria-hidden="true"></i> |
||
| file, video | <i class="fa fa-file-video-o" aria-hidden="true"></i> |
||
| file, word, microsoft | <i class="fa fa-file-word-o" aria-hidden="true"></i> |
||
| film, video, movie | <i class="fa fa-film" aria-hidden="true"></i> |
||
| floppy, disk, save | <i class="fa fa-floppy-o" aria-hidden="true"></i> |
||
| folder, open | <i class="fa fa-folder-open" aria-hidden="true"></i> |
||
| gift, present | <i class="fa fa-gift" aria-hidden="true"></i> |
||
| github, repo | <i class="fa fa-github" aria-hidden="true"></i> |
||
| globe, world, link | <i class="fa fa-globe" aria-hidden="true"></i> |
||
| headphones, sound, listen | <i class="fa fa-headphones" aria-hidden="true"></i> |
||
| home, house | <i class="fa fa-home" aria-hidden="true"></i> |
||
| id, card, profile, identity | <i class="fa fa-id-card-o" aria-hidden="true"></i> |
||
| information, circle, alert | <i class="fa fa-info-circle" aria-hidden="true"></i> |
||
| key, unlock | <i class="fa fa-key" aria-hidden="true"></i> |
||
| keyboard, terminal | <i class="fa fa-keyboard-o" aria-hidden="true"></i> |
||
| laptop, computer | <i class="fa fa-laptop" aria-hidden="true"></i> |
||
| life preserver, life ring, buoy, help, assistance, FAQ | <i class="fa fa-life-ring" aria-hidden="true"></i> |
||
| lightning Bolt, quick start, rapid, danger | <i class="fa fa-bolt" aria-hidden="true"></i> |
||
| line chart, graph | <i class="fa fa-line-chart" aria-hidden="true"></i> |
||
| linux, operating system | <i class="fa fa-linux" aria-hidden="true"></i> |
||
| list, bullet points | <i class="fa fa-list" aria-hidden="true"></i> |
||
| list, bullet points | <i class="fa fa-list-alt" aria-hidden="true"></i> |
||
| list, bullet points | <i class="fa fa-list-ol" aria-hidden="true"></i> |
||
| list, unordered, bullet points | <i class="fa fa-list-ul" aria-hidden="true"></i> |
||
| lock, security, login | <i class="fa fa-lock" aria-hidden="true"></i> |
||
| male, man, dude, barney | <i class="fa fa-male" aria-hidden="true"></i> |
||
| map, marker, location | <i class="fa fa-map-marker" aria-hidden="true"></i> |
||
| mortarboard, graduation cap, student, faculty, academic | <i class="fa fa-graduation-cap" aria-hidden="true"></i> |
||
| newspaper | <i class="fa fa-newspaper-o" aria-hidden="true"></i> |
||
| paint brush, color | <i class="fa fa-paint-brush" aria-hidden="true"></i> |
||
| paper plane, send, email | <i class="fa fa-paper-plane" aria-hidden="true"></i> |
||
| paperclip, attachment, include | <i class="fa fa-paperclip" aria-hidden="true"></i> |
||
| paragraph, return, text | <i class="fa fa-paragraph" aria-hidden="true"></i> |
||
| pencil, write, edit | <i class="fa fa-pencil" aria-hidden="true"></i> |
||
| pencil, write, edit | <i class="fa fa-pencil-square-o" aria-hidden="true"></i> |
||
| telephone, phone, call, contact | <i class="fa fa-phone" aria-hidden="true"></i> |
||
| phone, telephone, call, contact, square | <i class="fa fa-phone-square" aria-hidden="true"></i> |
||
| picture, image | <i class="fa fa-picture-o" aria-hidden="true"></i> |
||
| pie chart, graph | <i class="fa fa-pie-chart" aria-hidden="true"></i> |
||
| print, printer | <i class="fa fa-print" aria-hidden="true"></i> |
||
| question, mark, circle, opaque | <i class="fa fa-question-circle" aria-hidden="true"></i> |
||
| question, mark, circle, outline, clear, transparent | <i class="fa fa-question-circle-o" aria-hidden="true"></i> |
||
| question, mark | <i class="fa fa-question" aria-hidden="true"></i> |
||
| refresh, recycle | <i class="fa fa-refresh" aria-hidden="true"></i> |
||
| rocket, speed, zoom, handbook | <i class="fa fa-rocket" aria-hidden="true"></i> |
||
| rss, feed, atom | <i class="fa fa-rss" aria-hidden="true"></i> |
||
| search, find, magnifying glass | <i class="fa fa-search" aria-hidden="true"></i> |
||
| sitemap, organization, org chart, structure | <i class="fa fa-sitemap" aria-hidden="true"></i> |
||
| star | <i class="fa fa-star" aria-hidden="true"></i> |
||
| star, half | <i class="fa fa-star-half" aria-hidden="true"></i> |
||
| yellow sticky note | <i class="fa fa-sticky-note-o" aria-hidden="true"></i> |
||
| suitcase, business, files | <i class="fa fa-suitcase" aria-hidden="true"></i> |
||
| table, grid, matrix | <i class="fa fa-table" aria-hidden="true"></i> |
||
| tag, metadata, information, label | <i class="fa fa-tag" aria-hidden="true"></i> |
||
| tags, matadata, information, label | <i class="fa fa-tags" aria-hidden="true"></i> |
||
| thumb tack, reminder | <i class="fa fa-thumb-tack" aria-hidden="true"></i> |
||
| thumb, thumbs up, approval, good | <i class="fa fa-thumbs-up" aria-hidden="true"></i> |
||
| thumb, thumbs down, disapproval, bad | <i class="fa fa-thumbs-down" aria-hidden="true"></i> |
||
| times, x, close, stop, danger | <i class="fa fa-times" aria-hidden="true"></i> |
||
| times, x, close, stop, danger | <i class="fa fa-times-circle" aria-hidden="true"></i> |
||
| trash, delete | <i class="fa fa-trash" aria-hidden="true"></i> |
||
| trophy, prize, winner | <i class="fa fa-trophy" aria-hidden="true"></i> |
||
| undo, back | <i class="fa fa-undo" aria-hidden="true"></i> |
||
| university, library, academia | <i class="fa fa-university" aria-hidden="true"></i> |
||
| unlock, login, open | <i class="fa fa-unlock" aria-hidden="true"></i> |
||
| usd, dollar, currency, money, $ | <i class="fa fa-usd" aria-hidden="true"></i> |
||
| user, person, patron | <i class="fa fa-user" aria-hidden="true"></i> |
||
| users, persons, people, patrons | <i class="fa fa-user-circle-o" aria-hidden="true"></i> |
||
| users, persons, people, patrons | <i class="fa fa-users" aria-hidden="true"></i> |
||
| video, camera, film | <i class="fa fa-video-camera" aria-hidden="true"></i> |
||
| volume, up | <i class="fa fa-volume-up" aria-hidden="true"></i> |
||
| wifi, wireless | <i class="fa fa-wifi" aria-hidden="true"></i> |
||
| wikipedia | <i class="fa fa-wikipedia-w" aria-hidden="true"></i> |
||
| windows | <i class="fa fa-windows" aria-hidden="true"></i> |
||
| wordpress | <i class="fa fa-wordpress" aria-hidden="true"></i> |
||
| wrench, tool, setting | <i class="fa fa-wrench" aria-hidden="true"></i> |
||
| youtube, video | <i class="fa fa-youtube" aria-hidden="true"></i> |
Would you like an icon added to this table? Email us
Symbol Builder
Use the Symbol Builder to create custom symbols. Combine with columns for custom navigation. Combine with tables and sequential numbers for custom instruction sets.
<h6 class='short-round center-block' style='font-size: 60px; height: 150px; width: 150px; padding: 24px; border-radius: 150px; background: #337ab7;'> <i class="fa fa-calendar-plus-o" aria-hidden="true"></i> </h6>
This icon relies on the .short-round class.
.short-round {
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
}
Specialty Classes — Rotation / Size / Spin
Spacing Classes
These classes add horizontal spacing around Font Awesome icons.
<i class="fa fa-gear fa-spacer-right" aria-hidden="true"></i>
| Example | CSS Class | Description |
|---|---|---|
| Text Label | -- | Normal—no spacing |
| Text Label | fa-spacer-right |
Significant right spacing |
| Text Label | fa-spacer-left |
Significant left spacing |
| Text Label | fa-fw |
Fixed-width spacing |
Rotation Classes
These classes may be added to rotate Font Awesome icons.
<i class="fa fa-key fa-rotate-90" aria-hidden="true"></i>
| Example | CSS Class | Description |
|---|---|---|
| -- | Normal—no rotation | |
fa-rotate-90 |
Rotate icon 90° | |
fa-rotate-180 |
Rotate icon 180° | |
fa-rotate-270 |
Rotate icon 270° | |
fa-flip-horizontal |
Flip the icon horizontally | |
fa-flip-vertical |
Flip the icon vertically |
Size Classes
You may specify an alternate size with the following classes.
<i class="fa fa-camera-retro fa-3x" aria-hidden="true"></i>
| Example | CSS Class | Description |
|---|---|---|
| -- | Standard sized | |
fa-lg |
Super-sized | |
fa-2x |
Double-sized | |
fa-3x |
Triple-sized | |
fa-4x |
Quadruple-sized | |
fa-5x |
Quintuple-sized |
Spin Classes
These classes may be added to spin certain Font Awesome icons. Some browsers don't support this effect (e.g., IE8, IE9), or have issues rendering animated icons. We recommend using this technique sparingly, if at all.
<i class="fa fa-cog fa-spin fa-lg fa-fw"></i>
| Example | CSS Class | Description |
|---|---|---|
| Loading... | fa-spin |
Smooth spin on a standard fa-spinner icon |
| Loading... | fa-pulse |
Stepwise spin on a standard fa-spinner icon |
| Loading... | fa-spin |
Smooth spin on a large fa-circle-o-notch icon |
| Loading... | fa-spin |
Smooth spin on a large fa-refresh icon |
| Loading... | fa-spin |
Smooth spin on a large fa-cog icon |
| Loading... | fa-spin |
Smooth spin on a large fa-compass icon |
| Loading... | fa-spin |
Smooth spin on a large fa-plane icon *
|
* Obviously not all icons look amazing when spinning...