XDSNavIcon@xds/core · NavIcon
Preview coming soon

Usage

NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identify a section or application.

Best practices

GuidancePractices
DoUse in navigation headers to provide a recognizable visual anchor for the section.
DoPass an XDSIcon or similarly sized icon component to ensure proper proportions.
Don'tUse NavIcon for interactive purposes — it is a display-only container, not a button.

Import

ts
import {XDSNavIcon} from '@xds/core/NavIcon'

Props

PropTypeDescription
iconrequired
ReactNodeThe icon element to render inside the circular background. Should be an XDSIcon or similar icon component.

Showcase source

tsx
'use client';
​
import {XDSNavIcon} from '@xds/core/NavIcon';
import {XDSIcon} from '@xds/core/Icon';
import {XDSHStack} from '@xds/core/Layout';
​
export default function NavIconShowcase() {
  return (
    <XDSHStack gap={4} vAlign="center">
      <XDSNavIcon icon={<XDSIcon icon="search" />} />
      <XDSNavIcon icon={<XDSIcon icon="calendar" />} />
      <XDSNavIcon icon={<XDSIcon icon="wrench" />} />
    </XDSHStack>
  );
}