Design System · DS-002

Lago Iconography System

Internal QA/reference page for the canonical LAGO icon system. Lucide is the sole functional icon library. Not linked from any product navigation.

Icon Library, Categories & Sizes

DS-002 Lago Iconography System — Lucide is the sole canonical library (24×24 grid, 2px stroke, outline). Direct import from lucide-react IS the canonical implementation. No second library, no custom redraws.

Representative categories

Navigation

ArrowLeft

ArrowRight

ChevronRight

ChevronDown

House

Actions

Plus

Pencil

Trash2

Save

Download

Upload

Check

Commerce / Booking

ShoppingBag

CreditCard

DollarSign

Receipt

CalendarCheck

Travel / Experience

Sailboat

Anchor

Compass

MapPin

Waves

Communication

MessageSquare

Mail

Phone

Send

Bell

Users

User

Users

UserPlus

UserCheck

Calendar / Time

Calendar

Clock

CalendarDays

AlarmClock

Location

MapPin

Navigation

Globe

Map

Status

CircleCheck

TriangleAlert

CircleX

Info

Circle

Data / Management

FileText

Settings

Filter

LayoutGrid

List

Media

Image

Camera

Video

Star

Eye

Production sizes

Standard sizes: 16, 20, 24, 32px. Button-icon relationships: 32px→16px, 40px→20px, 48px→20px.

sm — 16px

Compact metadata, dense tables

h-4 w-4

md — 20px

Standard inline, form controls, buttons

h-5 w-5

lg — 24px

Primary UI, major actions, cards

h-6 w-6

xl — 32px

Prominent empty-state / feature

h-8 w-8

Semantic colour tokens

Icons inherit LAGO semantic tokens via Tailwind text-colour classes. No raw HEX.

text-primary#0F172A

text-secondary#475569

text-tertiary#64748B

action-accent#16B7BE

status-success#22C55E

status-warning#F59E0B

status-error#EF4444

Integration, Accessibility & Reference

How DS-002 icons integrate with DS-001 Button, DS-009 StatusBadge, DS-007 Form, and the decorative vs meaningful accessibility rules.

Icon + label

September 17, 2026 Muskoka, ON 4 guests

Standalone icon (decorative + meaningful)

Decorative — paired with textMeaningful — aria-label required

Button integration (DS-001)

Status integration (DS-009)

ConfirmedPendingFailed

DS-009 badges carry their own Lucide icon (CheckCircle2, AlertTriangle, XCircle) — colour never carries meaning alone.

Form integration (DS-007)

Search experiences

Accessibility rules

Decorative (paired with text): aria-hidden="true" — Lucide default
Meaningful / icon-only: control must carry aria-label
No emoji as UI icons where an approved Lucide icon exists
No Unicode substitutes for functional icon controls

Reference

Library: lucide-react ^0.475.0 — direct import IS the implementation

Grid: 24×24 viewBox, 2px stroke, outline treatment

Brand assets: GoogleIcon, SignupIcons — separate from DS-002 (not UI icons)

No second icon library · no custom redraws · no emoji UI icons

Note:Lucide is canonical for functional UI icons. Official brand assets (Google "G", LAGO signup illustrations) remain separate and are not redrawn or recoloured.