Heroicons

The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Heroicons 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 @heroicons/react

npm install @heroicons/react

// Note: Fully compatible with Next.js App Router and Pages Router. Works in both Server and Client components.

npm install @heroicons/vue

// No official Svelte package — use SVG directly from heroicons.com

// No vanilla JS package — copy SVG code directly from heroicons.com

import { HomeIcon, BellIcon, UserIcon } from '@heroicons/react/24/outline'

export default function App() {
  return (
    <div>
      <HomeIcon className="h-6 w-6" />
      <BellIcon className="h-6 w-6 text-blue-500" />
      <UserIcon className="h-6 w-6 text-gray-400" />
    </div>
  )
}

// Use solid icons for emphasis or active states
import { HomeIcon } from '@heroicons/react/24/solid'
import { HomeIcon as HomeOutline } from '@heroicons/react/24/outline'

export default function Nav() {
  const isActive = true
  const Icon = isActive ? HomeIcon : HomeOutline
  return <Icon className="h-6 w-6" />
}

// Mini icons (20x20) for dense UIs like badges and tags
import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'

export default function Badge() {
  return (
    <span className="flex items-center gap-1 text-sm">
      <CheckIcon className="h-4 w-4 text-green-500" />
      Verified
    </span>
  )
}