Icons
This is a guide, not the contract. What the platform guarantees is specified under
openspec/specs/. For this page:shell-layout·menus·content-tabs. Where this page and a specification disagree, the specification is right, and that is a defect in this page: change the behaviour there, then explain it here.
An icon here is a name, never a file. You draw one with the <lw-icon> element:
<lw-icon name="settings" size="1.25rem"></lw-icon>The element resolves that name through a module-global registry, so the same tag works in an Angular
weaver, in a plain custom element and inside a sandboxed iframe surface, with no import and no
framework in common. The glyph paints in currentColor, so whatever colours the surrounding text
colours the icon, and size sets both width and height. A name nothing has registered renders
nothing at all, silently, which is the failure this page exists to prevent: the set below is what
you can rely on being there.
Read this page on loomweaver.dev if you want to see the glyphs. GitHub strips inline SVG out of Markdown, so on github.com the first column is empty and only the names survive.
The names the workbench ships
The names are semantic rather than pictorial: search says what the icon is for, not what it looks
like. Two names may therefore share one glyph on purpose, because a product re-skinning the workbench
can then repaint one of them without dragging the other along.
The glyph source column names where the drawing comes from. Most are Heroicons outline glyphs, and knowing which one lets you find its neighbours there when you need a matching shape for something of your own.
The workbench ships 44 names.
| Glyph | Name | Glyph source |
|---|---|---|
add |
heroPlus |
|
check |
heroCheck |
|
chevronDown |
heroChevronDown |
|
chevronsLeft |
heroChevronDoubleLeft |
|
chevronsRight |
heroChevronDoubleRight |
|
close |
heroXMark |
|
document |
heroDocument |
|
download |
heroArrowDownTray |
|
edit |
heroPencilSquare |
|
error |
heroXCircle |
|
help |
heroQuestionMarkCircle |
|
info |
heroInformationCircle |
|
lock |
heroLockClosed |
|
maximize |
heroArrowsPointingOut |
|
menu |
heroBars3 |
|
minimize |
heroMinus |
|
more |
heroEllipsisHorizontal |
|
navigator |
heroBars3 |
|
openWork |
heroViewColumns |
|
outline |
heroListBullet |
|
pin |
drawn for LoomWeaver | |
plugin |
heroPuzzlePiece |
|
popout |
heroArrowTopRightOnSquare |
|
preview |
heroEye |
|
reset |
heroArrowPath |
|
restore |
heroArrowsPointingIn |
|
save |
drawn for LoomWeaver | |
search |
heroMagnifyingGlass |
|
settings |
heroCog6Tooth |
|
sidebarLeftClosed |
drawn for LoomWeaver | |
sidebarLeftOpen |
drawn for LoomWeaver | |
sidebarRightClosed |
drawn for LoomWeaver | |
sidebarRightOpen |
drawn for LoomWeaver | |
sort |
heroArrowsUpDown |
|
splitPanes |
drawn for LoomWeaver | |
splitPanesDown |
drawn for LoomWeaver | |
success |
heroCheck |
|
themeDark |
heroMoon |
|
themeLight |
heroSun |
|
themeSystem |
heroComputerDesktop |
|
trash |
heroTrash |
|
undo |
heroArrowUturnLeft |
|
warning |
heroExclamationTriangle |
|
workspaces |
heroRectangleGroup |
Adding your own
You are not limited to this set, and nothing above is a ceiling on what a product may draw.
- A weaver registers glyphs at runtime with
ctx.contributeIcons, described in Authoring a weaver. First registration wins, so a plugin can add names but can never take one that is already spoken for, which is what stops an installed plugin from repainting the workbench around it. - A distribution registers glyphs at build time with
provideIcons, described in Building a distribution. A distribution may name one of the icons above, and its drawing then replaces the shipped one everywhere the chrome draws it, sandboxed surfaces included.
Contributed SVG is sanitised at registration. The rules, and the rest of the <lw-*> vocabulary, are
in Design tokens.