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.

Valid icon classes
180
Current shipped class surface, including alias classes.
Base glyphs plus aliases
177
Source page metadata is preserved as imported docs content.
Shipped path
Mask-image
Use <code>wb-icon</code> with <code>wb-icon-...</code> from <code>webblocks-icons.css</code>.
On this page
Mask-image reference Section detail
Jump to subsection
Basic usage
Jump to section
Important notes
Jump to section
All shipped icon classes
Jump to section

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 classes
<code>wb-icon-refresh</code> and <code>wb-icon-refresh-cw</code> map to the canonical <code>wb-icon-rotate-cw</code> glyph. <code>wb-icon-sync</code> maps to <code>wb-icon-repeat</code>.
Missing classes stay visible
Unknown <code>wb-icon-*</code> classes fall back to <code>help-circle</code> instead of rendering a blank square.
Use browser find for speed
Because this page is intentionally static and source-accurate, <code>Cmd/Ctrl + F</code> 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
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-helpwb-icon-circle-help
clapperboardwb-icon-clapperboard
cloudwb-icon-cloud
codewb-icon-code
columns2wb-icon-columns2
contactwb-icon-contact
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
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
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
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
Previous Primitives
Next Patterns