XDS — Design System

NavIcon@xds/core · XDSNavIcon v0.0.13

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.

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

Best practices

Guidance	Practices
Do	Use in navigation headers to provide a recognizable visual anchor for the section.
Do	Pass an XDSIcon or similarly sized icon component to ensure proper proportions.
Don't	Use NavIcon for interactive purposes — it is a display-only container, not a button.

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>
  );
}