Icon reference¶
TomeTrove uses a curated subset of Phosphor Icons (regular weight). Icons are bundled in a single file as an Alpine.js <x-icon> component — see ADR 0007 for the rationale.
This page lists every icon in the set, its Phosphor name, its Figma variable name, and where it is used.
Usage in HTML¶
<x-icon name="magnifying-glass" class="w-5 h-5 text-secondary"></x-icon>
<x-icon name="bell" class="w-5 h-5 text-primary"></x-icon>
The component renders an inline <svg> with currentColor for stroke/fill. Tailwind text-color classes (text-primary, text-secondary, text-accent, etc.) control the icon color. Size is controlled by w-* and h-* Tailwind classes.
Icon inventory¶
| Icon | Phosphor name | Figma variable | Used in | Purpose |
|---|---|---|---|---|
sun |
icon/sun |
theme-toggle |
Light mode indicator | |
moon |
icon/moon |
theme-toggle |
Dark mode indicator | |
magnifying-glass |
icon/magnifying-glass |
search-wishes, add-wish |
Search input icon | |
bell |
icon/bell |
notifications |
Notification bell (with badge) | |
trend-down |
icon/trend-down |
notifications-dropdown |
Price-drop alert indicator | |
sign-out |
icon/sign-out |
header |
Logout button | |
coins+money (compound) |
icon/coins-money |
currency-selector |
Currency dropdown icon | |
globe |
icon/globe |
country-selector |
Country dropdown icon | |
caret-down |
icon/caret-down |
currency-selector, country-selector |
Dropdown chevron | |
percent |
icon/percent |
alert-threshold |
Percentage input suffix | |
star |
icon/star |
reading-languages |
Preferred language marker | |
dots-six-vertical |
icon/dots-six-vertical |
accepted-formats |
Drag handle for reordering | |
book-open |
icon/book-open |
add-wish |
Title search mode | |
barcode |
icon/barcode |
add-wish |
ISBN search mode | |
x |
icon/x |
rename-share |
Close / cancel button | |
check |
icon/check |
rename-share |
Save / confirm button |
Icons use the Phosphor regular weight by default. Some icons may use other weights (e.g. fill for active/toggled states, bold for emphasis) — the weight is noted per-icon where it differs. Source: @phosphor-icons/core, MIT licensed.