An icon in a tinted container that leads cards, empty states and dialogs. Light, hard and outlined, six colours.
A featured icon draws attention to a card, an empty state or a dialog, and hints at its meaning with colour.
Mobile · 375px
Not in the DGA Figma file
The featured icon comes from the design.dga.gov.sa CSS. Its tokens are added from the site CSS and listed under Deviations.
Installation
npx 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>Props
Prop
Type
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; it is then announced. - Icons are checked at 3:1 against their fill and the page surface.
Contrast
108 pairs checked against WCAG 2.1 AA (text 4.5:1, icons and focus rings 3:1), all passing. Disabled states are exempt.
brand
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| hard | icon-oncolor / featured-icon-brand-background | 4.74:1 3:1 | 4.74:1 3:1 |
| light | featured-icon-brand-icon / featured-icon-brand-background-light | 4.53:1 3:1 | 9.16:1 3:1 |
| outlined | featured-icon-brand-icon / background-white | 4.54:1 3:1 | 8.63:1 3:1 |
neutral
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| hard | icon-oncolor / featured-icon-neutral-background | 4.77:1 3:1 | 4.77:1 3:1 |
| light | featured-icon-neutral-icon / featured-icon-neutral-background-light | 4.34:1 3:1 | 9.95:1 3:1 |
| outlined | featured-icon-neutral-icon / background-white | 4.57:1 3:1 | 9.95:1 3:1 |
success
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| hard | icon-oncolor / featured-icon-success-background | 5.69:1 3:1 | 5.69:1 3:1 |
| light | featured-icon-success-icon / featured-icon-success-background-light | 5.39:1 3:1 | 8.63:1 3:1 |
| outlined | featured-icon-success-icon / background-white | 5.44:1 3:1 | 8.98:1 3:1 |
error
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| hard | icon-oncolor / featured-icon-error-background | 4.83:1 3:1 | 4.83:1 3:1 |
| light | featured-icon-error-icon / featured-icon-error-background-light | 4.44:1 3:1 | 7.18:1 3:1 |
| outlined | featured-icon-error-icon / background-white | 4.62:1 3:1 | 7.48:1 3:1 |
warning
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| hard | icon-oncolor / featured-icon-warning-background | 5.42:1 3:1 | 5.42:1 3:1 |
| light | featured-icon-warning-icon / featured-icon-warning-background-light | 5.20:1 3:1 | 9.02:1 3:1 |
| outlined | featured-icon-warning-icon / background-white | 5.19:1 3:1 | 9.39:1 3:1 |
info
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| hard | icon-oncolor / featured-icon-info-background | 4.56:1 3:1 | 4.56:1 3:1 |
| light | featured-icon-info-icon / featured-icon-info-background-light | 4.25:1 3:1 | 7.98:1 3:1 |
| outlined | featured-icon-info-icon / background-white | 4.37:1 3:1 | 8.21:1 3:1 |
Deviations from DGA
| Item | DGA original | Ours | Reason |
|---|---|---|---|
| --featured-icon-brand-background (new) | Added from site CSS (.featured-icon) | --colors-primary-sa-flag-600-primary | Featured icon brand hard fill (white icon): primary-sa-flag-600. |
| --featured-icon-brand-background-light (new) | Added from site CSS (.featured-icon) | --colors-primary-sa-flag-50 (light), --colors-primary-sa-flag-950 (dark) | Featured icon brand light fill: primary-sa-flag-50, primary-sa-flag-950 in dark mode. |
| --featured-icon-brand-icon (new) | Added from site CSS (.featured-icon) | --colors-primary-sa-flag-600-primary (light), --colors-primary-sa-flag-300 (dark) | 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) | Added from site CSS (.featured-icon) | --colors-primary-sa-flag-200 (light), --colors-primary-sa-flag-800 (dark) | Featured icon brand outlined border: primary-sa-flag-200, primary-sa-flag-800 in dark mode. |
| --featured-icon-neutral-background (new) | Added from site CSS (.featured-icon) | --colors-neutral-500 | Featured icon neutral hard fill (white icon): neutral-500. |
| --featured-icon-neutral-background-light (new) | Added from site CSS (.featured-icon) | --colors-neutral-100 (light), --colors-neutral-800 (dark) | Featured icon neutral light fill: neutral-100, neutral-800 in dark mode. |
| --featured-icon-neutral-icon (new) | Added from site CSS (.featured-icon) | --colors-neutral-500 (light), --colors-neutral-300 (dark) | Featured icon neutral icon on the light fill and outlined: neutral-500, neutral-300 in dark mode. |
| --featured-icon-neutral-border (new) | Added from site CSS (.featured-icon) | --colors-neutral-200 (light), --colors-neutral-700 (dark) | Featured icon neutral outlined border: neutral-200, neutral-700 in dark mode. |
| --featured-icon-success-background (new) | Added from site CSS (.featured-icon) | --colors-green-700 | Featured icon success hard fill (white icon): green-700. |
| --featured-icon-success-background-light (new) | Added from site CSS (.featured-icon) | --colors-green-50 (light), --colors-green-950 (dark) | Featured icon success light fill: green-50, green-950 in dark mode. |
| --featured-icon-success-icon (new) | Added from site CSS (.featured-icon) | --colors-green-700 (light), --colors-green-300 (dark) | Featured icon success icon on the light fill and outlined: green-700, green-300 in dark mode. |
| --featured-icon-success-border (new) | Added from site CSS (.featured-icon) | --colors-green-200 (light), --colors-green-800 (dark) | Featured icon success outlined border: green-200, green-800 in dark mode. |
| --featured-icon-error-background (new) | Added from site CSS (.featured-icon) | --colors-red-600 | Featured icon error hard fill (white icon): red-600. |
| --featured-icon-error-background-light (new) | Added from site CSS (.featured-icon) | --colors-red-50 (light), --colors-red-950 (dark) | Featured icon error light fill: red-50, red-950 in dark mode. |
| --featured-icon-error-icon (new) | Added from site CSS (.featured-icon) | --colors-red-600 (light), --colors-red-300 (dark) | Featured icon error icon on the light fill and outlined: red-600, red-300 in dark mode. |
| --featured-icon-error-border (new) | Added from site CSS (.featured-icon) | --colors-red-200 (light), --colors-red-800 (dark) | Featured icon error outlined border: red-200, red-800 in dark mode. |
| --featured-icon-warning-background (new) | Added from site CSS (.featured-icon) | --colors-yellow-700 | Featured icon warning hard fill (white icon): yellow-700. |
| --featured-icon-warning-background-light (new) | Added from site CSS (.featured-icon) | --colors-yellow-50 (light), --colors-yellow-950 (dark) | Featured icon warning light fill: yellow-50, yellow-950 in dark mode. |
| --featured-icon-warning-icon (new) | Added from site CSS (.featured-icon) | --colors-yellow-700 (light), --colors-yellow-300 (dark) | Featured icon warning icon on the light fill and outlined: yellow-700, yellow-300 in dark mode. |
| --featured-icon-warning-border (new) | Added from site CSS (.featured-icon) | --colors-yellow-200 (light), --colors-yellow-800 (dark) | Featured icon warning outlined border: yellow-200, yellow-800 in dark mode. |
| --featured-icon-info-background (new) | Added from site CSS (.featured-icon) | --colors-blue-600 | Featured icon info hard fill (white icon): blue-600. |
| --featured-icon-info-background-light (new) | Added from site CSS (.featured-icon) | --colors-blue-50 (light), --colors-blue-950 (dark) | Featured icon info light fill: blue-50, blue-950 in dark mode. |
| --featured-icon-info-icon (new) | Added from site CSS (.featured-icon) | --colors-blue-600 (light), --colors-blue-300 (dark) | Featured icon info icon on the light fill and outlined: blue-600, blue-300 in dark mode. |
| --featured-icon-info-border (new) | Added from site CSS (.featured-icon) | --colors-blue-200 (light), --colors-blue-800 (dark) | Featured icon info outlined border: blue-200, blue-800 in dark mode. |
| Featured Icon | Not in the DGA Figma file. Defined only in the design.dga.gov.sa CSS (.featured-icon). | Built from the site CSS: hard, light and outlined; brand, neutral, success, error, warning and info; sm 32, md 40, lg 48 and xl 56px; square or circle. | Figma is the source of truth where it exists; here only the site CSS does. |
| Featured Icon: hard warning and success | Hard warning: white on warning-400. Hard success: white on brand-600 (the same as brand). | Hard warning uses yellow-700; hard success uses green-700 (DGA status green). | White on yellow-400 is 1.9:1, below the 3:1 non-text minimum. Success uses the status palette so it differs from brand, as the site's semantic block (text-success) does. |