1,200+ free icons in five styles, with sharp, regular or round corners,
for React, Vue, shadcn/ui, SVG and Figma.
Browse all icons · Docs · Figma file · Changelog
| 1,200+ | 5 | 3 | 18,000+ | 500k+ | | :---: | :---: | :---: | :---: | :---: | | icons in 30 categories | styles, Line to Bulk | corners, sharp to round | SVG files | Figma downloads |
Why coolicons
Icons that match your interface. Each icon comes in Line, Duocolor, Duotone, Fill and Bulk, with sharp, regular or round corners. A rounded app gets round icons, a sharp dashboard gets sharp ones, and you can change your mind later without touching a single drawing.
Sharp at 24 pixels. The icons sit on a 24 by 24 grid with a 2 px stroke. Lines and corners land on whole pixels, so edges stay crisp at their native size.
Where you work. Find and adjust icons on coolicons.cool, use the Figma file, or install the packages below. Coding agents get an MCP server, a CLI and a skill, so they look names up instead of guessing.
Made by
Kryston Schwarze, design engineer from Germany, drawing icons since 2018.
Figma
The coolicons file on Figma Community has the whole set as components, with style and corners as properties.
Packages
| Package | |
| --- | --- |
| @coolicons/react | React components |
| @coolicons/vue | Vue 3 components |
| @coolicons/svg | SVG files and a manifest for everything else |
| @coolicons/cli | Search and copy icons from the terminal |
| @coolicons/mcp | MCP server for coding agents |
React
npm install @coolicons/reactimport { House } from "@coolicons/react";
export function Home() {
return <House size={20} />;
}
Vue
npm install @coolicons/vue<script setup>
import { House } from "@coolicons/vue";
</script>
<template>
<House :size="20" />
</template>
SVG
npm install @coolicons/svgEvery icon is a file at @coolicons/svg/