Featured Icon

Ready

An icon on a styled tile.

Installation

$ npx @oratiq-js/ui add featured-icon

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { FeaturedIcon, featuredIconVariants } from "@/components/ui/featured-icon";

Prop	Type	Default	Description
`variant`	`"light" \| "solid" \| "outline"`	`"light"`	Tile treatment.
`tone`	`"primary" \| "success" \| "warning" \| "destructive" \| "info" \| "muted"`	`"primary"`	Colour role.
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`	Tile and icon size.

Always decorative (aria-hidden) — the meaning belongs to the text next to it, never to the tile.

View source on GitHub → components/ui/featured-icon.tsx