Featured Icons - National Design System

Best Practices

• Use featured icons to visually anchor key items in Cards, Definition Lists, and page sections where a plain icon would not stand out enough
• Use inside Alerts and Modals to reinforce the message type with a matching color variant
• Use as leading icons in Drawer navigation items to give each section a distinct visual identity
• Match the color variant to the meaning: brand for primary actions, success/error/warning for status, info for informational, neutral for general purpose
• Don't use for decorative icons that carry no meaning. A plain icon without a container is lighter and less visually demanding
• Use nds-sm in dense layouts like table rows or sidebar items. Use nds-lg or nds-xl for hero sections and landing page features
• Use nds-circle when the icon sits next to rounded elements like avatars. Use the default rounded square for card headers and list items
• Use nds-dark when the icon needs to stand out on light backgrounds with stronger visual weight. Use nds-outline for a lighter, secondary treatment
• Override --featuredicon-bg and --featuredicon-color directly on the element without a variant class to create custom color pairings beyond the built-in variants

Color Variants

Brand is the default color. Pick a color with a color class, the same set tags use. data-status paints the same colors and says more: it declares the state the icon reports. Use the class when you want the color, and the attribute when the icon reports an outcome. The attribute also inherits, and the class does not: an icon inside a card or a drawer item that carries data-status takes that color unless it sets its own.

CSS Custom Properties

Each knob can be set on the element itself or on any ancestor — the status cascade and host components (cards, drawer, metric) set these to color a nested featured icon.