Iconify

Iconify is licensed under the MIT (framework) — icon sets use their original licenses license, which is a developer-friendly permissive open-source license. You are permitted to use it free of charge in your web and mobile applications, including commercial and SaaS products, without strict attribution requirements.

npm install @iconify/react

// Note: No icon data is bundled. Icons load from the Iconify API on first render. For offline/SSR use, install icon set packages: npm install @iconify-json/lucide @iconify-json/mdi

npm install @iconify/react

// Note: API-loading mode does not work in Server Components. For Next.js App Router, use offline mode with pre-bundled icon sets. Import addCollection from @iconify/react and load icon JSON data before rendering.

npm install @iconify/vue

npm install @iconify/svelte

npm install iconify-icon

import { Icon } from '@iconify/react'

// Icon names follow prefix:icon-name syntax
// Access 350,000+ icons from 211 sets with one component
export default function App() {
  return (
    <div>
      {/* Lucide icons */}
      <Icon icon="lucide:home" />
      <Icon icon="lucide:settings" width={24} height={24} />

      {/* Material Design Icons */}
      <Icon icon="mdi:account-circle" width={24} />

      {/* Font Awesome Solid */}
      <Icon icon="fa6-solid:house" width={20} />

      {/* Heroicons */}
      <Icon icon="heroicons:magnifying-glass" width={24} />

      {/* Tabler Icons */}
      <Icon icon="tabler:brand-github" width={24} />
    </div>
  )
}

import { Icon } from '@iconify/react'

// Color and size via props
<Icon icon="lucide:heart" color="#ef4444" width={24} height={24} />
<Icon icon="mdi:check-circle" color="var(--green)" width={20} />

// With Tailwind className — uses currentColor
<Icon icon="lucide:bell" className="h-5 w-5 text-gray-500" />

// Offline mode — pre-bundle specific icon sets for SSR / Server Components
import { addCollection } from '@iconify/react'
import lucideIcons from '@iconify-json/lucide/icons.json'

// Call once at app startup (e.g. in layout.tsx or _app.tsx)
addCollection(lucideIcons)

// Now 'lucide:*' icons work offline with no API calls
import { Icon } from '@iconify/react'
<Icon icon="lucide:home" />  // served from bundled data

// Icon name format: "prefix:icon-name"
// Browse all sets at: https://icon-sets.iconify.design/

// Common prefixes:
// lucide:       → Lucide Icons (1,500+)
// mdi:          → Material Design Icons (7,000+)
// heroicons:    → Heroicons (292)
// tabler:       → Tabler Icons (5,900+)
// ph:           → Phosphor Icons (9,000+)
// fa6-solid:    → Font Awesome 6 Solid (1,388)
// fa6-brands:   → Font Awesome 6 Brands (465)
// simple-icons: → Simple Icons brand logos (3,000+)
// bi:           → Bootstrap Icons (2,000+)
// ri:           → Remix Icon (2,800+)
// carbon:       → IBM Carbon (2,100+)
// octicon:      → GitHub Octicons (300+)