feat(web): install and adopt Lucide icons #67

New Issue

forbes · 2026-02-13T19:00:24Z

forbes commented

2026-02-13 19:00:24 +00:00

Ref: docs/STYLE.md § Icons

The style guide requires Lucide icons at standard sizes (14px inline, 16px buttons, 20px headers). Currently the codebase uses Unicode symbols throughout:

▲ / ▼ for sort arrows (ItemTable.tsx)
× for close/remove buttons (multiple files)
✓ for checkmarks (ContextMenu.tsx)
▬ for dividers (LoginPage.tsx)

Tasks:

Install lucide-react
Replace Unicode symbols with Lucide components across all components
Apply standard sizing: size={14} (inline/table), size={16} (buttons/nav), size={20} (headers/empty states)
Use strokeWidth={1.5} (Lucide default)

This touches most component files so it's a good candidate for a focused sweep.

**Ref:** `docs/STYLE.md` § Icons The style guide requires Lucide icons at standard sizes (14px inline, 16px buttons, 20px headers). Currently the codebase uses Unicode symbols throughout: - `▲` / `▼` for sort arrows (`ItemTable.tsx`) - `×` for close/remove buttons (multiple files) - `✓` for checkmarks (`ContextMenu.tsx`) - `▬` for dividers (`LoginPage.tsx`) **Tasks:** 1. Install `lucide-react` 2. Replace Unicode symbols with Lucide components across all components 3. Apply standard sizing: `size={14}` (inline/table), `size={16}` (buttons/nav), `size={20}` (headers/empty states) 4. Use `strokeWidth={1.5}` (Lucide default) This touches most component files so it's a good candidate for a focused sweep.

forbes referenced this issue from a commit

2026-02-13 20:38:00 +00:00

feat(web): install lucide-react and replace unicode icons (#67)

forbes referenced a pull request that will close this issue

2026-02-13 20:38:11 +00:00

fix(web): style guide batch 3 — icons, font scale, spacing #85

forbes closed this issue

2026-02-13 21:00:02 +00:00

Sign in to join this conversation.