Icons
Rounded outline icon set used across the library.
Installation
pnpm dlx shadcn@latest add @paneui/iconsIcon styles
The default set is rounded: outline glyphs on a 24×24 grid with 1.75px round strokes and soft corners. The same names and props also ship in two other styles: puffy (filled shapes on an 18×18 grid) and outline (the puffy shapes as 1.6px outlines). Every style installs topackages/ui/src/icons/index.tsx, so one command switches every component in your project. Preview them with the toggle under All icons.
pnpm dlx shadcn@latest add https://paneui.dev/r/icons-puffy.json --overwritepnpm dlx shadcn@latest add https://paneui.dev/r/icons-outline.json --overwriteBack to rounded:
pnpm dlx shadcn@latest add https://paneui.dev/r/icons.json --overwriteComponents list the icon set as a dependency, so adding one later asks whether to overwritepackages/ui/src/icons/index.tsx. Answer no (the default) to keep your style. If you add components with--overwrite, the rounded set comes back: run your style's command again afterwards.
Make your own icons
Need a glyph the set doesn't have? Install the puffy-icons agent skill and ask your coding agent for it. The skill carries the drawing rules for every style (grids, primitives, corner radii), reference icons, a preview script to check the result at small sizes, and how to add it to your packages/ui/src/icons/index.tsx. Works with any coding agent that reads Agent Skills.
npx skills add QinYangWang/ui --skill puffy-iconsAll icons
Click an icon to copy its JSX.