Brokkr
Brokkr
63 icons from Tabler's outline set, drawn at a 1.5 stroke so a 16 px icon has the same 1 px line as Brokkr's hairlines. Each has one Brokkr name and one meaning, everywhere.
Rules
Put a word next to it. An icon button without a label has an accessible name and a tooltip that say exactly what it does ("Fit model", "Show properties").
Icons use the color of the text beside them. A status icon takes the status text color and sits next to the status word, so color never carries the meaning alone.
Apps use only the names below. A new icon is added to Brokkr first (icons/set.json), so the same action never gets two drawings.
Icons mark actions, objects and status. They don't illustrate headings or fill space, and Signal is never an icon color.
| Size | Token | Use | Stroke on screen |
|---|---|---|---|
| 16 px | --npc-icon-size-dense | Toolbars, icon buttons, tables, the inspector and menus, beside 13 px text | 1 px |
| 20 px | --npc-icon-size-body | Beside 16 px body text | 1.25 px |
| 24 px | --npc-icon-size-large | Empty states and the 3D viewer tool strip | 1.5 px |
The set
Each at 16, 20 and 24 px. Select a name to download its SVG.
Create something new: New topic, Add member.
Edit in place.
Delete; always confirmed.
Close a panel, dialog or toast; remove a filter chip.
Done, selected or checked.
Copy to the clipboard.
Download or export a file.
Upload or import a file.
Print this tab or report.
Reload data.
Undo.
Redo.
Search field and search button.
Show filters.
Sortable column header.
Settings and display options.
More actions in a menu.
Open the side navigation on small screens.
Home or overview.
Open a menu or a section.
Go into an item; collapsed section.
Previous.
Back.
Next or go.
Opens outside the app; pairs with the link text.
Reference link.
A 3D model or IFC file.
Fit the model to the view.
Levels, models and layers.
Measure tool.
Section box or plane.
Shown; press to hide.
Hidden; press to show.
Show or hide the inspector.
Performance.
A BCF topic.
Comments and their count.
A document or drawing.
A folder or container.
A snapshot or image.
A date or the data date.
A time, or pending.
History and replay.
Program and schedule views.
Cost.
Decisions.
Risks.
Board view.
Table view.
List view.
Complete, approved, within tolerance; with the positive text color and a word.
Needs attention or in progress late; with the caution text color and a word.
Overdue, rejected, at risk; with the risk text color and a word.
Not started or for information; with the info text color and a word.
Help and explanations.
Locked or read-only.
Notifications.
Light and dark
Three modes: System, the default, follows the computer; Light and Dark override it. The choice is remembered per person.
In apps with a user menu, the switch sits there as three choices with their icons. Pages without a user menu, like this site, show one icon button at the end of the header. It shows the mode you switch to: a moon while light, a sun while dark.
The user menu in an app, opened from the initials.
Use the icons
Copy sprite.svg into the app and reference an icon by its Brokkr name. Browsers don't load SVG sprites from another site, so each app keeps its own copy, pinned to a Brokkr version, like the token CSS.
<svg class="icon" aria-hidden="true">
<use href="/assets/brokkr-icons.svg#npc-icon-fit"></use>
</svg>
.icon { width: var(--npc-icon-size-dense); height: var(--npc-icon-size-dense); }npc-icon-<name>