Iconify — Universal Icon Framework for 200+ Icon Sets

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