Icons

StartHDS icon names and rendering contract

Use a stable icon name in product specs and render <span class="hds-icon" data-hds-icon="users" aria-hidden="true"></span>. StartHDS core JavaScript owns the registry and injects the inline SVG. Unknown icons fall back to circle.

Component examples should compose optional decorative icon spans inside existing buttons, links, cards, alerts, appbars, tabbars, search controls, and dashboard surfaces. Keep adjacent text and aria-label names authoritative; icon-only buttons must provide aria-label.

Components
layout-dashboardicon: layout-dashboard
usersicon: users
usericon: user
user-plusicon: user-plus
user-checkicon: user-check
editicon: edit
pencilicon: pencil
saveicon: save
trashicon: trash
plusicon: plus
copyicon: copy
linkicon: link
routeicon: route
searchicon: search
settingsicon: settings
paintbrushicon: paintbrush
databaseicon: database
chart-lineicon: chart-line
chart-baricon: chart-bar
euroicon: euro
checkicon: check
list-checksicon: list-checks
warningicon: warning
infoicon: info
mailicon: mail
phoneicon: phone
message-circleicon: message-circle
eyeicon: eye
eye-officon: eye-off
arrow-righticon: arrow-right
arrow-lefticon: arrow-left
chevron-righticon: chevron-right
chevron-lefticon: chevron-left
chevron-downicon: chevron-down
more-horizontalicon: more-horizontal
more-verticalicon: more-vertical
menuicon: menu
xicon: x
calendaricon: calendar
clockicon: clock
loader-circleicon: loader-circle
filtericon: filter
downloadicon: download
uploadicon: upload
external-linkicon: external-link
homeicon: home
bellicon: bell
lockicon: lock
shieldicon: shield
shield-checkicon: shield-check
refreshicon: refresh
playicon: play
staricon: star
book-openicon: book-open
file-texticon: file-text
file-codeicon: file-code
foldericon: folder
imageicon: image
videoicon: video

Icon usage examples

128
Users
490
Revenue
94%
Complete
Decorative status icons align with alert copy.

No matching icons?

Unknown icon names still render a safe fallback.