Iconography

• Import from lucide-react (lucide-react-native in the mobile app). No other icon set, and no hand-drawn SVG for something Lucide has.
• Keep Lucide's 2px line. Don't pass strokeWidth; the only exception is a tick inside something tiny (Checkbox draws its 12px tick at 3px so it doesn't look faint).
• Inside a Button, IconButton or Tag, pass a bare icon: the component sizes it. A size class on it opts out.
• A new icon you draw yourself sits on Lucide's 24px grid with a 2px line, round ends and corners, in currentColor.

import { MapPin, Plus } from "lucide-react";

// Inside a button: bare, the button sizes it
<Button><Plus aria-hidden="true" />Make intro</Button>

// Beside words: sized to the text, hidden from screen readers
<span className="inline-flex items-center gap-1.5 text-13 text-[var(--text-muted)]">
  <MapPin aria-hidden="true" className="size-3.5" />
  Lagos
</span>

The icons the apps use most, by what they mean. Use the same icon for the same meaning everywhere, and never one meaning's icon for another.

Every icon in Lucide, read from the installed package. Search by what you need; Bridge's own icon for that meaning comes first. Icons that already mean something say so.

When nothing in the table fits

• Search here (or ask the agent's find_icon) for a Lucide icon that isn't already taken for another meaning.
• Add the new meaning to the table in the same change (content/foundations/iconography/meanings.ts), so everyone uses the same icon for it from then on.
• If Lucide has nothing, draw one on its 24px grid with a 2px line and add it to the package, never to one app. A company logo goes in BrandMark.

Two rules give every size. Beside words, an icon is 2px bigger than the text. Inside a square or a circle, it's half the shape's width.

Beside words

In a shape

Icons take their color from what they sit in. They're quiet at rest, darken on hover, and turn blue only when something is on or picked.

An icon beside words is hidden from screen readers, because the words already say it. An icon on its own is the only name its button has, so it's named. Never neither.

Where an icon names a section or a topic, it sits in Card's header square: 36px, 8px corners, tinted blue, green, amber or purple by topic, with an 18px icon.

Logos aren't icons and Lucide has none. Use BrandMark for LinkedIn, Google, Microsoft, Apple, WhatsApp, Telegram and Chrome: their own colors, at icon size.