Preset
Accent

Icons

This page documents the shipped mask-image path only: webblocks-icons.css plus <i class="wb-icon wb-icon-...">. The grid below reflects the current shipped icon class surface.

182 valid icon classes 179 base glyphs plus aliases Mask-image path

Mask-image reference

This guide intentionally keeps the shipped <i class="wb-icon wb-icon-..."> usage that the package already supports. No older alternate icon docs are used here.

Basic usage

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v/packages/webblocks/dist/webblocks-icons.css">

<i class="wb-icon wb-icon-home" aria-hidden="true"></i>
<i class="wb-icon wb-icon-settings wb-icon-lg" aria-hidden="true"></i>

Important notes

Aliases ship as real classeswb-icon-refresh and wb-icon-refresh-cw map to the canonical wb-icon-rotate-cw glyph. wb-icon-sync maps to wb-icon-repeat.
Missing classes stay visibleUnknown wb-icon-* classes fall back to help-circle instead of rendering a blank square.
Manifest ships for pickersUse packages/webblocks/dist/webblocks-icons.json when a project needs structured icon metadata such as labels, categories, contexts, and keywords.
Use browser find for speedBecause this page is intentionally static and source-accurate, Cmd/Ctrl + F is the fastest way to jump to a name.

All shipped icon classes

The list is alphabetized and shows every current shipped icon class, including semantic alias classes.

activitywb-icon-activity
area-chartwb-icon-area-chart
arrow-leftwb-icon-arrow-left
arrow-downwb-icon-arrow-down
arrow-upwb-icon-arrow-up
arrow-up-downwb-icon-arrow-up-down
arrow-rightwb-icon-arrow-right
arrow-up-circlewb-icon-arrow-up-circle
at-signwb-icon-at-sign
badge-checkwb-icon-badge-check
badge-percentwb-icon-badge-percent
banwb-icon-ban
banknotewb-icon-banknote
bar-chartwb-icon-bar-chart
bar-chart2wb-icon-bar-chart2
bar-chart3wb-icon-bar-chart3
bellwb-icon-bell
bell-ringwb-icon-bell-ring
bookwb-icon-book
book-openwb-icon-book-open
bookmarkwb-icon-bookmark
boxwb-icon-box
briefcasewb-icon-briefcase
bugwb-icon-bug
building2wb-icon-building2
calculatorwb-icon-calculator
calendarwb-icon-calendar
camerawb-icon-camera
checkwb-icon-check
chevron-downwb-icon-chevron-down
chevron-leftwb-icon-chevron-left
chevron-rightwb-icon-chevron-right
chevron-upwb-icon-chevron-up
circlewb-icon-circle
circle-dotwb-icon-circle-dot
circle-helpwb-icon-circle-help
clapperboardwb-icon-clapperboard
cloudwb-icon-cloud
codewb-icon-code
columns2wb-icon-columns2
contactwb-icon-contact
cookiewb-icon-cookie
copywb-icon-copy
cpuwb-icon-cpu
credit-cardwb-icon-credit-card
databasewb-icon-database
downloadwb-icon-download
external-linkwb-icon-external-link
eyewb-icon-eye
eye-offwb-icon-eye-off
filewb-icon-file
file-archivewb-icon-file-archive
file-codewb-icon-file-code
file-imagewb-icon-file-image
file-lockwb-icon-file-lock
file-pluswb-icon-file-plus
file-searchwb-icon-file-search
file-textwb-icon-file-text
file-xwb-icon-file-x
fileswb-icon-files
filmwb-icon-film
fingerprintwb-icon-fingerprint
folderwb-icon-folder
folder-openwb-icon-folder-open
folder-pluswb-icon-folder-plus
folder-treewb-icon-folder-tree
gaugewb-icon-gauge
githubwb-icon-github
globewb-icon-globe
grip-verticalwb-icon-grip-vertical
hammerwb-icon-hammer
hand-coinswb-icon-hand-coins
headingwb-icon-heading
heartwb-icon-heart
help-circlewb-icon-help-circle
historywb-icon-history
homewb-icon-home
imagewb-icon-image
imageswb-icon-images
inboxwb-icon-inbox
infowb-icon-info
instagramwb-icon-instagram
key-roundwb-icon-key-round
languageswb-icon-languages
laptopwb-icon-laptop
layerswb-icon-layers
layoutwb-icon-layout
layout-dashboardwb-icon-layout-dashboard
layout-gridwb-icon-layout-grid
line-chartwb-icon-line-chart
linkedinwb-icon-linkedin
listwb-icon-list
list-orderedwb-icon-list-ordered
lockwb-icon-lock
lock-openwb-icon-lock-open
log-outwb-icon-log-out
mailwb-icon-mail
map-pinwb-icon-map-pin
maximize2wb-icon-maximize2
memory-stickwb-icon-memory-stick
megaphonewb-icon-megaphone
menuwb-icon-menu
message-squarewb-icon-message-square
messages-squarewb-icon-messages-square
micwb-icon-mic
minimize2wb-icon-minimize2
minuswb-icon-minus
monitorwb-icon-monitor
moonwb-icon-moon
mouse-pointer2wb-icon-mouse-pointer2
musicwb-icon-music
newspaperwb-icon-newspaper
octagon-alertwb-icon-octagon-alert
packagewb-icon-package
palettewb-icon-palette
panel-leftwb-icon-panel-left
panel-rightwb-icon-panel-right
pausewb-icon-pause
pen-toolwb-icon-pen-tool
pencilwb-icon-pencil
phonewb-icon-phone
pie-chartwb-icon-pie-chart
playwb-icon-play
plugwb-icon-plug
pluswb-icon-plus
printerwb-icon-printer
quotewb-icon-quote
receiptwb-icon-receipt
receipt-textwb-icon-receipt-text
rectangle-horizontalwb-icon-rectangle-horizontal
refreshwb-icon-refresh
refresh-cwwb-icon-refresh-cw
repeatwb-icon-repeat
rocketwb-icon-rocket
rotate-ccwwb-icon-rotate-ccw
rotate-cwwb-icon-rotate-cw
routewb-icon-route
routerwb-icon-router
rows2wb-icon-rows2
savewb-icon-save
searchwb-icon-search
sendwb-icon-send
serverwb-icon-server
settingswb-icon-settings
share2wb-icon-share2
shieldwb-icon-shield
shield-checkwb-icon-shield-check
shopping-bagwb-icon-shopping-bag
shopping-cartwb-icon-shopping-cart
sidebarwb-icon-sidebar
sliders-horizontalwb-icon-sliders-horizontal
smartphonewb-icon-smartphone
sparkleswb-icon-sparkles
squarewb-icon-square
square-terminalwb-icon-square-terminal
starwb-icon-star
sticky-notewb-icon-sticky-note
storewb-icon-store
sunwb-icon-sun
sun-moonwb-icon-sun-moon
syncwb-icon-sync
tabletwb-icon-tablet
tablet-smartphonewb-icon-tablet-smartphone
targetwb-icon-target
terminalwb-icon-terminal
toggle-leftwb-icon-toggle-left
toggle-rightwb-icon-toggle-right
trashwb-icon-trash
trash2wb-icon-trash2
trending-upwb-icon-trending-up
triangle-alertwb-icon-triangle-alert
twitterwb-icon-twitter
typewb-icon-type
uploadwb-icon-upload
userwb-icon-user
user-pluswb-icon-user-plus
user-roundwb-icon-user-round
userswb-icon-users
videowb-icon-video
volume2wb-icon-volume2
walletwb-icon-wallet
watchwb-icon-watch
wifiwb-icon-wifi
wrenchwb-icon-wrench
xwb-icon-x
youtubewb-icon-youtube