IconCard

A selectable card pairing an icon over a label, for option pickers such as property-type or category choices; renders a native button and forwards its props.

Usage

import { IconCard, IconCardProps } from "@instruments/materia-ui/components/icon-card";

Best practices

IconCard is itself a native <button> - wire selected/onClick and drive a single-select group in state; don't nest it in another button or anchor.
Pass a Lucide component to icon (e.g. HomeIcon), not a rendered element <HomeIcon /> - it is handed to the internal Icon for consistent sizing/stroke.
Use IconCard for compact icon-over-label option pickers (property type, category); for a content container with header/body reach for Card, and for a settings row use SettingsCard.

Props

Prop	Type	Description
icon(required)	`LucideIcon`	The icon to display
label(required)	`string`	Label text below the icon
selected	`boolean`	Whether the card is currently selected
testId	`string`

Also exports

interfaceIconCardProps

Composition

Builds on

Center, Icon