Paragon does not have a custom set of icons. Instead, we gather the best free and open source icons that suit our purposes and form a cohesive visual look and feel. Today, we primarily use the sharp style of Google Material system icons and are leaving Font Awesome icons behind.
| Note |
|---|
If you need a new icon:
|
| Table of Contents |
|---|
Icons in Paragon
Today we have adopted Google Material’s naming scheme for icons. Over time, Paragon will create its own naming for icons that map to Google’s or any other icon system we adopt in the future. Most names match Material. The Paragon name will differ when the Google icon’s concept is unrelated to it’s intended use in Paragon (for example: 📍 push_pin vs objective)
...
Paragon name
...
Mapped to (material name)
...
chevron_left
...
chevron_left
...
chevron_right
...
chevron_right
...
expand_less
...
expand_less
...
expand_more
...
expand_more
...
arrow_drop_up
...
arrow_drop_up
...
arrow_drop_down
...
arrow_drop_down
...
arrow_drop_up_down
...
Custom
...
arrow_back_ios
...
arrow_back_ios
...
arrow_forward_ios
...
arrow_forward_ios
...
add
...
add
...
close
...
close
...
add_circle
...
add_circle
...
cancel
...
cancel
...
arrow_drop_down_circle
...
arrow_drop_down_circle
...
radio_button_unchecked
...
radio_button_unchecked
...
radio_button_checked
...
radio_button_checked
...
check_box_outline_blank
...
check_box_outline_blank
...
check_box
...
check_box
...
indeterminate_check_box
...
indeterminate_check_box
...
search
...
search
...
visibility_off
...
visibility_off
...
visibility
...
visibility
...
person
...
person
...
error
...
error
...
warning
...
warning
...
check_circle
...
check_circle
...
info
...
info
...
info_outline
...
info_outline
...
more_vert
...
more_vert
...
share
...
share
...
watch_outline
...
watch_outline
...
watch_filled
...
watch_filled
...
timelapse
...
timelapse
...
money_outline
...
money_outline
...
money_filled
...
money_filled
...
voice_chat
...
voice_chat
...
record
...
record
...
calendar
...
calendar
...
play_arrow
...
play_arrow
...
play_circle_outline
...
play_circle_outline
...
play_circle_filled
...
play_circle_filled
...
school
...
school
...
check
...
done
...
favorite
...
favorite
...
favorite_border
...
favorite_border
...
institution
...
account_balance
...
money
...
attach_money
...
language
...
language
...
translate
...
translate
...
tag
...
local_offer
...
book_open
...
menu_book
...
award
...
emoji_events
...
phone_iphone
...
phone_iphone
...
video_transcript
...
speaker_notes
...
speed
...
speed
...
verified
...
verified
...
calendar
...
Custom icon derived from event
...
event_note
...
event_note
...
event
...
event
...
date_range
...
date_range
...
event_available
...
event_available
...
event_busy
...
event_busy
...
laptop
...
laptop_chromebook
...
warning_filled
...
Custom icon derived from warning
...
home
...
home
...
add_alert
...
add_alert
...
assignment
...
assignment
...
spinner
...
spinner
...
remove
...
remove
...
delete
...
delete
...
email
...
email
...
menu
...
menu
...
lighbulb
...
wb_incandescent
...
download
...
download
...
downloading
...
downloading
...
download_done
...
download_done
...
ios_share
...
ios_share
...
close_small
...
close_small
...
format_size
...
format_size
...
add_comment
...
add_comment
...
undo
...
undo
...
redo
...
redo
...
highlight
...
drive_file_rename_outline
...
...
draw_shapes
...
widgets
...
...
check_circle_outline
check_circle_outline
...
...
unlocked
...
lock_open
...
locked
...
lock
...
collections_bookmark
...
collections_bookmark
...
arrow_forward
...
arrow_forward
...
...
arrow_back
...
arrow_back
...
...
launch
...
launch
...
settings
...
settings
...
photo_camera
...
photo_camera
...
edit
...
edit
...
...
spinner_simple
...
N/A (custom)
...
article
...
article
...
videocam
...
videocam
...
class
...
class
...
grid_view
...
grid_view
...
view_list
...
view_list
...
To add an icon…
Verify that the icon exists in code.
Find the perfect icon in Google Material Figma
Copy the icon from Google Material Figma
Paste the icon in Paragon __Icons__ page. Note: Double check that the icon is 24px by 24px.
Publish Paragon Figma library
...
Icons in Paragon
...
What do we mean by “Icon”?
Icon A low detail visual element designed to communicate a simple concept in a utilitarian fashion at small sizes. | Graphic or Illustration A higher detail visual element, that communicates simple or complex concepts in an expressive way. |
|---|---|
 |  |
The Future of Icons in Paragon
Today…
icons offered by Paragon design system cannot be customized
The React implementation of Paragon includes no icons
Open edX applications are pulling in icons themselves from svg files or Font Awesome
We intend to…
Pull icons into Paragon React itself so a consuming application no longer manages gathering icons.
Offer icons in React via an updated
Iconcomponent that makes working with these icons easier.Incorporate icons into Paragon’s theming system. This may be through some kind of
icons.jsin a theme directory.
- Adam Butterworth (Deactivated) Create a Jira epic to outline this work and get it shovel-ready.