Nova Icons

This package provides a utility component for rendering Material Symbols or custom Nova icons.

Installation

# With npm
npm install @hxnova/icons@beta

# With pnpm
pnpm add @hxnova/icons@beta

# With yarn
yarn add @hxnova/icons@beta

Usage

Import CSS

Import the icons.css file either in your application root file or top-level css. This will set up the necessary icon fonts in order to render the icons.

// in TS/JS file
import '@hxnova/icons/icons.css'

@import '@hxnova/icons/icons.css';

Use the Icon component

Material Symbols

import { Icon } from '@hxnova/icons';

// outlined style
<Icon family="material" name="home" />
// filled style
<Icon family="material" name="home" filled />

Nova Custom Icons

import { Icon } from '@hxnova/icons';

// outlined style
<Icon family="nova" name="Plane-Z" />

Styling

The size and color props can be used to customize the icon. The color prop accepts any valid CSS color value, including Nova design token variables:

// Static color
<Icon family={'material'} name={'home'} size={40} color={'gray'} />

// Nova system color via CSS variable
<Icon family={'nova'} name={'360-capture'} color={'var(--nova-palette-success)'} />

Maintenance

For maintainer instructions on updating Material Symbols and custom Nova icons, see docs/Maintenance.md.