# Iconify — Universal Icon Framework for 200+ Icon Sets

> A universal icon framework that provides one unified syntax to use over 200,000 icons from 200+ open source icon sets in React, Vue, Svelte, or as web components.

## Install

Save in your project root:

# Iconify — Universal Icon Framework for 200+ Icon Sets

## Quick Use
```bash
npm install @iconify/react
```
```jsx
import { Icon } from '@iconify/react';

function App() {
  return (
    <div>
      <Icon icon="mdi:home" width="24" />
      <Icon icon="lucide:settings" width="24" />
      <Icon icon="ph:user-bold" width="24" />
    </div>
  );
}
```

## Introduction
Iconify unifies over 200 open source icon sets behind a single API. Instead of installing separate packages for Material Design Icons, Lucide, Phosphor, Heroicons, and others, you use one component with a consistent `icon` prop syntax. Icons are loaded on demand and rendered as inline SVG.

## What Iconify Does
- Provides access to 200,000+ icons from 200+ collections through a single syntax
- Renders icons as inline SVG for full CSS styling control
- Loads only the icons used on each page rather than entire icon sets
- Offers framework components for React, Vue, Svelte, Ember, and web components
- Includes an offline bundle mode for applications that cannot make network requests

## Architecture Overview
Iconify uses a two-layer design. The icon data layer maintains a JSON-based registry of icon sets, where each icon is stored as an optimized SVG path. The rendering layer provides framework-specific components that look up icon data by name, fetch missing icons from the Iconify API (or a local bundle), and render them as inline SVG elements. A local cache avoids redundant network requests.

## Self-Hosting & Configuration
- Install the framework package: `@iconify/react`, `@iconify/vue`, or `@iconify/svelte`
- Use icons by name: `<Icon icon="mdi:account" />` with set-prefix:icon-name syntax
- For offline use, install icon data packages like `@iconify-json/mdi` and bundle locally
- Self-host the Iconify API using the open source API server for full control
- Use the Iconify Icon web component for framework-agnostic usage

## Key Features
- One component, 200+ icon sets, 200,000+ icons
- On-demand loading fetches only icons that appear on the page
- Full CSS control: color via currentColor, size via font-size or width/height
- Offline bundles available for every icon set as JSON packages
- Figma, Sketch, and Adobe XD plugins for design workflow integration

## Comparison with Similar Tools
- **Lucide** — single icon set with tree-shakeable imports; limited to one collection
- **react-icons** — bundles multiple icon sets but imports entire set files; larger bundle size
- **Heroicons** — Tailwind Labs icon set only; one style collection
- **Font Awesome** — icon font approach; larger payload, less CSS flexibility than inline SVG
- **unplugin-icons** — build-time icon loading using Iconify data; compile-time alternative

## FAQ
**Q: Does Iconify load icons from the internet at runtime?**
A: By default, yes. Icons are fetched from the Iconify API on first use and cached. For offline apps, install @iconify-json packages to bundle icon data locally.

**Q: Can I use Iconify with Tailwind CSS?**
A: Yes. Icons render as inline SVG and inherit currentColor, so Tailwind text color and size utilities work directly.

**Q: How do I find available icon names?**
A: Browse the full catalog at icon-sets.iconify.design, which lets you search and preview icons from every supported collection.

**Q: What is the difference between @iconify/react and the Icon web component?**
A: @iconify/react is a React component optimized for the React rendering cycle. The web component (iconify-icon) works in any HTML page without a framework.

## Sources
- https://github.com/iconify/iconify
- https://iconify.design

---
Source: https://tokrepo.com/en/workflows/asset-fa690898
Author: AI Open Source