# Feature icon

> A tinted box that holds an icon. You pass an icon component, and it is hidden from screen readers.

Facade UI item `feature-icon` (ui, atom).
Docs page: https://facadeui.dev/components/feature-icon · Registry JSON: https://facadeui.dev/r/feature-icon.json

## Install

```bash
npx shadcn@latest add @facade/feature-icon
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/feature-icon.json`. The CLI also installs what it needs: class-variance-authority@^0.7.1, @facade/types, @facade/utils.

Files: `components/ui/feature-icon.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/feature-icon-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { BoltIcon, LockIcon, RocketIcon, WaypointsIcon } from "lucide-react"

import { FeatureIcon } from "@/components/ui/feature-icon"

export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <FeatureIcon icon={BoltIcon} />
      <FeatureIcon icon={LockIcon} variant="solid" shape="circle" />
      <FeatureIcon icon={RocketIcon} variant="outline" size="lg" />
      <FeatureIcon icon={WaypointsIcon} variant="plain" />
    </div>
  )
}
```

## Props

### FeatureIconProps

Extends VariantProps<typeof featureIconVariants>.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` (required) | `IconComponent` |  |  |
| `className` | `string` |  |  |