Iconography

Icon Library

The FRAYT Design System uses Lucide React as its icon library, configured in components.json.

Installation

Lucide React is already included as a dependency:

pnpm add lucide-react

Usage

Import icons individually for tree-shaking:

import { Truck, Package, Clock, MapPin } from 'lucide-react';

function StatusBar() {
  return (
    <div className="flex gap-2">
      <Truck className="h-5 w-5" />
      <Package className="h-5 w-5" />
      <Clock className="h-5 w-5" />
      <MapPin className="h-5 w-5" />
    </div>
  );
}

Sizing

Guidelines

• Always use h- and w- Tailwind classes for sizing — never inline width/height props
• Color icons with text-* utilities: text-muted-foreground for secondary, text-primary for emphasis
• Icon-only buttons must include an aria-label for accessibility
• Prefer outlined (default) icons over filled variants for consistency