Icons

We use lucide-react across the SDK. The FeaturedIcon component wraps any lucide icon in a brand-tinted gradient chip for hero rows, empty states, and feature tiles.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/featured-icon.json

Usage

Pass any lucide-react icon component to FeaturedIcon. Variant and size are optional.

TSImport

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

TSExample

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

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

Colors

The same color palette as Badge — Squad brand tones (indigo, coral, purple, amber, magenta, lavender, lilac, pink, cream, blush, peach) plus semantic statuses (success, warning, info, destructive) and category tones (emerald, sky, fuchsia).

brand

indigo

coral

purple

amber

magenta

lavender

lilac

pink

cream

blush

peach

destructive

success

warning

info

muted

emerald

sky

fuchsia

Flat variant

Borderless soft chip with a flat tint — matches the muted icon surface used in nav lists and item rails. Pair with `size='sm'` for a 28px chip with a 14px icon.

brand

indigo

coral

purple

amber

magenta

lavender

lilac

pink

cream

blush

peach

destructive

success

warning

info

muted

emerald

sky

fuchsia

Animated variant

Pair FeaturedIcon with a lucide-animated icon. Hovering the chip plays the icon's stroke-draw animation. Install one icon at a time via the shadcn CLI; each one drops into `src/components/ui/`.

2xl

$Install

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

TSExample

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" />
  );
}

Sizes

Four sizes from sm (28px) to xl (48px). Inner svg auto-resolves.

2xl

Featured icons

A curated grid of lucide-react icons rendered through FeaturedIcon at the default size + brand variant. Use these as a starting palette for empty states, feature tiles, and dashboard hero rows.

API Reference

Props for FeaturedIcon.

Prop	Type	Default	Description
`icon`	React.ComponentType<{ className?: string }>	—	Any lucide-react icon component (or any forwardRef icon that accepts `className`).
`color`	FeaturedIconColor	"brand"	Color token mirrored from Badge: brand, indigo, coral, purple, amber, magenta, lavender, lilac, pink, cream, blush, peach, destructive, success, warning, info, muted, emerald, sky, fuchsia.
`variant`	"gradient" \| "flat"	"gradient"	Surface treatment. `gradient` is the brand-tinted card with a hairline border; `flat` is a soft borderless chip with a flat tint.
`size`	"sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Outer chip + inner svg size (sm 28px, md 32px, lg 40px, xl 48px, 2xl 64px).