Icon

The set

Convenience presets for ERP concepts common enough to be worth shipping a name for — each is just a value of --bo-icon-src, same as your own would be (next section).

Deprecated 4

Kept shipping (removing published classes is a next-major change, not a tidy-up) but no longer recommended: each was only ever one example value of --bo-icon-src, so point that at your own SVG instead (next section). Screens that already render one keep working until the next major — deprecating a glyph deprecates the recommendation, not the class.

Themable — it's just currentColor

Set color (or inherit it) and the glyph follows — semantic tokens, dark mode, and brand presets all work with no icon-specific wiring. Under forced-colors the icons repaint in the system text color instead of vanishing (mask icons need an explicit opt-out; shipped).

Sizes — font-size IS the size

No size modifiers: 1em means an icon in a compact table row is smaller than one in a spacious header for free.

In context — sidebar links and icon buttons

Composes with the existing .bo-sidebar-nav__icon slot and .bo-btn--icon — decorative icons carry aria-hidden; an icon-only button labels itself with aria-label, never the icon. Both buttons here pass the opener's test deliberately: a cross for close and a bar chart for reports are conventions a reader already holds. The same treatment on a domain action — "post goods issue" — would not be, and that button gets its words. Neither glyph here is one of the deprecated ones above — copy what this page still recommends.

Any icon you like — one custom property

The glyphs above are not a privileged list: each one is just a value of --bo-icon-src. Point that property at any SVG and the element gets the framework's sizing, currentColor painting, density tracking and forced-colors handling with no new class from us.

<span class="bo-icon" aria-hidden="true"
  style="--bo-icon-src: url('data:image/svg+xml,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;%23000&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot;><path d=&quot;M12 5v14M5 12h14&quot;/></svg>')"></span>
<span>Add line</span>

That works with Lucide, Heroicons or your own brand mark — copy the SVG, percent-encode # as %23, and set the property. Icons drawn with stroke="currentColor" need no edit at all, because the mask ignores the SVG's own colours and paints with yours.

Why there is no 200-icon catalogue here, since that is the obvious thing to ask for: the 26 glyphs shipped today are 10.5% of the whole framework by size, because every glyph is an inlined SVG. At that rate two hundred would add roughly 79 kB, against a whole framework that is 98 kB — to compete with icon sets that are better maintained and free. One property is the smaller answer and the more general one.

Your own artwork — which mechanism, and when none

Four questions come up as "can we have SVG for this?". Three already have an answer that ships, and the fourth is a no.

What this framework will not ship: an illustration set. Empty states and error screens are the places an ERP feels most broken, and the fix is almost always a clear sentence and the action that resolves it — not a drawing. A picture that has to be redrawn for every tenant's brand, translated for nothing, and downloaded on a warehouse tablet is cost without an answer. If you want one, it is an <img>, and it is alt="".

Markup

<!-- Decorative (label carries the meaning). bo-sidebar-nav__icon is the rail's
     slot — it sizes the box and the collapsed rail is derived from it: -->
<a class="bo-sidebar-nav__link" href="/invoices">
  <span class="bo-icon bo-icon--invoice bo-sidebar-nav__icon" aria-hidden="true"></span>
  <span class="bo-sidebar-nav__label">Invoices</span>
</a>

<!-- Icon-only control labels ITSELF, never the icon: -->
<button class="bo-btn bo-btn--ghost bo-btn--icon" aria-label="Close">
  <span class="bo-icon bo-icon--close" aria-hidden="true"></span>
</button>

<!-- Your own glyph in one line: point --bo-icon-src at any single-color SVG. -->
<style>
  .my-icon--rocket { --bo-icon-src: url("data:image/svg+xml,<svg …></svg>"); }
</style>
<span class="bo-icon my-icon--rocket" aria-hidden="true"></span>

Quick reference generated

API generated from CSS

• Painted by currentColor via mask-image — themes, dark mode, and brand presets apply with zero icon-specific wiring; no new contrast pairs needed (an icon inherits the already-gated color of its text context).
• Decorative icons (next to a visible label) are aria-hidden="true"; icon-only controls label THEMSELVES (aria-label on the button/link).
• Deliberately a small set, not a library — add your own with one --bo-icon-src line, or paste inline SVG with fill="currentColor"; both are first-class. Set the custom property, not mask-image directly: .bo-icon is in @layer bo-components, so a mask-image override only paints where the consumer rule outranks that layer, while the property has no competing declaration to lose to.
• Forced-colors: mask icons vanish by default (the paint is a background-color, which forced colors override) — the shipped opt-out repaints them in CanvasText.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 99 · Firefox 97 · Safari 15.4

Alignment scored

2026-08-23

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.1.0. The floor is derived from this component's stylesheet alone — set by @layer — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (15/15) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-23.