React icons | IconOven

Coming later. The React packages aren't out yet, so this page describes how they will work. Until then, copy any icon as SVG or JSX from the library.

Install

npm

npm i @iconoven/react @iconoven/icons

pnpm, Yarn and Bun work the same way. Both packages are MIT licensed.

Use an icon

Import the icons you need by name and pass them to Icon. Names are the icon name in PascalCase: arrow-up-right is ArrowUpRight. Every icon page shows its import.

Balance.tsx

import { Icon } from "@iconoven/react";
import { Wallet, Bell } from "@iconoven/icons";

export function Balance() {
  return (
    <button>
      <Icon icon={Wallet} size={20} />
      Balance
    </button>
  );
}

Props

Every prop

<Icon
  icon={Bell}
  size={24}            // px, or any CSS length
  strokeWidth={1.5}    // the master stroke
  color="currentColor" // follows the text colour
  className="bell"
/>

Prop	Default	What it does
`icon`		The icon to draw. Required.
`size`	`24`	Width and height. A number is pixels; a string is any CSS length, like `"1.25em"`.
`strokeWidth`	`1.5`	Line weight at a 24 px size. It scales with the icon.
`color`	`currentColor`	Stroke colour. Leave it to follow the text.
`title`		Makes the icon visible to screen readers with this label.

Any other prop, like className, style or onClick, goes on the svg element. You can also style icons from CSS:

CSS

.toolbar svg { width: 20px; height: 20px; stroke-width: 1.75; }

Icons are hidden from screen readers unless you give them a title. When an icon is the only thing in a button or link, label the button instead.

Labels

// Decorative (next to a text label): hidden from screen readers. This is the default.
<Icon icon={Bell} />

// On its own, the icon is the label.
<button aria-label="Notifications"><Icon icon={Bell} /></button>

// Or give the icon a title of its own.
<Icon icon={Bell} title="Notifications" />

Pro icons

Pro icons come from a private package with the same API. Once your project can reach it (see Pro setup), only the import path changes.

Pro

import { Icon } from "@iconoven/react";
import { Sparkle } from "@iconoven-pro/icons-stroke";

<Icon icon={Sparkle} size={24} />

Next.js, Vite and others

Tree-shaking: each icon is its own export, so bundlers drop the ones you don't import. No plugin or config needed.
Next.js: the icons render on the server and work in Server Components. They don't need "use client".
Vite, Remix, Astro: nothing to set up.
TypeScript: types are included.

Install

Use an icon

Props

Accessibility

Pro icons

Next.js, Vite and others