Design system / Icons

Lucide, used sparingly.

Leadjr uses the lucide-react icon set with a curated subset. Add nothing decorative. If a needed icon is missing from the approved list, propose it before reaching past the list.

PaperReceiptsActions

05A / Library

lucide-react

Lucide is the source library: tree-shaken, line-style, weight matches the editorial chrome. Override with a custom SVG only when no Lucide icon fits the meaning.

Default size

20px stroke 1.75. Inherits currentColor.

Small

16px for inline-with-text. Use when adjacent to body type.

Large

24px for standalone affordances or empty-state hero glyphs.

05B / Approved set

The icons cleared for use.

If you need a Lucide icon not on this list, add it to the ICONS array in app/(app)/design-system/_components/data.ts and update the usage column.

Arrow right

import {ArrowRight} from 'lucide-react'

Forward route action, "open" affordances.

Arrow left

import {ArrowLeft} from 'lucide-react'

Back navigation, parent route.

Arrow up right

import {ArrowUpRight} from 'lucide-react'

External or off-page link.

Check

import {Check} from 'lucide-react'

Verified claim, completed step.

import {X} from 'lucide-react'

Close drawer, dismiss, reject claim.

Plus

import {Plus} from 'lucide-react'

New capture, add entry.

import {Search} from 'lucide-react'

Search bar, filter open.

Filter

import {Filter} from 'lucide-react'

Filter set toggle.

Calendar

import {Calendar} from 'lucide-react'

Date anchor, journal entry.

Clock

import {Clock} from 'lucide-react'

Time of day, recency indicator.

File text

import {FileText} from 'lucide-react'

Document source type.

Quote

import {Quote} from 'lucide-react'

Excerpt callout.

Link

import {Link} from 'lucide-react'

Source link, attached reference.

External link

import {ExternalLink} from 'lucide-react'

Off-domain reference.

Eye

import {Eye} from 'lucide-react'

Preview, peek at entry.

Pen

import {PenLine} from 'lucide-react'

Edit, capture entry.

Sparkles

import {Sparkles} from 'lucide-react'

Generated draft, AI-touched surface.

Shield

import {Shield} from 'lucide-react'

Verified source, defensible claim.

Alert

import {AlertCircle} from 'lucide-react'

Needs evidence, conflict.

import {Menu} from 'lucide-react'

Mobile nav trigger (today: inline bars).

Chevron right

import {ChevronRight} from 'lucide-react'

Disclosure, inline forward.

Chevron down

import {ChevronDown} from 'lucide-react'

Disclosure, dropdown.

05C / Sizes

Three sizes, one stroke.

Stroke stays at 1.75 so icons sit alongside Geist without competing with serif headlines.

16px

20px

24px

05D / Custom

When Lucide is not enough.

The drawn logo, the footer signature, and a handful of inline marks are custom SVGs that live in web/public or as inline JSX (see AnimatedFooterLogo, the bars-icon in SiteHeader). Treat these as one-offs, not a competing icon system.

Logo

public/logo.svg, rendered as a CSS mask in SiteHeader so it inherits ink color.

Footer signature

components/AnimatedFooterLogo.tsx, drawn with motion for the SVG stroke animation.