Featured Icon
An icon in a tinted container that leads cards, empty states and dialogs. Light, hard and outlined, six colours.
Version 0.2.0 ·
Installation
bunx --bun shadcn@latest add @dga/featured-iconUsage
import { CheckmarkCircle02Icon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { FeaturedIcon } from "@/components/ui/featured-icon";
<FeaturedIcon variant="success">
<HugeiconsIcon icon={CheckmarkCircle02Icon} />
</FeaturedIcon>A featured icon draws attention to a card, an empty state or a dialog, and hints at its meaning with colour.
Anatomy
- Root: the tinted square or circle.
- Icon: any Hugeicons icon, sized to the container (16 to 28px).
Examples
Appearance and colour
light is a tint, hard a solid fill and outlined a ring, in brand, neutral, success, error, warning and info. Sizes sm 32px to xl 56px; circle makes it round.
RTL
Place it at the start of a card; directional icons need rtl:-scale-x-100.
Accessibility
- Decorative by default (
aria-hidden), because the text next to it carries the meaning. - If the icon alone carries meaning, pass
role="img"and anaria-label. - Icons are checked at 3:1 against their fill and the page surface.
API Reference
FeaturedIcon
An icon in a tinted container, used to lead cards, empty states and dialogs. Decorative by default; pass role="img" and an aria-label if the icon carries meaning.
| Prop | Type | Default |
|---|---|---|
"brand" | "neutral" | "success" | "error" | "warning" | "info"Colour family. | "brand" | |
| ||
"light" | "outlined" | "hard"`light` is a tinted container, `hard` a solid one and `outlined` a ring. | "light" | |
| ||
"sm" | "md" | "lg" | "xl"Container size: `sm` 32px up to `xl` 56px. | "xl" | |
| ||
booleanRound container instead of square. | false | |
| ||
Also accepts the props of the element it renders.
Deviations from DGA
| Change | Reason |
|---|---|
--featured-icon-brand-background (new) | Featured icon brand hard fill (white icon): primary-sa-flag-600. |
--featured-icon-brand-background-light (new) | Featured icon brand light fill: primary-sa-flag-50, primary-sa-flag-950 in dark mode. |
--featured-icon-brand-icon (new) | Featured icon brand icon on the light fill and outlined: primary-sa-flag-600, primary-sa-flag-300 in dark mode. |
--featured-icon-brand-border (new) | Featured icon brand outlined border: primary-sa-flag-200, primary-sa-flag-800 in dark mode. |
Contrast
108 pairs checked · all pass WCAG 2.1 AAShow 18 statesHide
| Variant / state | Light | Dark |
|---|---|---|
| brand / hard | 4.74:1 3:1 | 8.82:1 3:1 |
| brand / light | 4.53:1 3:1 | 7.57:1 3:1 |
| brand / outlined | 4.54:1 3:1 | 10.38:1 3:1 |
| neutral / hard | 4.77:1 3:1 | 4.59:1 3:1 |
| neutral / light | 4.34:1 3:1 | 7.51:1 3:1 |
| neutral / outlined | 4.57:1 3:1 | 9.38:1 3:1 |
| success / hard | 5.69:1 3:1 | 8.72:1 3:1 |
| success / light | 5.39:1 3:1 | 7.88:1 3:1 |
| success / outlined | 5.44:1 3:1 | 10.80:1 3:1 |
| error / hard | 4.83:1 3:1 | 9.68:1 3:1 |
| error / light | 4.44:1 3:1 | 7.04:1 3:1 |
| error / outlined | 4.62:1 3:1 | 9.01:1 3:1 |
| warning / hard | 5.42:1 3:1 | 9.32:1 3:1 |
| warning / light | 5.20:1 3:1 | 8.57:1 3:1 |
| warning / outlined | 5.19:1 3:1 | 11.30:1 3:1 |
| info / hard | 4.56:1 3:1 | 9.24:1 3:1 |
| info / light | 4.25:1 3:1 | 7.49:1 3:1 |
| info / outlined | 4.37:1 3:1 | 9.88:1 3:1 |
Text needs 4.5:1, icons and focus rings 3:1. Disabled states are exempt. Full contrast report