SVG files

npm install @coolicons/svg

Every release on GitHub also has all files as a zip, if you do not use a package manager.

@coolicons/svg/<style>/<radius>/<name>.svg

For example @coolicons/svg/line/regular/house.svg. Styles are line, duocolor, duotone, fill, bulk, corners are sharp, regular, round. That makes 5 times 3 files per icon.

Every file is 24 by 24 pixels, has at most two paths and paints with currentColor:

<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>

How you embed the file decides whether it can take your text color.

• Inline SVG in HTML takes the text color and can be styled with CSS.
• An img tag cannot inherit color. The icon renders in black.
• A CSS mask paints the icon shape with any background, so it follows currentColor again. Copy the file into your assets first.

.icon-house {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask: url("/icons/house.svg") center / contain no-repeat;
}

Every file can be resolved through the package exports.

import { readFile } from "node:fs/promises";

const url = import.meta.resolve("@coolicons/svg/line/regular/house.svg");
const svg = await readFile(new URL(url), "utf8");

@coolicons/svg/manifest.json lists every icon with its name, category, the name it is an alias of, if any, and a fingerprint per file. A changed fingerprint means the file changed. The current set on this site has 1,220 icons.

{
  "name": "house",
  "category": "Buildings",
  "files": {
    "line/sharp": "1a6a795b9e84",
    "line/regular": "da7fdd021f91",
    "line/round": "521bba4418d2",
    ...
  }
}