Icons
Paubha uses Lucide. The same set as the Figma file, imported from lucide-react.
Paubha uses Lucide. Only Lucide.
Same glyphs as the Figma file. Tree-shaken from lucide-react. No second family, no hand-rolled paths.
Paubha does not ship its own icon font. Every glyph in the registry and on this site comes from Lucide: an open-source, MIT-licensed set of consistent stroke icons. The Figma file uses the same family. If you need a glyph we have not shown here, take it from lucide.dev/icons and import it the same way.
Browse
Search the curated set we actually use in components. The inspector copies the import and opens the official Lucide page for that icon.
Install
Lucide is already a dependency of the docs site and of any project you init
with the CLI. Add it yourself if you are wiring icons before npx paubha.
pnpm add lucide-reactimport { Search } from "lucide-react";
<Search className="size-5" strokeWidth={1.75} aria-hidden="true" />React package docs: lucide.dev/guide/packages/lucide-react.
Usage rules
In components
Import the named export. Pass it as a slot (leadingIcon). Mark decorative icons aria-hidden.
Stroke lock
Default stroke is 1.75. Stay between 1.5 and 2. Color comes from currentColor, so it follows fg-* tokens.
- One family. Lucide only. Do not mix Phosphor, Tabler, or hand-drawn SVGs into a Paubha tree.
- Named imports. Tree-shake. Never
import * as Icons. - Decorative by default.
aria-hidden="true"unless the icon is the only label (then give the control anaria-label). - Color from tokens.
text-fg-primary,text-fg-brand,text-fg-on-brand. Never a raw hex on the SVG. - Focus is not the icon. Interactive hosts still use
shadow-glow-focus.
Official links
- Lucide - homepage
- Icon gallery - full searchable set
- lucide-react - React package
- GitHub - source