Bristlenose Icon Catalog

## Inline SVG Icons

Custom SVG icons embedded directly in HTML by `render_html.py`. All use `stroke="currentColor"` for CSS colour inheritance. These are the most "proper" icons in the system.

Search SVG
viewBox 0 0 16 16 • stroke 1.5
Toolbar search toggle button
Search clear SVG
viewBox 0 0 12 12 • stroke 1.5
Clear search input button
Codebook / external link SVG
viewBox 0 0 16 16 • stroke 1.5
Toolbar codebook button (opens new window)
Filter SVG
viewBox 0 0 16 16 • stroke 1.5
Toolbar tag filter button
Dropdown chevron SVG
viewBox 0 0 10 10 • stroke 1.5
View switcher + tag filter dropdown arrows
Copy / export SVG
viewBox 0 0 16 16 • stroke 1.5
Toolbar CSV export button
Hide / eye-slash SVG
viewBox 0 0 24 24 • stroke 2
Quote hide button (appears on hover)

## Unicode Character Icons

Characters used as icons throughout the UI. Rendered via HTML entities in `render_html.py` or via `textContent` in JS modules. These are the ones most in need of replacement with proper SVG icons.

× × × × frustration ×
Delete / close CHAR
U+00D7 × (multiplication sign) • 7+ uses
Badge delete circles, modal close, search clear fallback
★ ★ ★ ★
Star (favourite) CHAR
U+2605 ★ (black star) • render_html.py
Quote star/favourite toggle button
✎ ✎ ✎ ✎
Edit (pencil) CHAR
U+270E ✎ (lower right pencil) • render_html.py
Quote edit button, name edit hint
← ← ← ←
Back arrow CHAR
U+2190 ← (leftwards arrow) • render_html.py
Transcript page "back to report" link
→ → → →
Journey arrow CHAR
U+2192 → (rightwards arrow) • render_html.py
User journey flow indicators
↩ ↩ ↩ ↩
Undo / restore CHAR
U+21A9 ↩ (leftwards arrow with hook) • render_html.py
Restore original text button (after editing)
♥ ♥ ♥ ♥
Heart CHAR
U+2661 ♡ (white heart suit) • render_html.py
Footer "made with" attribution
+ + + +
Add / plus CHAR
U+002B + (plus sign) • codebook.js, render_html.py
Add tag button ("+ add"), codebook new group card
▾ ▾ ▾ ▾
Dropdown chevron (text) CHAR
U+25BE ▾ (black down-pointing small triangle) • hidden.js
Hidden quotes badge dropdown toggle
— — —
Em dash (separator) CHAR
U+2014 — • names.js, render_html.py
Speaker attribution separator ("— p1")
· · ·
Middle dot (separator) CHAR
U+00B7 · • tag-filter.js, render_html.py
Inline metadata separator, tag filter active label

## CSS Pseudo-element Icons

Characters rendered via CSS `::before` / `::after` pseudo-elements. These bypass the DOM entirely.

tag name × .badge-ai::after
AI badge delete circle PSEUDO
content: "\00d7" • atoms/badge.css
Delete AI-generated tags (appears on hover)
▶ closed ▼ open
Disclosure triangles PSEUDO
content: "▶" / "▼" • organisms/coverage.css
Coverage details toggle ("Show omitted segments")

## Summary

Icon | Glyph | Type | Uses | Source | Replaceable?
--- | --- | --- | --- | --- | ---
Search |  | SVG | 1 | `render_html.py` | Replace with icon set version
Search clear |  | SVG | 1 | `render_html.py` | Replace with icon set version
External link |  | SVG | 1 | `render_html.py` | Replace with icon set version
Filter |  | SVG | 1 | `render_html.py` | Replace with icon set version
Chevron down |  | SVG | 2 | `render_html.py` | Replace with icon set version
Copy / clipboard |  | SVG | 1 | `render_html.py` | Replace with icon set version
Eye-slash / hide |  | SVG | 1 | `render_html.py` | Replace with icon set version
Delete / close | × | CHAR | 7+ | CSS, JS, HTML | Priority — most used icon, fragile centering
Star | ★ | CHAR | 2 | `render_html.py` | Yes — filled/outline star from icon set
Pencil | ✎ | CHAR | 3 | `render_html.py` | Yes — edit/pencil icon from icon set
Back arrow | ← | CHAR | 1 | `render_html.py` | Yes — arrow-left from icon set
Journey arrow | → | CHAR | 1 | `render_html.py` | Yes — arrow-right from icon set
Undo / restore | ↩ | CHAR | 1 | `render_html.py` | Yes — undo/rotate-ccw from icon set
Heart | ♥ | CHAR | 1 | `render_html.py` | Low priority — decorative only
Plus | + | CHAR | 2 | JS, HTML | Yes — plus icon from icon set
Down triangle | ▾ | CHAR | 1 | `hidden.js` | Yes — chevron-down from icon set
Disclosure ▶/▼ | ▶ | PSEUDO | 1 | `coverage.css` | Yes — chevron-right/down from icon set

### Migration plan

- Pick an icon set: Candidates are Lucide (MIT, 1500+ icons, 24px grid, clean stroke style), Heroicons (MIT, by Tailwind team, 24px+20px, outline/solid), Phosphor (MIT, 6 weights, 256px viewBox), and Tabler Icons (MIT, 5700+, 24px, stroke-based).
- Requirements: MIT or ISC licence. Stroke-based (matches our existing SVGs). Good rendering at 12–16px (toolbar icon size). Includes: x/close, search, filter, chevron, external-link, copy, eye-off, star, pencil, arrow-left/right, undo, plus, heart.
- Priority order: (1) Delete/close × — 7+ uses, fragile centering. (2) Star ★ — rendering varies across OS. (3) Pencil ✎ — ditto. (4) Arrows & undo. (5) Decorative (heart, separators).
- Implementation: Inline SVG strings in `render_html.py` (same as current toolbar icons). No icon font, no sprite sheet, no external files — reports must be self-contained single-file HTML.
- Existing SVGs: Our 7 custom SVGs use varied viewBox sizes (10, 12, 16, 24) and stroke widths (1.5, 2). The chosen icon set should normalise these to a consistent grid.