Nava Icons

Quick Start

1. Install

npm install @whydrf/nava-icon-react

2. Import & Use

import { Home, Search, Add } from '@whydrf/nava-icon-react'

function App() {
  return (
    <div>
      <Home />
      <Search size={24} color="gray" />
      <Add size={32} color="#ff6600" />
    </div>
  )
}

3. Customize

<Home size={32} color="blue" strokeWidth={0.5} className="my-icon" title="Home" />
<Home size={32} color="#ff6600" />
<Home size={32} color="rgb(0, 150, 136)" />

4. Switch Mode

Use the mode prop to switch between regular (stroke) and filled (solid) variants.

<CheckCircle mode="regular" />  {/* stroke outline */}
<CheckCircle mode="filled" />   {/* solid fill */}

Props

PropTypeDefault
sizenumber24
colorstringcurrentColor
strokeWidthnumber0.5
mode"regular" | "filled""regular"
classNamestring
titlestring