Icons

For package-wide import policy and namespace rules, see Imports and Namespaces.

Icon Gallery

Browse over 7,000 icons in our interactive gallery: Open Icon Gallery

Installation

pnpm add @tilt-legal/cubitt-icons

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

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.

Usage

UI Outline Icons (Default)

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

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

Monochrome filled icons that inherit currentColor:

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

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

Brand Icons

// 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

File type icons with original colors:

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

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

Display Icons

Decorative illustrations for empty states, onboarding, etc:

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

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

Tools Icons

Legal tech tool and product logos with original colors:

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

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

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:

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

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

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

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

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

Sizing with Tailwind

Prefer using Tailwind's size-* or w-* h-* classes over the size prop for consistent sizing with your design tokens.