Icons by name

Render an icon from a string, for icon pickers and content from a CMS.

When to use it

Import icons as components whenever you know them while writing code. Use CooliconsIcon when the name comes from data, like an icon picker or a CMS field. It loads all icons of one style and corner radius on first use, about 60 KB gzipped for Line and 230 KB for Bulk.

Use

import { CooliconsIcon } from "@coolicons/react/dynamic";

<CooliconsIcon name="house" variant="fill" radius="round" />

The dynamic entry is a client component.

The package calls the style variant. While a style loads, and for an unknown name, it renders an empty svg of the same size, so the layout does not jump.

Props

CooliconsIcon props

Prop	Default	What it does
`name`	required	Icon name, like house
`variant`	`line`	line, duocolor, duotone, fill or bulk
`radius`	`regular`	sharp, regular or round
`size`	`24`	Width and height. A number is pixels, a string can be any CSS length, like 1.25rem or 1em.
`strokeWidth`	`2`	Stroke width of Line, Duocolor and Duotone. Fill and Bulk have no strokes and ignore it.
`title`	none	Adds a <title> and role="img". Without a title the icon gets aria-hidden="true".

List and preload

The same entry exports icons, every name with its category and, for aliases, the name it points to. preload loads a style ahead of time, for example when a picker opens.

Picker.jsx

import { CooliconsIcon, icons, preload } from "@coolicons/react/dynamic";

preload("duotone", "round");

const arrows = icons.filter((icon) => icon.category === "Arrow");

TypeScript users get IconName, IconCategory and CooliconsIconProps from the same entry.