[Guides](https://iconoven.com/guides)

# Duotone, solid and gradient icons in React

Most React icon sets come in one outline style, or in weights of it. We make IconOven, so we say so up front. Here is how to get duotone, solid and gradient icons from one set, and what other libraries offer, with facts from their own sites.

Last updated 13 October 2026

On this page

1. The short answer
2. Switch styles with a prop
3. Weights or styles
4. Common questions

## 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](https://iconoven.com/icons/pro) in `@iconoven-pro/icons`, which has the same icon names.

## Switch styles with a prop

The free Stroke style needs no key:

Terminal

`npm install @iconoven/react`

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.

React

`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](https://iconoven.com/docs/icons/pro-setup). Every prop is in the [npm docs](https://iconoven.com/docs/icons/npm#props).

## Weights or styles

Phosphor comes in "6 weights: Thin, Light, Regular, Bold, Fill, and Duotone" ([Phosphor README](https://github.com/phosphor-icons/homepage)). 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](https://hugeicons.com)). Neither site lists a gradient style, as of 13 October 2026.

More side by side: [IconOven vs Phosphor](https://iconoven.com/guides/iconoven-vs-phosphor), [IconOven vs Hugeicons](https://iconoven.com/guides/iconoven-vs-hugeicons) and [UI icon libraries compared](https://iconoven.com/guides/ui-icon-library-alternatives).

## 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](https://iconoven.com/icons/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](https://iconoven.com/docs/icons/pro-setup) shows npm, pnpm, Yarn and Bun.

Facts about other libraries come from their own sites and were checked on 13 October 2026. Tell us if something has changed: [hello@iconoven.com](mailto:hello@iconoven.com).

## More comparisons

- [UI icon libraries compared](https://iconoven.com/guides/ui-icon-library-alternatives): how IconOven, Hugeicons, Lucide, Phosphor, Tabler, Heroicons, Font Awesome and Iconify differ, with facts from each library's own site.
- [IconOven vs Hugeicons](https://iconoven.com/guides/iconoven-vs-hugeicons): A side-by-side of IconOven and Hugeicons, with Hugeicons' own numbers and the date we read them.
- [IconOven vs Lucide](https://iconoven.com/guides/iconoven-vs-lucide): IconOven and Lucide compared, using Lucide's own site and README for its numbers.
- [IconOven vs Phosphor](https://iconoven.com/guides/iconoven-vs-phosphor): IconOven and Phosphor Icons compared with facts from Phosphor's own README and licence.
- [IconOven vs Tabler Icons](https://iconoven.com/guides/iconoven-vs-tabler-icons): IconOven and Tabler Icons compared, with Tabler's numbers from its own site.
- [SF Symbols alternative for Flutter](https://iconoven.com/guides/sf-symbols-alternative-flutter): One icon set for a Flutter app on Android and iOS, with what Apple's terms say about SF Symbols.

## Every style, one plan

Every icon is free in Stroke under MIT. Pro opens all 13 styles from $59 a year.

[See Pro plans](https://iconoven.com/icons/pro)

Source: https://iconoven.com/guides/icon-library-duotone-solid-gradient-react