Duotone, solid and gradient icons in React

The short answer

IconOven draws every icon in 13 styles: Stroke, Tinted, Gradient, Duotone, Twotone, Solid, Bulk, Solid Twotone, Solid Gradient, Line Duo, Hybrid, Color Outline, Pop. That is 85,000+ icons in all. Stroke is free under MIT in @iconoven/react; the other styles come with IconOven Pro in @iconoven-pro/icons, which has the same icon names.

Switch styles with a prop

The free Stroke style needs no key:

npm install @iconoven/react

import { Wallet } from '@iconoven/react'

<Wallet size={24} />

With Pro, pass the icon to Icon and pick the style with variant. color sets the main colour and secondary the second one in two-colour styles.

import { Icon } from '@iconoven/react'
import { Wallet } from '@iconoven-pro/icons'

<Icon icon={Wallet} variant="duotone" color="#0F766E" secondary="#99F6E4" />
<Icon icon={Wallet} variant="solid" />
<Icon icon={Wallet} variant="gradient" size={32} />

Set up the Pro registry once per project: Pro setup. Every prop is in the npm docs.

Weights or styles

Phosphor comes in "6 weights: Thin, Light, Regular, Bold, Fill, and Duotone" (Phosphor README). Weights change how thick one drawing is; styles redraw the icon, for example as a filled shape or with a second colour. Hugeicons lists Stroke, Twotone, Duotone, Solid and Bulk in its Rounded set (hugeicons.com). Neither site lists a gradient style, as of 13 October 2026.

More side by side: IconOven vs Phosphor, IconOven vs Hugeicons and UI icon libraries compared.

Common questions

Which React icon library has duotone, solid and gradient styles?

IconOven has all three, with the same icon names in every style, in round and sharp corners. You pick the style with the variant prop. Stroke is free under MIT; the other styles come with IconOven Pro.

How do I colour a duotone icon?

Pass color for the main colour and secondary for the second one. Mono styles such as Stroke and Solid follow color only.

Do I need a key for the Pro styles?

Yes. @iconoven-pro/icons installs from our registry with your licence key. Pro setup shows npm, pnpm, Yarn and Bun.