Icons

Every icon is drawn by hand on a 24 px grid with round caps and joins: one continuous stroke where possible, real bend radii instead of sharp corners, and a small gap where one stroke passes behind another. chatcn draws them at 1.5 px. NeonKit lights the same drawings as neon tubes.

Install

Components import icons from @/lib/chatcn-icons, a single file installed with them. For the full set in your own code, use the npm package. Names match lucide-react, so switching is usually just the import path.

npm i chatcn-icons

import { ReasoningIcon, ToolIcon } from "chatcn-icons"

<ToolIcon size={16} />
<ReasoningIcon strokeWidth={1.25} absoluteStrokeWidth title="Reasoning" />

Icons are hidden from assistive tech unless you pass title or aria-label.

Drawn for agents

There is no sparkle meaning "AI" here. Agent concepts get their own metaphors: reasoning is a route between two points, an agent is a loop around a core, a subagent branches from its parent, memory is a saved card.