Skip to the main content


Icons

Icons are used to clearly and visually represent some information at-a-glance. They may be used alone (without accompanying text) or in addition to label text. We've selected a well-rounded set of icons along with a few variations, however the set is customizable per your institutions' needs.

Icons Preview

px

Using Icons (Decorative and as part of controls/content)

We've organized the icon fonts that edX uses from the Font Awesome 4.6.3 library. However the full library of icons is available.

Icons can be used as both visual decorators or as tangible parts of a UI's controls and content. In the latter case, a fallback method is needed to communicate the icon's purpose/content. Please see the following examples for cases:

Icon as a pure decoration (hidden semantically in the DOM)

Error

Icon with text fallback

Media

Video
video-camera
Camera
camera
Closed Captions
closed-captions
Pause
pause
Play
play
Stop
stop
Enter fullscreen
fullscreen
Exit fullscreen
exit-fullscreen
Muted
volume-off
Low volume
volume-down
High volume
volume-up

User, Accounts

User account
user
Calendar
calendar

Directional, Menu

Up arrow
arrow-up
Down arrow
arrow-down
Down arrow
arrow-circle-down
Left arrow
angle-left
Right arrow
angle-right
Up arrow
angle-up
Down arrow
angle-down
Refresh
refresh
Menu
menu, reorder, bars
Ellipsis
ellipsis

Feedback

Delete
trash, delete
Help
help
Check Mark
check
Close
close, remove
Remove
close-circle
Remove
close-circle-light
Error
error
Warning
warning
Information
information

Forms

Checked checkbox
checkbox-checked
Unchecked checkbox
checkbox-unchecked
Checked checkbox
checkbox-checked-dark
Unchecked radio
radio-unchecked
Checked radio
radio-checked

Miscellaneous

Unordered list
list
List
list-alt
Clock
clock
Filter
filter
Sort
sort, unsorted
Undo
undo, rotate-left
Table
table
Bookmark
book
Dollar bill
money
File
file
File
file-light
Home
home
External link
external-link
Sitemap
sitemap
Locked
lock
Unlocked
unlock
Search
search
Zoom in
search-plus
Zoom out
search-minus
Settings
settings, cog, gear
Checkout
shopping-cart
Comments
comments
Comment
comment
Reply
reply
Add
plus
Remove
minus
Print
print
Pencil
pencil
Edit
edit
Copy
copy
Email
email
Flag
flag
Pin
thumb-tack
Link
link
Unlink
unlink
Quote
quote-left
Upload
upload
Show
show, visible
Hide
hide, hidden
Share
share
Favorite
star
Notifications
bullhorn
Loading, please wait...
spinner
Twitter
twitter-square
Facebook
facebook-square
LinkedIn
linkedin-square