React package

@iconsroom/react gives you the full library in React, two ways: a runtime <Icon> component that fetches from the CDN, or a CLI that vendors icons as local components you own.

Part of the Pro toolkit — one lifetime license covers this plus every other integration. See pricing.

Option 1 — runtime component

npm install @iconsroom/react react

import { Icon } from '@iconsroom/react';

<Icon pack="heroicons" name="academic-cap" size={24} color="#0f172a" />

The SVG is fetched from the CDN on first use and cached in memory (deduped across every instance). Recoloring is knockout-safe — white detail is preserved, multicolor icons are left alone. SSR-safe; the component reserves its box before load so nothing shifts.

Props: pack, name, size (default 24), color (optional hex), title (accessible label), plus any <span> props.

Option 2 — vendor icons as local components

Prefer to own the code and ship nothing extra? Generate a standalone component per icon — tree-shakeable, offline forever, zero runtime dependency:

npx @iconsroom/react add heroicons/academic-cap
npx @iconsroom/react add tabler/home tabler/settings --ts --out src/icons

import { AcademicCapIcon } from './src/icons/AcademicCapIcon';

<AcademicCapIcon size={20} className="text-slate-700" />

--ts emits typed .tsx; --out sets the directory (default src/icons).

Which one?