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.

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.