Foundations

Iconography

The live site ships a custom, per-deploy icon font (icons-font.css) with 118 glyphs — proprietary and not safe to vendor. Lucide icons stand in as open-source equivalents below, keyed by the original glyph name.

searchSearch

cartShoppingCart

accountUser

menuMenu

closeX

right_chevronChevronRight

left_chevronChevronLeft

up_chevronChevronUp

down_chevronChevronDown

map_pinMapPin

heartHeart

heart-fillHeart

plusPlus

minusMinus

checkCheck

check-circleCheckCircle2

infoInfo

alertAlertTriangle

filtersSlidersHorizontal

store-locatorMapPinned

truck-thinTruck

recycleRecycle

cruelty-freeRabbit

playPlay

pausePause

shareShare2

trashTrash2

editPencil

calendarCalendar

settingsSettings

emailMail

instagramInstagram

facebookFacebook

youtubeYoutube

sunSun

moonMoon

Do's and Don'ts

Pull icons from lucide-react using the mapping above as your reference for which glyph stands in for which original icon, rather than picking a similar-looking icon from a different set.

·Use the Lucide icon already mapped to a given glyph name, so the same concept always renders the same icon across the app.
·Size icons off the type scale they sit next to (h-4 w-4 for text-sm, h-5 w-5 for larger labels) instead of a fixed size everywhere.
·Add a new row to iconMap when a concept doesn't have a mapping yet, rather than importing an icon ad hoc in a component.

Don't

·Don't vendor or reproduce the site's actual icon font — it's a proprietary, per-deploy asset, which is exactly why this mapping exists.
·Don't mix in icons from a different library (Font Awesome, Heroicons, etc.) — stroke weight and grid won't match Lucide's.
·Don't use an icon without a text label or aria-label in interactive contexts — several of these glyphs aren't self-explanatory alone.