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 } from "@falcon/ui-kit";

export function Example() {
  return <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.

Sizes

Pass a numeric size to set width and height in pixels.

Code

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

export function Example() {
  return (
    <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>
  );
}

Colors

Icons render in currentColor and inherit the surrounding text color. Set color via a token-backed utility, never raw hex or rgb values (see Styling).

Code

import { InfoIcon, StarIcon, Trash2Icon } from "@falcon/ui-kit";

export function Example() {
  return (
    <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>
  );
}

Accessibility

For icon-only controls, put the accessible name on the control and leave the icon unlabeled:

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

If the icon itself conveys content, pass aria-label and role="img" directly on the icon element.