Getting started
An open source icon set in five styles and three corner radii. Copy icons or install a package for React, Vue or SVG.
What coolicons is
coolicons is a set of 1,220 icons drawn on a 24 by 24 grid with a 2 px stroke. Every icon exists in five styles and three corner radii, so you can match the set to your interface without mixing libraries. The icons are open source under the MIT license.
Choose how to use it
| Way | Best for |
|---|---|
| Copy from the library | A few icons, prototypes, design tools. Nothing to install. |
| @coolicons/react | React apps. One component per icon. |
| @coolicons/vue | Vue 3 apps. Same components and props as React. |
| @coolicons/svg | Everything else: plain SVG files and a manifest. |
All packages share one version and are published on npm. A major version removes or renames icons, a minor version adds icons and a patch redraws them. See the changelog for every release.
Quick start with React
npm install @coolicons/reactimport { House } from "@coolicons/react";
export function Home() {
return <House size={20} />;
}The icon takes the text color around it. Read Customize to change color, size and stroke.
Quick start without installing
- Search for what you need in the library.
- Choose a style and corners.
- Select an icon and use Copy SVG.
- Paste it into your code.
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 7L19 10C19.64029 10.64029 20 11.35971 20 12V19C20 20.10457 19.10457 21 18 21H6C4.89543 21 4 20.10457 4 19V12C4 11.35971 4.35971 10.64029 5 10L11 4C11.55228 3.44772 12.44772 3.44772 13 4L16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>