Icons
Icons have four main use cases:
- Inline SVGs (normal icons)
- Background CSS icons (inline svg src url in SCSS)
- Illustrations (inline img src)
- As React Component
1. Inline SVGs
How to use
Size Examples
Icons List
Zoom Out
zoom-out
Zoom In
zoom-in
Zap
zap
Zap Off
zap-off
Youtube
youtube
Youtube Solid
youtube-solid
X
x
X Square
x-square
X Octagon
x-octagon
X Circle
x-circle
Wind
wind
Wifi
wifi
Wifi Off
wifi-off
Watch
watch
Volunteer
volunteer
Volume
volume
Volume X
volume-x
Volume 2
volume-2
Volume 1
volume-1
Voicemail
voicemail
Video
video
Video Off
video-off
Users
users
User
user
User X
user-x
User Solid
user-solid
User Plus
user-plus
User Minus
user-minus
User Check
user-check
Upload
upload
Upload Cloud
upload-cloud
Unlock
unlock
Underline
underline
Umbrella
umbrella
Type
type
Twitter X
twitter-x
Twitch
twitch
Tv
tv
Truck
truck
Trophy
trophy
Triangle
triangle
Trending Up
trending-up
Trending Down
trending-down
Trello
trello
Trash
trash
Trash 2
trash-2
Tool
tool
Toggle Right
toggle-right
Toggle Left
toggle-left
Time
time
Thumbs Up
thumbs-up
Thumbs Down
thumbs-down
Thermometer
thermometer
Terminal
terminal
Target
target
Tag
tag
Tablet
tablet
Table
table
Sunset
sunset
Sunrise
sunrise
Sun
sun
Stop Circle
stop-circle
Star
star
Square
square
Speaker
speaker
Smile
smile
Smartphone
smartphone
Sliders
sliders
Slash
slash
Slack
slack
Skip Forward
skip-forward
Skip Back
skip-back
Sidebar
sidebar
Shuffle
shuffle
Shopping Cart
shopping-cart
Shopping Bag
shopping-bag
Shield
shield
Shield Off
shield-off
Share
share
Share 2
share-2
Settings
settings
Server
server
Send
send
Search
search
Scissors
scissors
Save
save
Rss
rss
Round Solid
round-solid
Round Outline
round-outline
Rotate Cw
rotate-cw
Rotate Ccw
rotate-ccw
Rewind
rewind
Restart
restart
Repeat
repeat
Refresh Cw
refresh-cw
Refresh Ccw
refresh-ccw
Radio
radio
Publications
publications
Printer
printer
Power
power
Plus
plus
Plus Square
plus-square
Plus Circle
plus-circle
Play
play
Play Circle
play-circle
Pie Chart
pie-chart
Phone
phone
Phone Outgoing
phone-outgoing
Phone Off
phone-off
Phone Missed
phone-missed
Phone Incoming
phone-incoming
Phone Forwarded
phone-forwarded
Phone Fill
phone-fill
Phone Call
phone-call
Percent
percent
Pen Tool
pen-tool
Pause
pause
Pause Circle
pause-circle
Paperclip
paperclip
Package
package
Octagon
octagon
News
news
Navigation
navigation
Navigation 2
navigation-2
Music
music
Move
move
Mouse Pointer
mouse-pointer
More Vertical
more-vertical
More Horizontal
more-horizontal
Moon
moon
Monitor
monitor
Minus
minus
Minus Square
minus-square
Minus Circle
minus-circle
Minimize
minimize
Minimize 2
minimize-2
Mic
mic
Mic Off
mic-off
Message Square
message-square
Message Circle
message-circle
Menu
menu
Meh
meh
Maximize
maximize
Maximize 2
maximize-2
Map
map
Map Pin
map-pin
Log Out
log-out
Log In
log-in
Lock
lock
Loader
loader
List
list
Link
link
Link 2
link-2
Life Buoy
life-buoy
Layout
layout
Layers
layers
Key
key
Italic
italic
Instagram Solid
instagram-solid
Info
info
Inbox
inbox
Image
image
Ifm
ifm
Home
home
Hexagon
hexagon
Help Circle
help-circle
Heart
heart
Headphones
headphones
Hash
hash
Hard Drive
hard-drive
Hand Gift
hand-gift
Grid
grid
Globe
globe
Gitlab
gitlab
Github
github
Git Pull Request
git-pull-request
Git Merge
git-merge
Git Commit
git-commit
Git Branch
git-branch
Gift
gift
Frown
frown
Framer
framer
Folder
folder
Folder Plus
folder-plus
Folder Minus
folder-minus
Flag
flag
Filter
filter
Film
film
File
file
File Text
file-text
File Plus
file-plus
File Minus
file-minus
Figma
figma
Feather
feather
Fax Fill
fax-fill
Fast Forward
fast-forward
Facebook Circle
facebook-circle
Eye
eye
Eye Open
eye-open
Eye Off
eye-off
External Link
external-link
Error
error
Envelope Fill
envelope-fill
Edit
edit
Edit 3
edit-3
Edit 2
edit-2
Droplet
droplet
Dribble
dribble
Download
download
Download Cloud
download-cloud
Dollar Sign
dollar-sign
Divide
divide
Divide Square
divide-square
Divide Circle
divide-circle
Disc
disc
Delete
delete
Database
database
Crosshair
crosshair
Crop
crop
Credit Card
credit-card
Cpu
cpu
Corner Up Right
corner-up-right
Corner Up Left
corner-up-left
Corner Right Up
corner-right-up
Corner Right Down
corner-right-down
Corner Left Up
corner-left-up
Corner Left Down
corner-left-down
Corner Down Right
corner-down-right
Corner Down Left
corner-down-left
Copy
copy
Compass
compass
Command
command
Columns
columns
Coffee
coffee
Codesandbox
codesandbox
Codepen
codepen
Code
code
Cloud
cloud
Cloud Snow
cloud-snow
Cloud Rain
cloud-rain
Cloud Off
cloud-off
Cloud Lightning
cloud-lightning
Cloud Drizzle
cloud-drizzle
Clock
clock
Clipboard
clipboard
Circle
circle
Chrome
chrome
Chevrons Up
chevrons-up
Chevrons Right
chevrons-right
Chevrons Left
chevrons-left
Chevrons Down
chevrons-down
Chevron Up
chevron-up
Chevron Right
chevron-right
Chevron Right Large
chevron-right-large
Chevron Left
chevron-left
Chevron Left Large
chevron-left-large
Chevron Down
chevron-down
Check
check
Check Square
check-square
Check Solid
check-solid
Check Circle
check-circle
Cast
cast
Camera
camera
Camera Off
camera-off
Calendar
calendar
Briefcase
briefcase
Box
box
Bookmark
bookmark
Book
book
Book Open
book-open
Bold
bold
Bluetooth
bluetooth
Bell
bell
Bell Off
bell-off
Battery
battery
Battery Charging
battery-charging
Bar Chart
bar-chart
Bar Chart 2
bar-chart-2
Bank
bank
Award
award
At Sign
at-sign
Arrow Up
arrow-up
Arrow Up Right
arrow-up-right
Arrow Up Left
arrow-up-left
Arrow Up Circle
arrow-up-circle
Arrow Right
arrow-right
Arrow Right Slim
arrow-right-slim
Arrow Right Circle
arrow-right-circle
Arrow Nodge
arrow-nodge
Arrow Left
arrow-left
Arrow Left Slim
arrow-left-slim
Arrow Left Circle
arrow-left-circle
Arrow Drop Up
arrow-drop-up
Arrow Drop Down
arrow-drop-down
Arrow Down
arrow-down
Arrow Down Right
arrow-down-right
Arrow Down Left
arrow-down-left
Arrow Down Circle
arrow-down-circle
Archive
archive
Aperture
aperture
Anchor
anchor
Align Right
align-right
Align Left
align-left
Align Justify
align-justify
Align Center
align-center
Alert Triangle
alert-triangle
Alert Triangle Solid
alert-triangle-solid
Alert Octagon
alert-octagon
Alert Diamond Solid
alert-diamond-solid
Alert Circle
alert-circle
Alert Circle Solid
alert-circle-solid
Airplay
airplay
Activity
activity
Duotone Icon (inline svg on cms for user to choose)
Operation
operation
Map
map
Duotone Icon (inline svg on cms for user to choose)
2. Background SVGs
Set directly in the CSS. If you need to change the background colour, use CSS Masks.
How to use
3. Using plain image tag
How to use
4. As React Component
Developer note, adding or removing icons -
Add or remove the file at assets/icons and then see tools/generate-icon-imports.mjs for instructions on replacing Icon.tsx with the relevant imports.
How to use