Icons
49 solid glyphs, painted as CSS masks over a color token. The mask is not a stylistic preference — it is the only way to tint an icon that cannot flash a rainbow mid-transition.
Why a mask and not a filter
Two reasons, in order of importance.
| # | Reason |
|---|---|
| 1 | No rainbow on hover. A filter tint needs hue-rotate() to reach a hue, and CSS interpolates hue-rotate numerically — so any transition between two tint chains sweeps the entire hue wheel and flashes a rainbow. With a mask there is no hue-rotate anywhere in the system, so that class of bug cannot occur. Hover only ever moves transform. |
| 2 | Exact color. A filter chain lands near the brand color. A mask paints the token verbatim. |
.fa-icon paints --on-ground-accent, so a glyph is yellow on navy and blue on cream without a single per-band override. Override --icon-tint only for a genuine exception.The set
One class per glyph, so the artwork stays out of the markup: <span class="fa-icon i-gavel"></span>. Each icon has an assigned meaning — reuse the meaning, do not repurpose the picture.
arrow-right Forward motion on a link or a card title
scale-balanced The practice itself; legal representation
gavel Litigation and court outcomes
car-burst Car accident practice area
car-side Vehicle claims, general auto
truck-moving Trucking collisions
motorcycle Motorcycle collisions
helmet-safety Workers' compensation, job-site injury
heart-crack Wrongful death
user-slash Uninsured and hit-and-run
hand-holding-dollar Recovery and settlement
money-bill-wave Fees, costs, no-fee-unless-we-win
file-invoice-dollar Medical bills and liens
arrow-trend-down Loss of income; downward outcomes
clock Statute of limitations, response time
phone-volume Call us; direct attorney access
comments Consultation and conversation
comment-dots Reviews and testimonials
book-open Client education, guides, articles
magnifying-glass Investigation and case review
location-dot Offices and service areas
gauge-high Vehicle speed
arrows-left-right Following distance, gaps, spacing
stopwatch Timing of a crash; seconds that matter
user-injured Physical injury; whiplash and soft tissue
brain Head injury and concussion
crutch Back, bone, and mobility injuries
microphone Recorded statements to an insurer
microphone-slash Declining a recorded statement
video Dashcam and security footage as evidence
user-doctor Seeing a doctor; medical treatment
scale-unbalanced Contributory negligence; shared fault
file-lines Crash reports and written records
camera Scene photographs
people-group Witnesses
notes-medical Medical records
hashtag Claim numbers and reference IDs
user-tie Adjusters, supervisors, the other side
envelope-circle-check Confirmed delivery and receipt
shield-halved Insurance coverage
link Causation: linking the crash to the injury
sack-dollar Damages and claim value
building-columns Courts and state agencies
hospital Hospital bills and medical liens
file-signature Releases and documents you sign
triangle-exclamation A trap or warning
circle-check Do this; the right move
circle-xmark Don't do this; the wrong move
bell Subscribe and notifications
On every surface
The same markup on six grounds. Nothing changes but the wrapper class.
Sizes
| Token | Value | Use |
|---|---|---|
--icon | 2.5rem | Default. Inline with text, trust items, service rows. |
--icon-lg | 4rem | Practice cards, where the glyph leads the composition. |
public/design-system/icons/ and are referenced from --i-* tokens in brand.css. Adding a glyph means adding the file, the --i- token, and the .i- class — and giving it an assigned meaning in the table above. Video motion graphics draw the same files (see Motion graphics), so a glyph added here is available to a board by name.