API Reference

Nava Icons provides three APIs: static imports for tree shaking, a dynamic runtime API, and global configuration for setting defaults across your app.

Static API (Recommended)

Import individual icon components directly. Supports full tree shaking.

import { HomeIcon, CheckCircleIcon } from '@whydrf/nava-icon-react'
import type { IconName, IconMode } from '@whydrf/nava-icon-react'

<HomeIcon size={24} />
<CheckCircleIcon mode="filled" color="green" />

Dynamic API

Use the <Icon> component for runtime icon selection.

import { Icon } from '@whydrf/nava-icon-react'
<Icon name="home" size={24} />
<Icon name="check-circle" mode="filled" />

Global Configuration

Set default icon props once. All icons inherit these values; component props always override.

import { NavaIconProvider } from '@whydrf/nava-icon-react'

<NavaIconProvider size={20} color="gray" strokeWidth={1.5}>
  <HomeIcon />  {/* inherits all defaults */}
</NavaIconProvider>

NavaIconConfig

Shared type from @whydrf/nava-icon-core.

IconMode

Package Exports