Untitled UI Icons

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

npm install @untitledui/icons

// Note: Works in Next.js App Router. Import only the icons you use so the package can be tree-shaken.

npm install @untitledui/icons

// TypeScript definitions are included in the package.

import { Home01, SearchMd, Settings01 } from '@untitledui/icons'

export default function Toolbar() {
  return (
    <div className="flex items-center gap-3">
      <Home01 size={24} />
      <SearchMd size={24} />
      <Settings01 size={24} />
    </div>
  )
}

import { Rocket01, ArrowRight } from '@untitledui/icons'

export function LaunchButton() {
  return (
    <button className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white">
      <Rocket01 size={18} color="currentColor" />
      Launch
      <ArrowRight size={18} color="currentColor" />
    </button>
  )
}

import { Bell01, ChartBreakoutSquare, CreditCard01, Zap } from '@untitledui/icons'

const items = [
  { label: 'Alerts', icon: Bell01 },
  { label: 'Growth', icon: ChartBreakoutSquare },
  { label: 'Billing', icon: CreditCard01 },
  { label: 'Automation', icon: Zap },
]

export function DashboardShortcuts() {
  return (
    <div className="grid grid-cols-4 gap-3">
      {items.map(({ label, icon: Icon }) => (
        <button key={label} className="rounded-lg border p-4">
          <Icon size={22} />
          <span>{label}</span>
        </button>
      ))}
    </div>
  )
}