Celune DocsGetting Started
Icons
We use lucide-react for all icons across the admin app and docs site. It provides a large set of consistently styled icons with a simple named-import API. Every icon is an SVG component with a standard set of props.
Importing icons
Always import icons as named exports from lucide-react. Tree-shaking ensures that only the icons you import end up in the bundle. Never import the entire library.
// Correct — named imports
import { Plus, ArrowLeft, RefreshCw, Brain } from "lucide-react";
// Incorrect — do not do this
import * as Icons from "lucide-react";Sizing
All icons accept a size prop that sets both width and height simultaneously. You can also use Tailwind sizing classes if you prefer. Use consistent sizes within a given context.
| Context | Size prop | Tailwind equivalent |
|---|---|---|
| Inline with UI text (14px) | size={14} | className="h-3.5 w-3.5" |
| Standard UI icon (16px) | size={16} | className="h-4 w-4" |
| Slightly larger context (18px) | size={18} | className="h-[18px] w-[18px]" |
| Larger UI element (20px) | size={20} | className="h-5 w-5" |
| Empty state illustration (24px+) | size={24} | className="h-6 w-6" |
// Button with icon — 14px inline icon
<button className="flex items-center gap-1.5 text-sm">
<Plus size={14} aria-hidden="true" />
New task
</button>
// Nav item with icon — 16px
<a href="/tasks" className="flex items-center gap-2 text-sm">
<ClipboardList size={16} aria-hidden="true" />
Tasks
</a>
// Empty state — larger icon
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-200">
<Brain size={18} className="text-foreground-muted" aria-hidden="true" />
</div>Color
Icons inherit their color from the surrounding text. Set the color on the parent element using Tailwind text utilities, or pass a class directly to the icon. Never hardcode a color value on an icon.
// Inheriting color from parent — preferred
<span className="text-foreground-muted">
<Search size={16} aria-hidden="true" />
</span>
// Passing class directly — also acceptable
<AlertCircle size={16} className="text-destructive" aria-hidden="true" />
// Using brand color for emphasis
<Check size={16} className="text-brand" aria-hidden="true" />
// Never do this
<Check size={16} style={{ color: "#4ade80" }} />Accessibility
Decorative icons (those next to a text label) must be hidden from assistive technology with aria-hidden="true". Interactive icons (standalone icon buttons) need a label.
| Scenario | Required attribute | Example |
|---|---|---|
| Icon beside text label | aria-hidden="true" | <Plus size={14} aria-hidden="true" /> |
| Icon-only button | aria-label on the button element | <button aria-label="Delete task"> |
| Icon conveying status | Paired with visible text or aria-label | Never rely on icon alone for meaning |
// Icon-only action button — label on button, hidden icon
<button
aria-label="Refresh data"
onClick={refresh}
className="rounded-md p-1.5 text-foreground-muted hover:bg-surface-200 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40"
>
<RefreshCw size={14} aria-hidden="true" />
</button>
// Icon alongside text — icon is decorative
<button className="flex items-center gap-1.5">
<ArrowLeft size={14} aria-hidden="true" />
Back
</button>Common icons in the admin app
Use these icon choices consistently so that users build muscle memory for what each symbol means.
| Icon | Import name | Usage |
|---|---|---|
| Add / create | Plus | New task, new project, any create action |
| Back / previous | ArrowLeft | Back navigation in detail views |
| Refresh / retry | RefreshCw | Reload data, retry failed request |
| Brain / AI | Brain | MyBrain, AI features, second-brain references |
| Search | Search | Search inputs, search actions |
| Success / done | Check | Completed state, selected item in dropdown |
| Dismiss / remove | X | Close dialog, remove tag, clear input |
| Settings | Settings | App settings, configuration panels |
| Tasks / clipboard | ClipboardList | Tasks section, to-do lists |
| Projects / folder | FolderKanban | Projects section, kanban views |
| Warning / caution | AlertTriangle | Warning states, cautionary notices |
| Error / danger | AlertCircle | Error states, destructive confirmations |
| Info | Info | Informational tooltips and callouts |
| External link | ExternalLink | Links that open in a new tab |
| Copy | Copy | Copy to clipboard |
| Delete | Trash2 | Destructive delete actions |
When in doubt, check the Lucide icon library before creating a custom SVG. The library covers the vast majority of common UI needs.