Iconify for React

@iconify/react is the official React component for Iconify, a universal icon framework that unifies over 200 open-source icon sets — FontAwesome, Material Design Icons, Feather Icons, EmojiOne, Noto Emoji, and hundreds more — under a single consistent syntax. Instead of installing a separate npm package per icon set, developers reference any icon by name (e.g. mdi:home) and the component fetches or bundles the matching SVG automatically, giving access to roughly 300,000 icons through one dependency.

As the monorepo’s most widely adopted package (hundreds of thousands of weekly downloads, well ahead of its sibling iconify-icon web component and framework bindings for Vue and Svelte), @iconify/react is the de facto standard for icon rendering in React and Next.js applications that want broad icon-set coverage without vendoring dozens of individual icon libraries.

What You Get

• An <Icon> React component accepting an Iconify icon name string (e.g. mdi:home, logos:react) with no per-icon-set installs
• Access to 200+ open-source icon sets and roughly 300,000 icons through Iconify’s shared naming convention
• An offline mode (@iconify/react/offline) for bundling only the specific icons an app uses, avoiding runtime API calls
• Full styling control via standard props (color, width/height, rotation, flip) mapped onto the underlying SVG
• TypeScript type definitions and tree-shakeable ESM/CJS builds

Common Use Cases

• Rendering consistent icons across a React or Next.js app without bundling multiple separate icon-set packages
• Building admin dashboards or design systems that need access to a very large, mixed icon catalog (UI icons, brand logos, emoji)
• Offline/air-gapped apps bundling only their used icon subset via the offline API to avoid a runtime icon-fetch dependency
• Migrating between icon sets (e.g. Material Design to Font Awesome) without changing component usage, just icon name prefixes

Under The Hood

Architecture: Iconify is a pnpm-workspace monorepo where components/react (published as @iconify/react) is one of several framework bindings (components/vue, components/svelte) sitting atop shared packages/ (core, utils, types, fetch, component-utils, api-redundancy). The React component itself is small — src/iconify.ts (389 lines) implements the <Icon> component and icon-name resolution/caching, src/render.ts (246 lines) converts resolved icon data into React elements with prop mapping, src/props.ts defines the public prop types, and src/offline.ts implements the separate offline/bundled-icon entry point that skips the runtime API layer entirely.

Tech Stack: TypeScript throughout, built with Rollup for the distributable bundle and a separate tsc -b pass for type declarations, tested with Vitest plus Playwright-driven browser tests (vitest-browser-react) rather than jsdom-only tests, reflecting the need to verify actual rendered SVG behavior. The package depends only on the workspace-internal @iconify/types at runtime, keeping @iconify/core and @iconify/utils as dev-only build-time dependencies, and declares react as a peer dependency (>=18).

Code Quality: oxlint/oxfmt and tsc --noemit run as part of the lint step before every build, and Microsoft’s api-extractor generates a stable, reviewable public API surface (api-extractor.iconify.json/api-extractor.offline.json) — a level of API-surface discipline uncommon in smaller UI libraries and appropriate given how many downstream apps depend on this package’s exact prop shapes.

API Design: The core design bet — resolving any icon by a simple set:name string instead of requiring a separate npm install per icon set — is what makes the learning curve very low; a developer who knows one set:name combination (e.g. mdi:home) already knows how to use any of the 200+ supported sets. The parallel offline entry point (@iconify/react/offline) cleanly separates the ‘fetch icons at runtime’ and ‘bundle icons at build time’ use cases without forcing consumers into one model.