Icons

import { FeaturedIcon } from "@/components/ui/featured-icon";
import { Palette } from "@phosphor-icons/react/ssr";

import { FeaturedIcon } from "@/components/ui/featured-icon";
import { Palette } from "@phosphor-icons/react/ssr";

export function Example() {
  return <FeaturedIcon icon={Palette} />;
}

import { Heart } from "@phosphor-icons/react/ssr";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      {/* Duotone — filled base + lighter accent layer. Our default for icons
          that have a body (folders, bells, hearts, avatars…). */}
      <Heart weight="duotone" className="size-6" />

      {/* Regular — single-line stroke. Use for arrows, carets, plus,
          chevrons, and other single-line glyphs. */}
      <Heart weight="regular" className="size-6" />

      {/* Color follows `currentColor` — the duotone accent auto-derives from
          it, so a single text color tints both layers. */}
      <Heart weight="duotone" className="size-6 text-primary" />   {/* brand */}
      <Heart weight="duotone" className="size-6 text-rose-500" />
      <Heart weight="duotone" className="size-6" style={{ color: "#513DE5" }} />
    </div>
  );
}

npx shadcn@latest add "https://lucide-animated.com/r/check.json"

import { FeaturedIconAnimated } from "@/components/ui/featured-icon-animated";
import { CheckIcon } from "@/components/ui/check";

export function Example() {
  return (
    <FeaturedIconAnimated icon={CheckIcon} color="success" size="xl" />
  );
}