Icons

Stroke width

Lucide's default stroke-width is 2. PRIZM overrides to 1.5 via a single rule in app/globals.css:

@layer base {
  svg {
    stroke-width: 1.5;
  }
}

The lighter stroke reads as more precise and pairs better with PRIZM's typography weights. The override applies to ALL svg elements site-wide. To deviate on a single icon, use the Tailwind arbitrary modifier ([stroke-width:2]) or inline style. The lucide strokeWidth prop is overridden by the CSS rule, so prop-level changes have no effect.

Size scale

Five sizes cover essentially every use case. Apply via Tailwind class on the icon element. Sizes are not enforced by tokens — the goal is to keep choices small and predictable, not to gate them.

Pairing with text

Use inline-flex items-center and an explicit gap that scales with the text. Vertical centering is rarely correct by default — let flex align them.

Accessibility

The two rules that cover 95% of cases:

<Button>
  <Check className="h-4 w-4" aria-hidden />
  Save changes
</Button>

<Button variant="ghost" size="icon" aria-label="Settings">
  <Settings className="h-4 w-4" aria-hidden />
</Button>

Import any of these by name from lucide-react:

import { Check, Search, Settings } from "lucide-react";

Custom SVGs

For brand marks and product-specific glyphs lucide doesn't cover, write the SVG inline. Set stroke-width on each <path> directly — the site-wide svg { stroke-width: 1.5 } only affects elements that don't have an explicit per-path value. Include a <title> for accessibility.

<svg
  viewBox="0 0 24 24"
  fill="none"
  className="h-5 w-5 text-accent"
  aria-hidden
>
  <title>PRIZM</title>
  <path
    d="M12 2L22 20H2L12 2Z"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinejoin="round"
  />
  <path
    d="M12 2L12 20"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinejoin="round"
  />
</svg>