Icons

Falcon re-exports icons from Lucide as well as AgVend custom icons from @falcon/ui-kit. Every icon is a React component with an Icon suffix; import by name and render directly.

import { CircleCheckIcon, InfoIcon, PlusIcon } from "@falcon/ui-kit";

<CircleCheckIcon size={16} />;

Finding icons

For Lucide icons, use the Lucide catalog name with an Icon suffix, then import it from @falcon/ui-kit. For example, Lucide CircleCheck becomes CircleCheckIcon. Falcon custom icons follow the same naming pattern.

Size

Pass a numeric size to set width and height in pixels. Omit it when the icon sits inside a Falcon component that pins icon size by context (Button, InputGroup).

Code

<div className="tw:flex tw:flex-wrap tw:items-end tw:gap-4">
  {([12, 16, 20, 24, 32] as const).map((size) => (
    <div
      key={size}
      className="tw:flex tw:flex-col tw:items-center tw:gap-1 tw:text-muted-foreground"
    >
      <CircleCheckIcon size={size} />
      <code className="tw:text-[0.7rem]">{size}</code>
    </div>
  ))}
</div>

Color

Icons render in currentColor and inherit the surrounding text color. Set color via a Falcon token class, never raw hex or rgb values.

Code

<div className="tw:flex tw:flex-wrap tw:items-center tw:gap-4">
  <span className="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-muted-foreground">
    <InfoIcon size={16} /> Muted
  </span>
  <span className="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-destructive">
    <Trash2Icon size={16} /> Destructive
  </span>
  <span className="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-primary">
    <StarIcon size={16} /> Primary
  </span>
</div>

In buttons

Inside Button (and InputGroup), omit size:

Code

<div className="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
  <Button size="xs">
    <PlusIcon />
    Small
  </Button>

  <Button>
    <PlusIcon />
    Default
  </Button>

  <Button variant="outline">
    <DownloadIcon />
    Export
  </Button>

  <Button variant="ghost" size="icon" aria-label="More actions">
    <EllipsisIcon />
  </Button>
</div>

Accessibility

Icons are decorative by default and should be wrapped in an interactive element with its own aria-label:

<Button variant="ghost" size="icon" aria-label="More actions">
  <EllipsisIcon />
</Button>

If you need the icon itself announced (rare), pass aria-label and role="img" directly on the icon element.