Featured icon

<FeaturedIcon color="primary"><Zap /></FeaturedIcon>

Add

npx @ava-ui/apogee add featured-icon

No Apogee dependencies. Zero JS.

Usage

---
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import { Zap } from '@lucide/astro'
---
<FeaturedIcon theme="light" color="primary" size="large"><Zap /></FeaturedIcon>

API

@composable — exposed to Content Editors in AVA. Any other native <span> attribute passes through. The default slot takes one icon.

Variants

Every theme:

<FeaturedIcon theme="light" color="primary"><Zap /></FeaturedIcon>
<FeaturedIcon theme="solid" color="primary"><Zap /></FeaturedIcon>
<FeaturedIcon theme="outline" color="primary"><Zap /></FeaturedIcon>

Every color, per theme:

<FeaturedIcon color="neutral"><Inbox /></FeaturedIcon>
… primary, critical, positive, warning, for light, solid and outline …

Every size, and rounded:

<FeaturedIcon size="small"><Zap /></FeaturedIcon>
<FeaturedIcon size="medium"><Zap /></FeaturedIcon>
<FeaturedIcon size="large"><Zap /></FeaturedIcon>
<FeaturedIcon size="xlarge"><Zap /></FeaturedIcon>
<FeaturedIcon rounded color="positive"><ShieldCheck /></FeaturedIcon>

States

Static: no interactive states. It follows the theme (light and dark) through its tokens.

Examples

A feature card:

<Card>
<FeaturedIcon color="primary" size="large"><Rocket /></FeaturedIcon>
<p class="mt-4 font-medium">Deploy in seconds</p>
<p class="text-sm text-neutral-faded">Push to main and the site is live.</p>
</Card>

A warning with meaning of its own:

<FeaturedIcon theme="light" color="warning" rounded label="Warning"><TriangleAlert /></FeaturedIcon>

Accessibility

• Decorative by default: aria-hidden="true", and the icon inside should carry aria-hidden too (Lucide icons do when they have no title).
• With label, the tile becomes role="img" with that name. Use it only when no adjacent text says the same thing.
• Colour is never the only signal; the tile sits next to a heading or a message.

Tokens

Do / Don’t

• Do use one size per surface: large for empty states and feature cards, medium beside a heading, small inline in a list.
• Do match the hue to the message (critical for a failure, positive for a success).
• Don’t put a button inside; a featured icon is not interactive.
• Don’t use solid for every tile on a page; it is the loudest theme.

Content

• The icon says what the text says; pick a literal glyph (an inbox for an empty inbox), not a mood.
• label is a noun phrase (“Warning”, “Verified”), used only when no text nearby carries it.