Iconography

Font Awesome

The GEL supports the full range of Font Awesome 5 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

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

Communication

Chatfar fa-comments
E-mail - Solidfas fa-envelope
E-mail - Outlinefar fa-envelope
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
Feedbackfar fa-comment

Action

Homefa fa-home
Searchfa fa-search
Settingsfa fa-cog
Sitemapfa fa-sitemap
Login / Sign-infas fa-sign-in-alt
Logout / Sign-outfas fa-sign-out-alt
Hamburger / Naviconfa fa-bars
Waffle Menufa fa-th
Ellipsis Vertical Menufa fa-ellipsis-v
Ellipsis Horizontal Menufa fa-ellipsis-h
User - Solidfas fa-user
User - Outlinefar fa-user
Usersfa fa-users
Add Userfa fa-user-plus
Remove Userfa fa-user-times
Flagfas fa-flag
Unflagfar fa-flag
Likefar fa-thumbs-up
Likedfas fa-thumbs-up
Dislikefar fa-thumbs-down
Dislikedfas fa-thumbs-down
Starfas fa-star
Unstarfar fa-star
Bookmarkfas fa-bookmark
Unbookmarkfar fa-bookmark
Filterfa fa-filter
Sortablefa fa-sort
Sorted Ascendingfa fa-sort-up
Sorted Descendingfa fa-sort-down
Move Upfa fa-arrow-up
Move Downfa fa-arrow-down
Previousfa fa-arrow-left
Nextfa fa-arrow-right
Exchange / Transferfa fa-exchange-alt
Viewfa fa-eye
Hidefa fa-eye-slash
Printfa fa-print
Copyfa fa-copy
Cutfa fa-cut
Pastefa fa-paste
Expand Tree Nodefar fa-plus-square
Collapse Tree Nodefar fa-minus-square
Refreshfa fa-sync
Undofa fa-undo
Redofa fa-undo fa-flip-horizontal
Historyfa fa-history
Archivefa fa-archive
Pinfa fa-thumbtack
Editfas fa-pencil-alt
Remove/Clear (destructive)fa fa-times
Trash - Solid (non-destructive)fas fa-trash-alt
Trash - Outline (non-destructive)far fa-trash-alt
Open in a New Windowfa fa-external-link-alt
Sendfa fa-paper-plane
Calculatefa fa-calculator
Add Fieldfa fa-plus-square
Take Picture / Snapshotfa fa-camera
Lockfa fa-lock
Unlockfa fa-unlock
Uploadfa fa-upload
Upload to Cloudfa fa-cloud-upload-alt
Downloadfa fa-download
Download from Cloudfa fa-cloud-download-alt
Move Windowfa fa-arrows-alt
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
Mapfar fa-map
Globefa fa-globe
Zoom Infa fa-search-plus
Zoom Outfa fa-search-minus
Panfar fa-hand-paper
Panningfar fa-hand-rock

Transportation

Trainfa fa-train
Van / Busfa fa-bus
Carfa fa-car
Shipfa fa-ship
Driver's Licensefar fa-id-card

Safety

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

Security

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

Contacts

Contacts / Address Bookfar fa-address-book
Contact / Address Cardfar fa-address-card

Content

Calendar / Datefar fa-calendar
Timefar fa-clock
Picture Placeholderfar fa-image
Toolsfa fa-wrench
Casefa fa-briefcase
Linkfa fa-link
Broken Linkfa fa-unlink
Dashboardfa fa-tachometer-alt
Configuration / Simulationfa fa-sliders-h
Notesfa fa-sticky-note
Notificationsfar fa-bell
Videofa fa-video
Audiofa fa-volume-off
Attachmentfa fa-paperclip
Export PDFfar fa-file-pdf
Export Excelfar fa-file-excel
Export Wordfar fa-file-word
Fuel / Waterfa fa-tint
Foodfa fa-utensils

Status

Online / Availablefas fa-circle
Offline / Unavailablefar fa-circle

Weather

Sunnyfar fa-sun
Thunderstormfa fa-bolt

Commerce

Shopping Cartfa fa-shopping-cart
Credit Cardfa fa-credit-card
U.S. Dollarsfa fa-dollar-sign

Charts

Area Chartfa fa-chart-area
Bar Chartfa fa-chart-bar
Line Chartfa fa-chart-line
Pie Chartfa fa-chart-pie
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