Featured Icons

Combine a color variant, size, and style to match the context where the icon appears

Built-in Features

Six Color Variants

Brand, success, info, warning, error, and neutral. Each sets the background and icon color automatically through design tokens.

Four Sizes

From 32px to 56px. Icon and padding scale proportionally through the --nds-icon-size property.

Shape and Style Modifiers

Rounded square by default, with circle, outline, and dark fill options that combine freely with any color and size.

Custom Color Override

Set --icon-bg-color and --icon-color directly on the element without a variant class to create custom color pairings beyond the built-in variants.

Usage Guidelines

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 --icon-bg-color and --icon-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. Use data-status to set a status color variant.

Attribute	Description
none	Primary brand green (default).
`data-status="success"`	Green for positive outcomes and confirmations.
`data-status="info"`	Blue for informational content and tips.
`data-status="warning"`	Yellow/amber for cautionary information.
`data-status="error"`	Red for errors and critical issues.
`data-status="neutral"`	Gray for general purpose and default states.

Modifier Classes

Class	Description
`nds-sm`	Small size, 32px. For dense layouts and secondary features.
`nds-md`	Medium size, 40px. Default when no size is specified.
`nds-lg`	Large size, 48px. For prominent features and section headers.
`nds-xl`	Extra large, 56px. For hero sections and landing page features.
`nds-circle`	Fully rounded shape instead of the default rounded square.
`nds-outline`	Transparent background with a colored border. Lighter visual weight.
`nds-dark`	Solid filled background with white icon. Stronger visual weight for emphasis.

CSS Custom Properties

Property	Description
`--icon-bg-color`	Override the background color. Set on the element or a parent to create custom color pairings.
`--icon-color`	Override the icon color. Pair with `--icon-bg-color` for full control.
`--nds-icon-size`	Override the container size in pixels. Icon and padding scale proportionally.