Untitled UI Icons

Installation

To get started, install the Untitled UI Icons package:

npm install @untitledui/icons

Using Untitled UI Icons

You can use Untitled UI Icons in two ways: by importing from the default import or by importing individual icon files. Here's a quick guide for both:

Main module import (recommended)

For modern build tools that support tree-shaking (e.g. Next.js, Vite), you can import icons directly from the main package:

import { 
  Home01, 
  Settings01, 
  User01, 
  Bell01 
} from "@untitledui/icons";
 
<Home01 className="size-5" />
<Settings01 className="size-5" />
<User01 className="size-5" />
<Bell01 className="size-5" />

This method ensures that only the icons you use are included in the final bundle, keeping your bundle size small and optimized.

Individual module import

If you're using a build tool that doesn't fully support tree-shaking, you can import icons directly from individual files just as easily:

import Home01 from "@untitledui/icons/Home01";
import Settings01 from "@untitledui/icons/Settings01";
import User01 from "@untitledui/icons/User01";
import Bell01 from "@untitledui/icons/Bell01";
 
<Home01 className="size-5" />
<Settings01 className="size-5" />
<User01 className="size-5" />
<Bell01 className="size-5" />

This ensures that only the icons you explicitly import are included in your bundle.

Styling Untitled UI Icons

All Untitled UI Icons support standard SVG and React props out of the box:

import { Home01 } from "@untitledui/icons";
 
<Home01 
  className="size-6 text-brand-600" 
  aria-hidden="true"
  strokeWidth={1.5}
  onClick={() => console.log("Home icon clicked")}
/>

You can customize icons using the following common SVG and React props:

• className – Apply utility classes to control size, color, spacing, and more.
• strokeWidth – Adjust the thickness of the icon's strokes.
• color – Set the icon color (using className for text color is recommended).
• aria-hidden – Set to true for decorative icons to improve accessibility.

Untitled UI Icons PRO

The PRO version of Untitled UI Icons includes 4,600+ icons across 4 styles. Choose between minimal line, modern duocolor or duotone, or solid icon styles.

If you've purchased the PRO version of Untitled UI Icons, you'll need to configure your package manager with your private access token:

Create a configuration file

Start by creating a configuration file in your project root:

npm

yarn

bun

# .npmrc
 
@untitledui-pro:registry=https://pkg.untitledui.com
//pkg.untitledui.com/:_authToken=YOUR_TOKEN_HERE

Add your private access token

Replace YOUR_TOKEN_HERE with your private access token:

Untitled UI Icons – PRO npm

Upgrade to Untitled UI Icons PRO to unlock 4,600+ icons across 4 styles.

Get PRO

Installing icons

Once you've set up access, you can install the PRO icons with a single command:

npm

yarn

bun

npm install @untitledui-pro/icons

Importing different styles

The PRO version of Untitled UI Icons includes multiple style variants—line, duocolor, duotone, and solid—each available via separate imports:

  // Line icons (also available in the free package)
  import { Home01, Settings01 } from "@untitledui-pro/icons/line";
 
  // Solid icons
  import { Home01, Settings01 } from "@untitledui-pro/icons/solid";
 
  // Duocolor icons
  import { Home01, Settings01 } from "@untitledui-pro/icons/duocolor";
 
  // Duotone icons
  import { Home01, Settings01 } from "@untitledui-pro/icons/duotone";
 
  <Home01 className="size-6" />

Installing in CI/CD

In CI/CD pipelines or other automated environments, you can't complete a browser-based login—and you should never commit your private access token to source control. Instead, store your token as a secret and read it from an environment variable at build time.

# .npmrc
 
@untitledui-pro:registry=https://pkg.untitledui.com
//pkg.untitledui.com/:_authToken=${UNTITLEDUI_PRO_TOKEN}

npm install @untitledui-pro/icons