Static featured icon shell with chrome variants, semantic colors, sizes, shape, and a plain glyph mode.
Also known as: feature icon, icon badge, icon shell, featured glyph, status icon
Install with the CLI, or copy the component source into your project.
Add featured-icon (npm)
1npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add featured-icon
Soft tinted shell at lg for easier scanning. Default API size is md.
Chrome treatments from soft through plate, plus plain. Shown at lg for comparison.
Semantic accents on the soft variant at lg.
Container steps from 12px (2xs) to 62px (3xl).
Each chrome variant has a default shape. Pass shape to override. Shown at lg.
Bare glyph sized for any surface. Inherits the surrounding text color, so ink plates stay matched to text-brand-ink-foreground in light and dark. glyphShadow helps on busy plates.
Turn elevation off, set radius, grow the glyph with iconSize, or override background, border, and icon color. Shown at lg unless noted.
Static featured icon shell for empty states, feature rows, and status marks. Pass any icon as children. Variants supply chrome recipes; override background, border, icon color, icon size, radius, and elevation shadow when you need a custom look.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "soft" | "halo" | "filled" | "outline" | "surface" | "plate" | "plain" | "soft" | Chrome treatment. soft is a tinted fill. halo stacks a solid disc on a wash. filled is a solid plate. outline draws concentric rings in a fixed box. surface and plate are bordered elevated shells. plain is a bare sized glyph with no plate; it inherits the surrounding text color. |
| size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Outer footprint from 12px (2xs) to 62px (3xl). Also sets the default glyph size for that step. Plain uses the glyph size as the host size. |
| color | "brand" | "muted" | "success" | "warning" | "destructive" | "brand" | Semantic accent recipe for fill, rings, and glyph when background, borderColor, and iconColor are omitted. brand follows primary so it stays visible in light and dark themes. Ignored for plain, which inherits the surrounding text color unless iconColor is set. |
| shape | "circle" | "square" | - | Container geometry. Omit to use the variant default: circle for soft, halo, and outline; square for filled, surface, and plate. Ignored for plain. |
| radius | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | - | Corner radius override. When omitted, circle uses full and square uses the size step. Ignored for plain. |
| shadow | boolean | true | Elevation shadow for filled, surface, and plate. Set false to keep the border without the drop shadow. |
| background | string | - | Container fill as a CSS color. Overrides the variant background recipe. |
| borderColor | string | - | Border and ring stroke as a CSS color. Overrides the variant border recipe. |
| iconColor | string | - | Glyph color as a CSS color. Overrides the variant icon recipe. On plain, use this only when you need a color different from the surrounding text. |
| iconSize | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | - | Glyph size step, independent of the container size. Same scale as size. For example size md with iconSize xl keeps a 32px shell and draws a 24px glyph. On plain, this also sets the host footprint. |
| glyphShadow | boolean | true | Plain only. When true, apply the glyph drop shadow for busy surfaces. Set false to turn the shadow off. |
| children | ReactNode | - | Icon content, usually an SVG. Sized by the component via the glyph slot. |
| className | string | - | Additional styles on the host. |
| …HTML attributes | HTMLAttributes<HTMLDivElement> | - | Standard element attributes. Set aria-label when the mark is meaningful to assistive tech. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-featured-icon-bg | CSS color | variant recipe | Resolved container fill. Set by variant or the background prop. |
| --df-featured-icon-border | CSS color | variant recipe | Resolved border and ring stroke. Set by variant or the borderColor prop. |
| --df-featured-icon-icon | CSS color | variant recipe | Resolved glyph color. Set by variant or the iconColor prop. |
| --df-featured-icon-elevation | CSS box-shadow | variant recipe | Drop shadow for elevated variants. none when shadow is false. |
| --df-featured-icon-brand-solid | CSS color | var(--primary) light; var(--primary-foreground) dark | Brand solid disc for halo. Stays dark under a light glyph in both themes. |
| --df-featured-icon-brand-on-solid | CSS color | var(--primary-foreground) light; var(--df-neutral-0) dark | Light glyph on the brand solid disc. Stays light in both themes. |
| --df-featured-icon-size-2xs | CSS length | calc(3 * var(--spacing-unit)) | 2xs container size (12px). |
| --df-featured-icon-size-md | CSS length | calc(8 * var(--spacing-unit)) | md container size (32px). |
| --df-featured-icon-size-3xl | CSS length | calc(15.5 * var(--spacing-unit)) | 3xl container size (62px). |
| --df-featured-icon-glyph-md | CSS length | calc(4 * var(--spacing-unit)) | md glyph size (16px). |
| --df-featured-icon-radius-md | CSS length | var(--radius-md) | Square corner radius at md when radius is omitted. |
| --df-featured-icon-plain-glyph-filter | CSS filter | var(--df-button-plain-glyph-filter) | Drop shadow for plain glyphs on busy surfaces. |