Icons

Untitled UI offers a comprehensive set of icons for your projects. The icons are available as React components, making them easy to use in your React applications.

Installation

To get started with Untitled UI icons, simply install the package:

npm install @untitledui/icons

Usage

Untitled UI icons can be used in two different ways: importing from the main module or importing from individual modules.

Main module imports (recommended)

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

import { 
  Home01, 
  Settings01, 
  User01, 
  Bell01 
} from "@untitledui/icons";
 
function App() {
  return (
    <div>
      <Home01 className="h-5 w-5" />
      <Settings01 className="h-5 w-5" />
      <User01 className="h-5 w-5" />
      <Bell01 className="h-5 w-5" />
    </div>
  );
}

With this approach, modern bundlers will only include the icons you actually use in your final bundle, reducing the overall bundle size.

Individual module imports

For older build tools that don't support tree-shaking well, you can import icons from individual modules:

import Home01 from "@untitledui/icons/Home01";
import Settings01 from "@untitledui/icons/Settings01";
import User01 from "@untitledui/icons/User01";
import Bell01 from "@untitledui/icons/Bell01";
 
function App() {
  return (
    <div>
      <Home01 className="h-5 w-5" />
      <Settings01 className="h-5 w-5" />
      <User01 className="h-5 w-5" />
      <Bell01 className="h-5 w-5" />
    </div>
  );
}

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

Styling icons

All Untitled UI icons accept standard SVG props and React props:

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

Common props you might use:

  • className: Apply CSS classes for styling (size, color, etc.)
  • strokeWidth: Adjust the thickness of the icon strokes
  • color: Set the icon color (though using text color via className is preferred)
  • aria-hidden: Set to true for decorative icons

PRO icons package

Untitled UI offers a premium set of icons with additional styles, including duocolor, duotone, and solid variants.

Setting up access

To use the PRO icons, you need to configure your package manager with your private access token. If you have purchased the PRO package, you can find your token in the Icons section.

Create a configuration file in your project root:

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

Replace YOUR_TOKEN_HERE with your actual token.

Installing PRO icons

Once you've set up access, you can install the PRO icons:

npm install @untitledui-pro/icons

Using PRO icons

The PRO icons package includes several style variants available from 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";
 
function IconExamples() {
  return (
    <div className="flex gap-4">
      {/* Each style has its own visual appearance */}
      <Home01 className="h-6 w-6" /> {/* Line style */}
      <Home01 className="h-6 w-6" /> {/* Solid style */}
      <Home01 className="h-6 w-6" /> {/* Duocolor style */}
      <Home01 className="h-6 w-6" /> {/* Duotone style */}
    </div>
  );
}

FAQs

Yes, the free package includes line-style icons. The PRO package includes additional styles: line, solid, duocolor, and duotone variants of each icon, giving you more design flexibility.

Yes, you can customize the color using text color utility classes (e.g., text-brand-600) and size using width and height classes (e.g., size-6). You can also adjust the stroke width using the strokeWidth prop.

Modern bundlers like those used in Next.js and Vite support tree-shaking, which means they'll only include the icons you actually use, even when importing from the main package. For older build tools, individual imports might be necessary for optimal performance.

The PRO icons package is available for purchase from Untitled UI. Once you purchase, you'll receive a access token that you can use to configure your package manager (.npmrc or bunfig.toml) to access the pro icons.

In the PRO package, duocolor icons use two distinct colors for different parts of the icon, while duotone icons use the same color with different opacity levels to create depth and visual hierarchy.

CLIFigma files