Icons
Workshopr uses Material Symbols as the primary icon library, with a curated set of 339 SVG icons for offline/static use.
Icon System
Two icon systems are used depending on context.
Material Symbols (Primary)
Google's variable icon font. Used for dynamic UI, interactive elements, and anywhere icons need to be easily changed.
<span class="material-symbols-outlined">lightbulb</span>
339 icons currently in use across the platform
SVG Icons (Static)
Pre-exported SVGs in /images/icons/. Used for email templates, PDFs, and contexts without font loading.
<img src="/images/icons/lightbulb.svg" alt="">
339 SVG files matching Material Symbols names
info
The PHP helper
icon('name') in includes/icon.php renders Material Symbols with consistent styling. Use this for all dynamic icon rendering.High-Frequency Icons
The most commonly used icons across the platform.
expand_more
expand_more
Dropdowns
check
check
Selection
arrow_forward
arrow_forward
Navigation
schedule
schedule
Time/Duration
lightbulb
lightbulb
Ideas/Tips
groups
groups
Team activities
close
close
Dismiss/Close
psychology
psychology
Facilitation
play_arrow
play_arrow
Start/Play
auto_awesome
auto_awesome
AI features
podcasts
podcasts
Audio content
edit_note
edit_note
Notes/Edit
info
info
Information
save
save
Save action
add
add
Add/Create
arrow_back
arrow_back
Back nav
Navigation & Actions
Navigation
arrow_back
arrow_back
arrow_forward
arrow_forward
expand_more
expand_more
chevron_right
chevron_right
chevron_left
chevron_left
home
home
menu
menu
close
close
search
search
open_in_new
open_in_new
Actions
add
add
edit
edit
delete
delete
save
save
download
download
upload_file
upload_file
refresh
refresh
check
check
check_circle
check_circle
content_paste
content_paste
bookmark
bookmark
favorite
favorite
ios_share
ios_share
login
login
logout
logout
App-Specific Icons
Icons associated with specific applications in the platform.
| Icon | App | Icon Name | Usage |
|---|---|---|---|
| menu_book | Library | menu_book |
Main content library, exercises, workshops |
| tips_and_updates | Tips | tips_and_updates |
Quick facilitation tips |
| podcasts | Podcasts | podcasts |
Audio content, episodes |
| calendar_month | Planner | calendar_month |
Workshop agenda builder |
| smart_toy | Coach | smart_toy |
AI facilitation assistant |
| style | Interventions | style |
Intervention card library |
| school | Training | school |
Courses and learning paths |
| dashboard | MyWorkshopr | dashboard |
User dashboard |
Intervention Category Icons
Icons for the 6 intervention card categories.
person_alert
Difficult Participants
person_alert
battery_charging_full
Energy Management
battery_charging_full
schedule
Time Management
schedule
groups
Group Dynamics
groups
build
Technical Issues
build
psychology
Facilitation Moments
psychology
Content Type Icons
Activity Types
view_day
Workshop
Full workshop templates
view_day
stacks
Exercise
Individual exercises
stacks
waving_hand
Icebreaker
Warm-up activities
waving_hand
coffee
Break
Scheduled breaks
coffee
Content Categories
palette
Design
palette
analytics
Strategy
analytics
search
Research
search
groups
Team
groups
bolt
Energizer
bolt
Status & Feedback
check_circle
Success
warning
Warning
info
Info
help
Help
radio_button_unchecked
Pending
radio_button_checked
Selected
progress_activity
Loading
trending_up
Increase
trending_down
Decrease
Media & Communication
Media
play_arrow
play_arrow
play_circle
play_circle
pause
pause
stop_circle
stop_circle
skip_next
skip_next
skip_previous
skip_previous
headphones
headphones
mic
mic
videocam
videocam
podcasts
podcasts
Communication
mail
mail
chat
chat
forum
forum
feedback
feedback
notifications
notifications
person
person
groups
groups
person_add
person_add
waving_hand
waving_hand
Coach & AI Features
Icons specific to the AI Coach and intelligence features.
auto_awesome
AI Magic
auto_awesome
smart_toy
AI Assistant
smart_toy
psychology
Insights
psychology
psychology_alt
Analysis
psychology_alt
auto_fix_high
Auto-fix
auto_fix_high
bolt
Quick Actions
bolt
insights
Analytics
insights
analytics
Data
analytics
radar
Detection
radar
Complete Icon Reference
All icons currently used across the Workshopr platform, sorted by frequency.
expand_more
expand_more
check
check
arrow_forward
arrow_forward
schedule
schedule
lightbulb
lightbulb
groups
groups
close
close
psychology
psychology
play_arrow
play_arrow
auto_awesome
auto_awesome
podcasts
podcasts
edit_note
edit_note
radio_button_unchecked
radio_button_unchecked
info
info
save
save
graph_3
graph_3
description
description
arrow_back
arrow_back
add
add
tips_and_updates
tips_and_updates
person
person
download
download
check_circle
check_circle
view_day
view_day
stacks
stacks
trending_up
trending_up
settings
settings
play_circle
play_circle
menu_book
menu_book
edit
edit
bookmark
bookmark
sticky_note_2
sticky_note_2
smart_toy
smart_toy
search
search
school
school
psychology_alt
psychology_alt
palette
palette
format_quote
format_quote
folder
folder
dashboard
dashboard
category
category
calendar_month
calendar_month
bolt
bolt
analytics
analytics
waving_hand
waving_hand
warning
warning
upload_file
upload_file
touch_app
touch_app
timer
timer
style
style
refresh
refresh
person_alert
person_alert
open_in_new
open_in_new
map
map
mail
mail
logout
logout
login
login
local_parking
local_parking
inventory_2
inventory_2
insights
insights
home
home
history
history
headphones
headphones
folder_open
folder_open
event_note
event_note
event_available
event_available
delete
delete
content_paste
content_paste
coffee
coffee
apps
apps
widgets
widgets
view_timeline
view_timeline
view_quilt
view_quilt
view_kanban
view_kanban
view_agenda
view_agenda
verified
verified
unfold_more
unfold_more
trending_down
trending_down
text_fields
text_fields
task_alt
task_alt
summarize
summarize
stop_circle
stop_circle
stars
stars
star
star
sprint
sprint
speed
speed
space_bar
space_bar
skip_previous
skip_previous
skip_next
skip_next
shield
shield
sell
sell
rounded_corner
rounded_corner
recommend
recommend
radio_button_checked
radio_button_checked
radar
radar
progress_activity
progress_activity
preview
preview
picture_as_pdf
picture_as_pdf
phone_iphone
phone_iphone
pause
pause
more_vert
more_vert
mic
mic
menu
menu
lock
lock
local_fire_department
local_fire_department
link
link
line_weight
line_weight
layers
layers
ios_share
ios_share
inbox
inbox
how_to_vote
how_to_vote
hourglass_empty
hourglass_empty
help
help
grid_on
grid_on
genetics
genetics
format_size
format_size
format_list_numbered
format_list_numbered
folder_off
folder_off
flag
flag
fingerprint
fingerprint
favorite_border
favorite_border
favorite
favorite
fact_check
fact_check
explore
explore
event
event
edit_document
edit_document
done_all
done_all
data_object
data_object
code
code
cloud_upload
cloud_upload
cloud_off
cloud_off
cleaning_services
cleaning_services
checklist
checklist
calendar_today
calendar_today
business_center
business_center
build
build
battery_charging_full
battery_charging_full
auto_fix_high
auto_fix_high
attach_file
attach_file
add_circle
add_circle
chevron_right
chevron_right
chevron_left
chevron_left
article
article
notifications
notifications
chat
chat
forum
forum
feedback
feedback
person_add
person_add
videocam
videocam
record_voice_over
record_voice_over
accessibility_new
accessibility_new
account_tree
account_tree
Usage Guidelines
Do
- Use the
icon()helper for consistent rendering - Keep icons at standard sizes: 18px, 20px, 24px, 28px
- Use semantic icons that match the action (check for complete, add for create)
- Pair icons with text labels for accessibility
- Use app-specific colors for branded icons
Don't
- Don't use icons without alt text in images
- Don't mix icon libraries (stick to Material Symbols)
- Don't use icons as the only way to convey meaning
- Don't create custom icons without adding to the SVG library
- Don't use filled variants inconsistently
// PHP helper usage
<?= icon('lightbulb') ?>
<?= icon('check', 'icon-success') ?>
<?= icon('close', '', ['style' => 'color: red']) ?>
// Direct HTML
<span class="material-symbols-outlined">lightbulb</span>
// SVG for static contexts
<img src="/images/icons/lightbulb.svg" alt="" width="24" height="24">