@iconsroom/react

@iconsroom/react

276,000+ open source icons for React — two ways to use them, both free.

1. Runtime component (all 276K, nothing bundled)

npm install @iconsroom/react react

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

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

The icon's SVG is fetched from the IconsRoom 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; reserves its box before load so nothing shifts.

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

2. Vendor icons as local components (zero runtime dependency)

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

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?

	Runtime <Icon>	Vendored (CLI)
Bundle size	tiny (one component)	only what you add
Works offline	needs the CDN	yes
Access all 276K	instantly	one command each
Own the code	no	yes

Licensing

Every icon is open source; most packs are MIT / Apache 2.0 / CC BY, a few are CC BY-NC (non-commercial). Check the pack on iconsroom.com.

Development

npm test    # framework-free core + codegen (10 checks)

MIT © IconsRoom