Foundations
Icons
Cognition uses one icon library, sized on the 4px scale and colored with text tokens. Icons clarify actions and status — they don't decorate.
Library
Lucide is the only icon set. Import every icon from lucide-react. Don't add a second icon library or paste raw SVGs — one consistent set keeps the visual language coherent and themeable.
import { Bell } from "lucide-react";Sizing
<Bell className="size-4" /> {/* 16px — default, inline with text */}
<Bell className="size-5" /> {/* 20px — medium */}
<Bell className="size-6" /> {/* 24px — large */}size-4 (16px) is the default and pairs with body text; step up to size-5 (20px) or size-6 (24px) for emphasis. Stay on the 4px scale — no arbitrary pixel sizes.
Color
{/* Icons inherit currentColor — set it with a text-* token */}
<Heart className="size-5 text-text-default" />
<Heart className="size-5 text-text-subtle" />
<Heart className="size-5 text-text-primary" />
<Heart className="size-5 text-text-danger" />Icons render in currentColor, so a text-* token sets their color and it remaps on theme change. Never reach for a hardcoded hex or a raw palette utility.
Usage
<Button>
<Plus />
New item
</Button><Button size="icon" aria-label="Settings">
<Settings />
</Button><span className="inline-flex items-center gap-1.5 text-text-subtle">
Continue
<ArrowRight className="size-4" />
</span>Components size icons for you — drop a bare icon into a Button and it inherits the right size and color. An icon-only control always needs an aria-label.
Browse
A selection of commonly used icons, rendered live from lucide-react at size-6 in text-subtle. Search by name and click any icon to copy its import.
Showing 178 of 178 icons · click any icon to copy its import.
Don't and Do
Don't introduce a second icon library or drop in raw SVGs — it fragments the visual language. And never color an icon with a hardcoded hex or a raw palette utility; icons take a text-* token like everything else.
import { Bell } from "lucide-react";
<Bell className="size-4 text-text-subtle" />import { Search } from "lucide-react";
export function SearchButton() {
return (
<button className="inline-flex items-center gap-2 text-text-default">
<Search className="size-4 text-text-subtle" />
Search
</button>
);
}