React

npm install @coolicons/react

Requires React 18 or later.

Import icons by name. Only the icons you import end up in your bundle.

import { House, Folder } from "@coolicons/react";

export function Toolbar() {
  return (
    <nav>
      <House size={20} />
      <Folder strokeWidth={1.5} title="Projects" />
    </nav>
  );
}

The package root is Line with Regular corners. Every other combination has its own entry, with the same component names in each.

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

Styles are line, duocolor, duotone, fill and bulk. Corners are sharp, regular and round.

All other props go to the svg element: className, style, aria-*, event handlers and a ref to the svg.

<House
  size="1.25rem"
  strokeWidth={1.5}
  className="nav-icon"
  title="Home"
/>

Components use the icon name in PascalCase: file-plus-corner becomes FilePlusCorner. Every component is also exported with an Icon suffix, like FilePlusCornerIcon. Both names always work.

Use the plain name unless JavaScript, the browser or a framework already uses it. Map is a JavaScript global, File a browser global and Link a component in Next.js and React Router. Importing an icon with such a name hides the original in that file, so value instanceof File quietly stops working. For these icons, use the suffix.

import Link from "next/link";
import { LinkIcon } from "@coolicons/react";

Types ship with the package. Every entry exports IconProps, IconComponent, IconVariant and IconRadius.

import type { IconComponent } from "@coolicons/react";

type NavItem = { label: string; icon: IconComponent };

To render an icon from a string, use CooliconsIcon.