

<Callout type="info">
  For package-wide import policy and namespace rules, see [Imports and Namespaces](/get-started/namespaces).
</Callout>

<Callout type="info" title="Icon Gallery">
  Browse over 7,000 icons in our interactive gallery: [Open Icon
  Gallery](/icon-gallery)
</Callout>

## Installation [#installation]

```bash
pnpm add @tilt-legal/cubitt-icons
```

## Icon Namespaces [#icon-namespaces]

Icons are organized into namespaces based on their style and purpose:

| Namespace    | Import Path                             | Count | Description                                                     |
| ------------ | --------------------------------------- | ----- | --------------------------------------------------------------- |
| UI Outline   | `@tilt-legal/cubitt-icons/ui/outline`   | 3,287 | Two-color outline icons with `color` and `colorSecondary` props |
| UI Fill      | `@tilt-legal/cubitt-icons/ui/fill`      | 3,286 | Monochrome filled icons using `currentColor`                    |
| Brands Mono  | `@tilt-legal/cubitt-icons/brands/mono`  | 52    | Monochrome brand/logo icons using `currentColor`                |
| Brands Color | `@tilt-legal/cubitt-icons/brands/color` | 2     | Full-color brand icons with original colors                     |
| MIME         | `@tilt-legal/cubitt-icons/mime`         | 39    | File type icons with original colors                            |
| Display      | `@tilt-legal/cubitt-icons/display`      | 100   | Decorative illustrations with original colors                   |
| Tools        | `@tilt-legal/cubitt-icons/tools`        | 306   | Legal tech tool and product logos with original colors          |

<Callout type="info" title="Public API Shape">
  Prefer category imports such as `@tilt-legal/cubitt-icons/ui/outline`.
  The root package export remains available for compatibility, but deep per-icon
  imports such as `@tilt-legal/cubitt-icons/ui/outline/accessibility` are not
  part of the public API.
</Callout>

## Usage [#usage]

### UI Outline Icons (Default) [#ui-outline-icons-default]

The default export contains two-color outline icons with customizable primary and secondary colors:

```tsx
import { ArrowLeft, Check, Gear } from "@tilt-legal/cubitt-icons/ui/outline";

function Example() {
  return (
    <ArrowLeft
      size={24}
      color="currentColor"
      colorSecondary="var(--muted-foreground)"
    />
  );
}
```

### UI Fill Icons [#ui-fill-icons]

Monochrome filled icons that inherit `currentColor`:

```tsx
import { ArrowLeft, Check, Gear } from "@tilt-legal/cubitt-icons/ui/fill";

function Example() {
  return <Check className="size-5 text-green-500" />;
}
```

### Brand Icons [#brand-icons]

```tsx
// Monochrome brand icons (inherit currentColor)
import { Google, Microsoft } from "@tilt-legal/cubitt-icons/brands/mono";

// Full-color brand icons (original brand colors)
import { Google, Microsoft } from "@tilt-legal/cubitt-icons/brands/color";

function Example() {
  return (
    <>
      <Google className="size-6" /> {/* Mono: uses currentColor */}
      <Google className="size-6" /> {/* Color: uses original brand colors */}
    </>
  );
}
```

### MIME Type Icons [#mime-type-icons]

File type icons with original colors:

```tsx
import { PDF, DOC, XLS } from "@tilt-legal/cubitt-icons/mime";

function FilePreview({ type }: { type: string }) {
  return <PDF className="size-8" />;
}
```

### Display Icons [#display-icons]

Decorative illustrations for empty states, onboarding, etc:

```tsx
import { EmptyFolder } from "@tilt-legal/cubitt-icons/display";

function EmptyState() {
  return <EmptyFolder className="size-32" />;
}
```

### Tools Icons [#tools-icons]

Legal tech tool and product logos with original colors:

```tsx
import { Clio, DocuSign, Ironclad } from "@tilt-legal/cubitt-icons/tools";

function IntegrationList() {
  return <Clio className="size-6" />;
}
```

## TypeScript Support [#typescript-support]

Use the type-only entrypoint to avoid loading the root icon barrel during
typechecking. Use `CubittIcon` for a normal icon component prop and reserve
`IconComponentType` for registry-driven dynamic lookup:

```tsx
import type { CubittIcon } from "@tilt-legal/cubitt-icons/types";
import { Check, Xmark } from "@tilt-legal/cubitt-icons/ui/outline";

type StatusProps = {
  icon: CubittIcon;
  label: string;
};

function Status({ icon: Icon, label }: StatusProps) {
  return (
    <span>
      <Icon className="size-4" />
      {label}
    </span>
  );
}

// Usage
<Status icon={Check} label="Success" />
<Status icon={Xmark} label="Error" />
```

## Icon Registries [#icon-registries]

For dynamic icon rendering, use the registry exports. Importing a registry loads
all icons in that namespace by design:

```tsx
import { allUiOutlineIcons } from "@tilt-legal/cubitt-icons/ui/outline/registry";
// Other namespace registries:
import { allUiFillIcons } from "@tilt-legal/cubitt-icons/ui/fill/registry";
import { allBrandsMonoIcons } from "@tilt-legal/cubitt-icons/brands/mono/registry";

function IconPicker() {
  return (
    <div>
      {allUiOutlineIcons.map(({ name, component: Icon, tags }) => (
        <button key={name} title={tags?.join(", ")}>
          <Icon className="size-5" />
        </button>
      ))}
    </div>
  );
}
```

The root `@tilt-legal/cubitt-icons/registries` entrypoint is also available for
cross-namespace lookup, but it is the heaviest option.

## API Reference [#api-reference]

### UI Outline Icons [#ui-outline-icons]

| Prop             | Type                      | Default          | Description                                      |
| ---------------- | ------------------------- | ---------------- | ------------------------------------------------ |
| `size`           | `number \| string`        | —                | Icon size in px or unit string                   |
| `strokeWidth`    | `number`                  | `1.5`            | Stroke width for lines                           |
| `color`          | `string`                  | `"currentColor"` | Primary fill/stroke color                        |
| `colorSecondary` | `string`                  | `"currentColor"` | Secondary fill/stroke color for duotone effects  |
| `title`          | `string \| null`          | —                | Optional title element for accessibility         |
| `decorative`     | `boolean`                 | `false`          | Hides the icon from assistive technology         |
| `aria-label`     | `string`                  | —                | ARIA label (overrides `title`)                   |
| `className`      | `string`                  | `""`             | Tailwind/utility className (`size-6`, `w-6 h-6`) |
| `...props`       | `SVGProps<SVGSVGElement>` | —                | Any valid SVG element attributes                 |

### Other Namespaces [#other-namespaces]

All other namespaces (UI Fill, Brands, MIME, Display, Tools) share the same base props but without `color`/`colorSecondary`:

| Prop          | Type                      | Default | Description                                      |
| ------------- | ------------------------- | ------- | ------------------------------------------------ |
| `size`        | `number \| string`        | —       | Icon size in px or unit string                   |
| `strokeWidth` | `number`                  | `1.5`   | Stroke width for lines                           |
| `title`       | `string \| null`          | —       | Optional title element for accessibility         |
| `decorative`  | `boolean`                 | `false` | Hides the icon from assistive technology         |
| `aria-label`  | `string`                  | —       | ARIA label (overrides `title`)                   |
| `className`   | `string`                  | `""`    | Tailwind/utility className (`size-6`, `w-6 h-6`) |
| `...props`    | `SVGProps<SVGSVGElement>` | —       | Any valid SVG element attributes                 |

<Callout type="tip" title="Sizing with Tailwind">
  Prefer using Tailwind's `size-*` or `w-* h-*` classes over the `size` prop for consistent sizing with your design tokens.
</Callout>