JDS.

Search docs

Find a page or component

Icons

A semantic icon layer. Components import SendIcon, not ArrowUp, so the underlying set can change without touching them.

How it works

lib/icons.ts re-exports Lucide icons under names that describe their job. Components only import from there. To use a different set, change the re-exports in one file.

lib/icons.ts
export {
  ArrowUp as SendIcon,
  Square as StopIcon,
  Brain as ReasoningIcon,
  Wrench as ToolIcon,
  // …
} from "lucide-react"

Sizing

Icons inherit currentColor. Inside buttons they size automatically with the button. Elsewhere use size-3.5 in dense UI and size-4 by default.

Set

AddIcon
AgentIcon
ApprovalIcon
AttachIcon
ChartIcon
CheckIcon
ChevronDownIcon
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
ClockIcon
CloseIcon
CodeIcon
CopyIcon
DownloadIcon
EndCallIcon
ErrorIcon
FastIcon
FileIcon
FolderIcon
InfoIcon
InterruptIcon
MentionIcon
MenuIcon
MicIcon
MicOffIcon
MinusIcon
MoonIcon
MoreIcon
PauseIcon
PendingIcon
PlayIcon
PreviewIcon
ReasoningIcon
RegenerateIcon
ResearchIcon
ScopeIcon
ScrollDownIcon
SearchIcon
SelectIcon
SendIcon
SettingsIcon
SourceIcon
SparkleIcon
SpinnerIcon
StarIcon
StopIcon
SuccessIcon
SunIcon
TableIcon
TerminalIcon
ThumbsDownIcon
ThumbsUpIcon
TokensIcon
ToolIcon
TrendDownIcon
TrendUpIcon
VisionIcon
VoiceIcon
WarningIcon
WebSearchIcon