Phosphor vs Remix Icons: Weights or Coverage?

Choose Phosphor for six weights and duotone icons, or Remix for a larger line/fill set. Compare React support, style, and license.

Amit Yadav March 6, 2026Updated October 25, 20264 min read

On this page

The style difference
Regular weight compared
Phosphor’s style weights
React integration
Vue & Svelte support
Design system suitability
When to choose each
Frequently asked questions

Both Phosphor and Remix Icons offer multi-weight SVG icon sets for general product UI. Phosphor goes further with six weights including Duotone; Remix keeps it simpler with Line and Fill.

Library

Phosphor

Remix Icon

Samples

Icons

9,072

3,188

License

MIT

Apache-2.0

Author

Phosphor Icons

Remix Design

The style difference

Phosphor Icons offers six visual weights per icon: Thin, Light, Regular, Bold, Fill, and Duotone. This makes it uniquely flexible for design systems that need a single icon family at different visual intensities. The set covers about 1,500 base icons, 9,000+ SVGs across all weights.

Remix Icons offers two weights per icon: Line and Fill. With 3,100+ SVGs in total (about 1,650 distinct icons), Remix covers slightly more distinct subjects than Phosphor, though far fewer files.

Regular weight compared

Phosphor’s style weights

One of Phosphor’s main strengths is the range of visual weights, useful for creating visual hierarchy with a consistent icon family:

Info

Phosphor Duotone adds a second visual layer at 30% opacity, one of the few free icon libraries with this style.

React integration

npm install @phosphor-icons/react
npm install remixicon

// Phosphor, specify weight as prop
import { House } from '@phosphor-icons/react';
<House size={24} />                    // Regular
<House size={24} weight="bold" />      // Bold
<House size={24} weight="duotone" />   // Duotone

// Remix, separate Line/Fill component names
import { RiHomeLine, RiHomeFill } from '@remixicon/react';
<RiHomeLine size={24} />
<RiHomeFill size={24} />

Phosphor’s API is elegantly simple, one component, weight as a prop. Remix requires importing different component names for each weight.

Vue & Svelte support

Phosphor: Official @phosphor-icons/vue package
Remix Icons: CSS/font file; works via Iconify in any framework

Design system suitability

Feature	Phosphor	Remix
Style weights	6 (Thin → Duotone)	2 (Line, Fill)
Base icon count	~1,500	~1,650
Duotone style	✓ (free)	✗
React package	✓	✓
Vue package	✓	via Iconify
License	MIT	Apache 2.0 to v4.8; own license from v4.9

When to choose each

Phosphor: design system with multiple visual weights, duotone style requirement, or when you want a single icon family that adapts to different UI densities
Remix: broad icon coverage with a simpler two-weight system, larger icon catalog

Frequently asked questions

Does Phosphor Icons have a duotone option?

Yes. Phosphor's Duotone weight gives every icon a two-tone appearance with 30% opacity on the secondary element, one of the few free libraries offering this style.

Which has more icons, Phosphor or Remix?

Remix Icons has slightly more unique base icons (about 1,650) than Phosphor (about 1,500). But Phosphor ships 6 weights per icon, so its total SVG count is far higher: 9,000+ vs 3,100+.

Are both MIT licensed?

Phosphor Icons is MIT licensed. Remix Icons is Apache 2.0 up to v4.8.0; v4.9+ uses the Remix Icon License v1.0, which bans logo use. Both are free for commercial use without attribution requirements.

Can I use Phosphor weight variants as CSS classes?

Phosphor's React API uses a weight prop. For CSS-only usage, you can load the Phosphor icon font which supports CSS classes, or use Iconify which handles weight variants as separate icon names.

Share this post

Post