Delphi Design

The Delphi icon library provides consistent iconography across the platform. Click any icon to copy its import name.

345 icons available. Click to copy import name.

Usage

import { StarIcon, HeartIcon, CheckmarkIcon } from "@delphi/ui";

export function Example() {
  return (
    <div className="flex gap-2">
      <StarIcon className="size-5" />
      <HeartIcon className="size-5" />
      <CheckmarkIcon className="size-5" />
    </div>
  );
}

Sizing

Icons use the size-* utility class for consistent sizing:

<StarIcon className="size-4" />  {/* 16px */}
<StarIcon className="size-5" />  {/* 20px */}
<StarIcon className="size-6" />  {/* 24px */}

Colors

Icons inherit their color from the parent element's color property:

<StarIcon className="size-5 text-stone-12" />
<StarIcon className="size-5 text-tangerine-9" />
<StarIcon className="size-5 text-red-9" />

Use consistent icon sizes within the same context

Pair icons with text labels for clarity when possible

Use aria-label for icon-only buttons

Import icons from @delphi/ui — never from external libraries

Mix icon styles (solid vs outline) inconsistently

Use icons that are too small to be recognizable (below 16px)

Import icons from lucide-react, heroicons, or other external libraries