FeaturedIcon
<FeaturedIcon>TailwindCSS ModulesFeatured icons draw attention to specific features, empty states, or alerts. They use geometric containers to provide visual anchor points across spacious layouts.
npx coloxo add featured-icon --style coloxo-cssimport { FeaturedIcon } from '@coloxo/ui';Design Tokens:
1. Variant Matrix
Every color rendered across all container types.
| Color | light-circle | dark-circle | outline | modern | modern-neue |
|---|---|---|---|---|---|
| brand | |||||
| gray | — | — | |||
| error | — | — | |||
| warning | — | — | |||
| success | — | — |
2. Control heights (Sizes)
Sizes match logical steps in typographic scale to ensure optical balance when placed next to headings.
Sizes
size="sm"Compact list items, inline alerts
size="md"DEFAULTStandard forms, standard empty states
size="lg"Modals, feature highlights, large cards
size="xl"Hero sections, primary empty states
3. Interactive Props Configurator
<FeaturedIcon type="light-circle" color="brand"> <Zap /></FeaturedIcon>4. Dark theme
FeaturedIcons gracefully adapt to dark backgrounds by shifting their alpha layers and borders.
SuccessWarningBrandModern5. Enterprise layout compositions
Using FeaturedIcons for empty states, billing prompts, and inline dialogs.
No team members yet
Invite your colleagues to collaborate, share dashboards, and manage billing together.
Payment method failed
We were unable to process your last invoice for $24.00. Please update your billing information to avoid service interruption.
Accessibility
FeaturedIcons are strictly decorative. They should always be paired with descriptive text.
Icons inside FeaturedIcon should typically be hidden from screen readers using aria-hidden='true' (which most icon libraries do by default) to prevent redundant announcements.
Backgrounds are deliberately designed to have soft contrast. Do not rely on their color alone to convey critical state.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | "light-circle" | "dark-circle" | "modern" | "modern-neue" | "outline" | light-circle | Container style. |
| color | "brand" | "gray" | "error" | "warning" | "success" | brand | Tone. |
| size | "sm" | "md" | "lg" | "xl" | md | Box size. |