UI icons — Lucide
Interface icons come from Lucide (the shadcn/ui companion set): consistent stroke weight, predictable naming, tree-shakeable, and a vocabulary AI agents already know. Don't mix icon sets in product UI — this is the vocabulary for system interfaces: nav, controls, product UI.
currentColor.Brand icons — Icon Generator
Brand and feature iconography is generated with the Icon Generator, which maintains stroke weight, corner radius, and silhouette rules by construction.
Use the inked style for product marketing and communications, not dense UI — it's slower to scan than Lucide.
Attribution
Lucide is ISC-licensed, so you can use, modify, and ship its icons freely, including commercially. It asks one thing back: its copyright and permission notice travels with every copy you distribute. Icons the Icon Generator produces are Lucide derivatives, so they carry the same notice as the originals.
This doesn't mean crediting icons in the interface. One third-party notices page or file per product covers everything you ship — this site's shows the shape. Linking to Lucide's own repository doesn't discharge it: the notice has to be served from your product, not borrowed from someone else's.
Usage
import { Calendar } from "lucide-react";
<Calendar aria-hidden size={20} strokeWidth={2} />
{/* An icon-only button carries a label */}
<button aria-label="Open calendar"><Calendar aria-hidden /></button>Best practices
- DoUse Lucide for interface icons, and the ink set for marketing and comms.
- DoGive every icon-only button a descriptive aria-label (A11Y-3).
- DoMatch an icon's stroke weight to the adjacent text weight.
- Don'tMix icon sets inside product UI.
- Don'tStack an icon in a decorative tile above its heading (SLP-5).