shadcn/ui

Add single icons with the shadcn CLI. Each one lands in your project as code you own, without a dependency.

Add an icon

Terminal

npx shadcn@latest add https://coolicons.cool/r/trash.json

The icon lands in components/icons/trash.tsx as a React component without dependencies. Change it like any other component in your project.

Styles and corners

Line with regular corners is the default. Put the style, and the corners if they are not regular, in front of the name:

Registry items

https://coolicons.cool/r/trash.json
https://coolicons.cool/r/fill/trash.json
https://coolicons.cool/r/bulk/round/trash.json
https://coolicons.cool/r/line/sharp/trash.json

Every combination gets its own folder, like components/icons/fill/trash.tsx, so several can live side by side.

Short names

Add the registry to components.json once, then add icons by name:

components.json

{
  "registries": {
    "@coolicons": "https://coolicons.cool/r/{name}.json"
  }
}

Terminal

npx shadcn@latest add @coolicons/trash @coolicons/fill/bell

Use

The icons are drawn on the same 24 by 24 grid with a 2 px stroke as the default shadcn/ui icons, so they fit buttons, menus and inputs without changes.

DeleteButton.tsx

import { Button } from "@/components/ui/button";
import { Trash } from "@/components/icons/trash";

export function DeleteButton() {
  return (
    <Button variant="ghost" size="icon" aria-label="Delete">
      <Trash />
    </Button>
  );
}

The components take size, strokeWidth and title like @coolicons/react. Icons whose name JavaScript or the browser already uses keep the Icon suffix, like MapIcon.

Registry or package

Use the registry when you want the code in your project and only a few icons. Use @coolicons/react when you want many icons and updates through your package manager.