Icon Stack
Displays an overlapping cluster of icons or avatars that expands smoothly when hovered to reveal every individual item.
Installation
pnpm dlx shadcn@latest add @spaceui/components-spaceui-icon-stackUsage
import { InboxIcon } from 'lucide-react'
import { IconStack } from '@/components/spaceui/icon-stack'<IconStack aria-hidden="true">
<InboxIcon className="size-4" />
</IconStack>IconStack is a shadcn-compatible Space UI primitive for building layered
isometric icons and compact isometric illustrations. Use it for empty states,
onboarding steps, feature cards, dashboard status panels, and small UI moments
that need more depth than a flat icon.
The main preview above shows the basic shadcn icon stack pattern: a layered SVG
stack with one centered icon. Style the inner icon or custom content directly
with its own className; the stack only provides the isometric artwork and
overlay position. Keep meaningful labels in surrounding copy and mark purely
decorative stacks with aria-hidden="true".
Examples
Sizes
Colors
Icon Badge
Empty State Illustration
Item Media
API Reference
IconStack
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Controls the outer wrapper size, color, and layout. |
children | React.ReactNode | - | Renders optional decorative content inside the stack. |
All native div props are supported.
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.