Icon Catalog

Every icon used in Bristlenose HTML reports, shown at multiple sizes. Currently a mix of inline SVGs, Unicode characters, and CSS pseudo-elements. Goal: migrate to a single coherent SVG icon set.

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