# NavIcon

- Page: https://jiguang132.com/resources/astryx/docs/nav-icon
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

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.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Nav Icon

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.

| Prop | Type | Default | Description |
|---|---|---|---|
| icon * | ReactNode |  | The icon element to render inside the circular background. Should be an Icon or similar icon component. |

### Usage guidance

- Use in navigation headers to provide a recognizable visual anchor for the section.
- Pass an Icon or similarly sized icon component to ensure proper proportions.
- Avoid: Use NavIcon for interactive purposes; it is a display-only container, not a button.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-nav-icon"
    }
  ]
}
```

### Anatomy

- **Container**: Circular painted container for the supplied icon.
- **Icon**: Caller-supplied visual content rendered inside the container.


## Examples

- Nav Icon: Circular icon containers for navigation headers with accent backgrounds.
- NavIcon — Basic: Circular icon containers wrapping semantic icons. Use as logos or accent icons in navigation headers such as TopNavHeading.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt