Guidelines

Iconography

Icons are thin outlines from Lucide, drawn at a 1.25 stroke so they sit beside Helvetica at the weight of its Roman. They are tools, not decoration: every one does something.

The set

The full set the storefront and the hub use. Anything new comes from the same library, at the same stroke.
  • Search

    Search field, mobile bar

  • Heart

    Wishlist

  • UserRound

    Account

  • ShoppingBag

    Bag, with its count inside

  • MapPin

    Stores

  • ChevronDown

    Country, menus

  • Menu

    Mobile menu

  • ChevronLeft

    Carousels, back

  • ChevronRight

    Carousels, forward

  • X

    Close

  • LoaderCircle

    Load more, while loading

Size and target

A 20px glyph centred in a 40px target, so a thin icon is still easy to hit. The label is required: there is no visible text.
4020
20px glyph, 40px target
In the header, at size
components/coach/icon-button.tsx
<IconButton label="Bag, 2 items" badge={2}>
  <ShoppingBag />
</IconButton>

Stroke

Lucide's default of 2 is too heavy beside Helvetica Roman; 1 disappears at 20px.
1
1.25 · Coach
2

Networks

Network marks come from Simple Icons, filled, in ink, at 16px. SocialLinks sets the five the footer uses; BrandIcon draws any one.
  • Instagram
  • Facebook
  • X
  • TikTok
  • YouTube
  • Spotify, in co-branding only

Rules

DoOutline, ink, 1.25. A saved item is shown with text, not a filled heart.
Don'tFilled and coloured icons read as badges and pull focus from the photographs.
  • Every icon-only control has a label (aria-label); icons beside text are aria-hidden.
  • No icons in story cards, eyebrows or titles.
  • Icons take the colour of their text: ink, or white on the store bar and photographs.