Icon

Icon renders Falcon’s legacy SVG sprite icons with predefined size and color utility classes.

Code

import { Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return <Icon color="text-dark" name="pack-1-quote" title="Icon title" />;
}

Sizes

Code

import { Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:items-center tw:gap-4">
      <Icon color="text-dark" name="pack-1-quote" size="8" />
      <Icon color="text-dark" name="pack-1-quote" size="12" />
      <Icon color="text-dark" name="pack-1-quote" size="16" />
      <Icon color="text-dark" name="pack-1-quote" size="20" />
      <Icon color="text-dark" name="pack-1-quote" size="24" />
      <Icon color="text-dark" name="pack-1-quote" size="32" />
      <Icon color="text-dark" name="pack-1-quote" size="36" />
      <Icon color="text-dark" name="pack-1-quote" size="42" />
      <Icon color="text-dark" name="pack-1-quote" size="56" />
      <Icon color="text-dark" name="pack-1-quote" size="62" />
      <Icon color="text-dark" name="pack-1-quote" size="72" />
      <Icon color="text-dark" name="pack-1-quote" size="92" />
    </div>
  );
}

Colors

Code

import { Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:items-center tw:gap-6">
      {(
        [
          "primary",
          "secondary",
          "special",
          "success",
          "danger",
          "gray",
          "link",
          "white",
          "yellow",
          "text-dark",
          "text-base",
        ] as const
      ).map((color) => (
        <div key={color} className="tw:text-center">
          <Icon color={color} name="pack-1-quote" size="36" />
          <div style={{ fontSize: 12, marginTop: 8 }}>{color}</div>
        </div>
      ))}
    </div>
  );
}

API

Icon

Props

className

className?: string

color

color?: "white" | "success" | "danger" | "link" | "primary" | "secondary" | "special" | "gray" | "yellow" | "text-dark" | "text-base"

name

name: string

size

size?: "8" | "12" | "16" | "20" | "24" | "32" | "36" | "42" | "56" | "62" | "72" | "92"

title

title?: string