NewFive styles, three corners

Every icon for your next project. Free, wherever you build.

1,550 icons for React, Vue, shadcn/ui and Figma, copied from the picker or added by your AI agent.

Browse all icons Get started

heart

Five styles. Drawn from the same shapes.

Line for calm interfaces, Fill for active states, Bulk for more weight. Switch any time.

Line. 2 px strokes. The quiet default for most interfaces.

Three corners. Sharp, regular or round.

Match the icons to your interface. A rounded app gets round icons, a sharp dashboard gets sharp ones.

Make it yours. Then copy what you see.

Set style and corners, then size and stroke. The preview is the file you get.

32 px, 2 px stroke

Pixel perfect. Four rules behind every icon.

Edges stay crisp at 24 px, and each icon looks like part of the same set.

24 by 24 grid24 × 24
Each icon is drawn on the same canvas, with 2 px of padding around it.
One stroke2 px
2 px with round caps and joins. Scales cleanly from 16 to 48 px.
Whole pixelsx.0 y.0
Lines and corners start on whole pixels, so edges stay crisp at 24 px.
Clear spacing≥ 2 px
Separate strokes stay at least 2 px apart, so small details never blur together.

Ready for your code. Packages for your stack.

Add the package for your framework and import only the icons you use. Your bundle stays small.

React docs

$ pnpm add @coolicons/react

App.tsx

import { House } from "@coolicons/react";
import { Bell } from "@coolicons/react/fill/round";

<House size={20} />
<Bell size={20} title="Notifications" />

Let your agent set it up

Paste one prompt into Claude Code, Cursor or Codex. It installs the package for your stack.

Add coolicons to this project. coolicons is a free, open source icon set: 1,550 icons in five styles (Line, Duocolor, Duotone, Fill, Bulk) and three corner radii (Sharp, Regular, Round). Read https://coolicons.cool/llms.txt before you start.

1. Find out which framework and package manager this project uses.
2. Install the package that fits: @coolicons/react for React, @coolicons/vue for Vue 3, @coolicons/svg for anything else.
3. Ask me which style and corners I want. Line with Regular corners is the package root, every other combination has its own entry, like @coolicons/react/fill/round.
4. Never guess an icon name: look it up with `npx @coolicons/cli search <words>`, or with the coolicons MCP server if you have it.
5. Run the build to make sure it works. If the project already uses other icons, tell me which ones before you touch them.

Read the prompt

Made for Figma. Where coolicons started.

The whole set as one Community file. Duplicate it and use it as your library, with style and corners as properties.

coolicons500k+ downloadsFree file on Figma CommunityGet Figma file

The Figma plugin. Right on your canvas.

This is the real plugin. Pick an icon to swap the selected one, change its style, or click the canvas and place a new one.Place icons with a click or a drag, and select placed ones to swap or restyle them. On a larger screen, you can try the real plugin right here.

Sidebar