Phosphor Icons

The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Phosphor Icons in any personal, commercial, or corporate software projects completely free of charge. You can modify the icons, distribute them, sell software containing them, and even sublicense them. The only requirement is that you must preserve the original copyright notice and permission notice in all copies of the software.

npm install @phosphor-icons/react

npm install @phosphor-icons/react

// Note: Compatible with Next.js App Router. Works in both Server and Client Components.

npm install @phosphor-icons/vue

// No official Svelte package. Use the SVG files directly from phosphoricons.com

npm install @phosphor-icons/web

import { House, Gear, User } from '@phosphor-icons/react'

export default function App() {
  return (
    <div>
      <House size={24} />
      <Gear size={24} weight="bold" />
      <User size={24} weight="duotone" />
    </div>
  )
}

import { Heart } from '@phosphor-icons/react'

export default function WeightShowcase() {
  const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone']
  return (
    <div className="flex gap-4">
      {weights.map(weight => (
        <Heart key={weight} size={32} weight={weight} />
      ))}
    </div>
  )
}

// Duotone icons support custom color for the secondary layer
import { ShieldCheck } from '@phosphor-icons/react'

export default function Badge() {
  return (
    <ShieldCheck
      size={48}
      weight="duotone"
      color="#6366f1"
    />
  )
}