Problem
The SPA has no icon library. Navigation and actions use Unicode arrows (←, →) and a single emoji cog (⚙) in map controls. This is inconsistent, poor for accessibility, and doesn't match Mantine 9's visual language.
Intended outcome
Add @tabler/icons-react (Mantine's native icon set) and roll icons through the SPA tastefully — navigation, primary CRUD actions, import/export, and map settings. Data-dense surfaces (tables, badges, frequency text) stay text-first.
Tasteful-use rules
NavLink / Button leftSection with label kept
- Standard action vocabulary (plus, pencil, trash, arrow-left, download, upload)
- Size 16 in nav/links, 18 in
ActionIcon; stroke={1.5}
- Named imports per file; no barrel re-exports
- Icon-only controls must have
aria-label
Slices
- Foundation — dependency,
iconSizes.ts, display conventions
- Shell navigation —
App.tsx, reference index, ActiveProjectBar
- CRUD and back navigation — list/detail/edit routes, ConfirmDeleteModal, ZoneMemberPicker
- Import/export/workflows — ImportDropzone, Export, SummaryCard, ProjectList
- Map and location — MapControls, UseMyLocationButton
- Docs and PR
Affected
package.json, src/lib/iconSizes.ts
src/App.tsx, nav and action surfaces across routes/components
docs/reference/display-conventions.md, docs/features/ui/
Out of scope
- Leaflet marker
divIcon styling
- OpenGD77 CSV Icon columns
- Icons on table rows, BandPill, mode badges
- Alternative icon libraries
Workflow
Branch {num}/paddy/icon-library from origin/main, atomic conventional commits per slice, PR linking Closes #{num}.
Problem
The SPA has no icon library. Navigation and actions use Unicode arrows (
←,→) and a single emoji cog (⚙) in map controls. This is inconsistent, poor for accessibility, and doesn't match Mantine 9's visual language.Intended outcome
Add
@tabler/icons-react(Mantine's native icon set) and roll icons through the SPA tastefully — navigation, primary CRUD actions, import/export, and map settings. Data-dense surfaces (tables, badges, frequency text) stay text-first.Tasteful-use rules
NavLink/ButtonleftSectionwith label keptActionIcon;stroke={1.5}aria-labelSlices
iconSizes.ts, display conventionsApp.tsx, reference index, ActiveProjectBarAffected
package.json,src/lib/iconSizes.tssrc/App.tsx, nav and action surfaces across routes/componentsdocs/reference/display-conventions.md,docs/features/ui/Out of scope
divIconstylingWorkflow
Branch
{num}/paddy/icon-libraryfromorigin/main, atomic conventional commits per slice, PR linkingCloses #{num}.