Skip to content

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.

GlyphNameGlyph source
addheroPlus
checkheroCheck
chevronDownheroChevronDown
chevronsLeftheroChevronDoubleLeft
chevronsRightheroChevronDoubleRight
closeheroXMark
documentheroDocument
downloadheroArrowDownTray
editheroPencilSquare
errorheroXCircle
helpheroQuestionMarkCircle
infoheroInformationCircle
lockheroLockClosed
maximizeheroArrowsPointingOut
menuheroBars3
minimizeheroMinus
moreheroEllipsisHorizontal
navigatorheroBars3
openWorkheroViewColumns
outlineheroListBullet
pindrawn for LoomWeaver
pluginheroPuzzlePiece
popoutheroArrowTopRightOnSquare
previewheroEye
resetheroArrowPath
restoreheroArrowsPointingIn
savedrawn for LoomWeaver
searchheroMagnifyingGlass
settingsheroCog6Tooth
sidebarLeftCloseddrawn for LoomWeaver
sidebarLeftOpendrawn for LoomWeaver
sidebarRightCloseddrawn for LoomWeaver
sidebarRightOpendrawn for LoomWeaver
sortheroArrowsUpDown
splitPanesdrawn for LoomWeaver
splitPanesDowndrawn for LoomWeaver
successheroCheck
themeDarkheroMoon
themeLightheroSun
themeSystemheroComputerDesktop
trashheroTrash
undoheroArrowUturnLeft
warningheroExclamationTriangle
workspacesheroRectangleGroup

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.