Icon

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Primary

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <Icon color="text-dark" name="pack-1-quote" title="Icon title" />
</div>

Size

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  {["8", "12", "16", "20", "24", "32", "36", "42", "56", "62", "72", "92"].map(
    (size) => (
      <div key={size} style={{ display: "inline-block", margin: 20 }}>
        <div
          style={{
            alignItems: "center",
            display: "flex",
            flexDirection: "column",
            gap: 10,
          }}
        >
          <Icon
            color="text-dark"
            name="pack-1-quote"
            size={size}
            title="Icon title"
          />
          {size}
        </div>
      </div>
    ),
  )}
</div>

Colors

Code

<div
  style={{
    alignItems: "center",
    display: "flex",
    flexWrap: "wrap",
    gap: 24,
  }}
>
  {[
    "primary",
    "secondary",
    "special",
    "success",
    "danger",
    "gray",
    "link",
    "white",
    "yellow",
    "text-dark",
    "text-base",
  ].map((color) => (
    <div key={color} style={{ textAlign: "center" }}>
      <Icon color={color} name="pack-1-quote" size="36" />
      <div style={{ fontSize: 12, marginTop: 8 }}>{color}</div>
    </div>
  ))}
</div>

API

Icon

Name	Type/Description
className	string | undefined
color	"link" | "secondary" | "white" | "success" | "danger" | "primary" | "special" | "gray" | "yellow" | "text-dark" | "text-base" | undefined
name	string
size	"8" | "12" | "16" | "20" | "24" | "32" | "36" | "42" | "56" | "62" | "72" | "92" | undefined
title	string | undefined