Iconography

Font Awesome

The GEL supports the full range of Font Awesome icons!

WebFonts required

The use of the Font Awesome icon set requires the user's browser to have WebFonts enabled.

Learn more

To learn more, refer to Font Awesome's documentation.

View all icons View usage

Color

Color is controlled separately using contextual .text-* color classes.

Meaning

Some icons have the same meaning across all applications and should be used consistently.

IconMeaningClass

Alert

Helpfa fa-fw fa-question-circle-o
Informationfa fa-info-circle
Successfa fa-fw fa-check
Warningfa fa-exclamation-triangle
Errorfa fa-times-circle
Banned / Forbidden / Ghostbustersfa fa-ban

Communication

Chatfa fa-comments-o
E-mail - Solidfa fa-envelope
E-mail - Outlinefa fa-envelope-o
Replyfa fa-reply
Callfa fa-phone
Call - Solidfa fa-phone-square
Sharefa fa-share-alt
Mobile Phonefa fa-mobile
Barcode Scanfa fa-barcode
QR Code Scanfa fa-qrcode
Feedbackfa fa-comment-o

Action

Homefa fa-home
Searchfa fa-search
Settingsfa fa-cog
Sitemapfa fa-sitemap
Login / Sign-infa fa-sign-in
Logout / Sign-outfa fa-sign-out
Hamburger / Naviconfa fa-bars
Waffle Menufa fa-th
Ellipsis Vertical Menufa fa-ellipsis-v
Ellipsis Horizontal Menufa fa-ellipsis-h
User - Solidfa fa-user
User - Outlinefa fa-user-o
Usersfa fa-users
Add Userfa fa-user-plus
Remove Userfa fa-user-times
Flagfa fa-flag
Unflagfa fa-flag-o
Likefa fa-thumbs-o-up
Likedfa fa-thumbs-up
Dislikefa fa-thumbs-o-down
Dislikedfa fa-thumbs-down
Starfa fa-star
Unstarfa fa-star-o
Bookmarkfa fa-bookmark
Unbookmarkfa fa-bookmark-o
Filterfa fa-filter
Sortablefa fa-sort
Sorted Ascendingfa fa-sort-asc
Sorted Descendingfa fa-sort-desc
Move Upfa fa-arrow-up
Move Downfa fa-arrow-down
Previousfa fa-arrow-left
Nextfa fa-arrow-right
Exchange / Transferfa fa-exchange
Viewfa fa-eye
Hidefa fa-eye-slash
Printfa fa-print
Copyfa fa-copy
Cutfa fa-cut
Pastefa fa-paste
Expand Tree Nodefa fa-plus-square-o
Collapse Tree Nodefa fa-minus-square-o
Refreshfa fa-refresh
Undofa fa-undo
Redofa fa-undo fa-flip-horizontal
Historyfa fa-history
Archivefa fa-archive
Pinfa fa-thumb-tack
Editfa fa-pencil-square-o
Remove/Clear (destructive)fa fa-remove
Trash - Solid (non-destructive)fa fa-trash
Trash - Outline (non-destructive)fa fa-trash-o
Open in a New Windowfa fa-external-link
Sendfa fa-paper-plane
Calculatefa fa-calculator
Add Fieldfa fa-plus-square-o
Take Picture / Snapshotfa fa-camera
Lockfa fa-lock
Unlockfa fa-unlock
Uploadfa fa-upload
Upload to Cloudfa fa-cloud-upload
Downloadfa fa-download
Download from Cloudfa fa-cloud-download
Move Windowfa fa-arrows
Expand Windowfa fa-expand
Compress Windowfa fa-compress

Mapping

Recenterfa fa-crosshairs
Compassfa fa-compass
Navigationfa fa-location-arrow
Map Markerfa fa-map-marker
Milepostfa fa-map-signs
Mapfa fa-map-o
Globefa fa-globe
Zoom Infa fa-search-plus
Zoom Outfa fa-search-minus
Panfa fa-hand-paper-o
Panningfa fa-hand-grab-o

Transportation

Trainfa fa-train
Van / Busfa fa-bus
Carfa fa-automobile
Shipfa fa-ship
Driver's Licensefa fa-drivers-license-o

Safety

Doctorfa fa-user-md
First Aidfa fa-medkit
Fire Extinguisherfa fa-fire-extinguisher
Firefa fa-fire

Security

Securedfa fa-shield
ID Badgefa fa-id-badge
Certificate / Certifiedfa fa-certificate

Contacts

Contacts / Address Bookfa fa-address-book-o
Contact / Address Cardfa fa-address-card-o

Content

Calendar / Datefa fa-calendar-o
Timefa fa-clock-o
Picture Placeholderfa fa-picture-o
Toolsfa fa-wrench
Casefa fa-briefcase
Linkfa fa-link
Broken Linkfa fa-chain-broken
Dashboardfa fa-dashboard
Configuration / Simulationfa fa-sliders
Notesfa fa-sticky-note
Notificationsfa fa-bell-o
Videofa fa-video-camera
Audiofa fa-volume-off
Attachmentfa fa-paperclip
Export PDFfa fa-file-pdf-o
Export Excelfa fa-file-excel-o
Export Wordfa fa-file-word-o
Fuel / Waterfa fa-tint
Foodfa fa-cutlery

Status

Online / Availablefa fa-circle
Offline / Unavailablefa fa-circle-o

Weather

Sunnyfa fa-sun-o
Thunderstormfa fa-bolt

Commerce

Shopping Cartfa fa-shopping-cart
Credit Cardfa fa-credit-card-alt
U.S. Dollarsfa fa-usd

Charts

Area Chartfa fa-area-chart
Bar Chartfa fa-bar-chart
Line Chartfa fa-line-chart
Pie Chartfa fa-pie-chart
Collapsiblefa fa-chevron-up
Expandablefa fa-chevron-down
Dropupfa fa-caret-up
Dropdownfa fa-caret-down

Carets

Carets are used with a labeled button/link to indicate the presence of a dropdown/dropup menu.

The caret should indicate the direction of the dropdown/dropup motion.

Label Label Label Label

Chevrons

Chevrons are used to indicate the presence and state of collapsible content.

The chevron should indicate the direction of the expansion/collapse motion.

Ellipses

Horizontal and vertical ellipses are used to represent to presence of a dropdown/dropup menu when the menu button has no labeling text.

Hamburger

The hamburger menu represents the presence of hidden application navigation.

Third-party Content Disclaimer