Icon
Static and interactive artwork from Gaudi’s centralized icon registry.
AnimatedIcon adds opt-in motion with shared size and color tokens, a searchable catalogue, and host-controlled activation.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/icon-stack-in-context.json.
Usage
Examples
In an empty state and list row
Sizes, colors and badge
In a card, list row and empty state
Tones
Variants, sizes and shapes
API
10 props
Accessibility
Decorative icons are hidden from assistive technology. Informative or icon-only links need a readable label.
Related
EmptyStateExplain empty collections, unavailable results and the next useful action.4 examplesItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examples