Skip to content

Phosphor Icons

UI & GraphicsIconsJavaScript
Official docs ↗GitHub ↗

What it is

Phosphor is a flexible and versatile icon library for web and mobile projects. It offers a wide range of customizable icons in multiple weights, styles, and formats, suitable for React, Vue, or plain HTML usage.

Phosphor icons can be used as React/Vue components or as plain SVG elements. You can customize size, weight, color, and other properties either via props or CSS.

Installation

npm install phosphor-icons

Getting started

The smallest useful thing you can do with it, and what each part means.

Using a React icon
import { Heart } from 'phosphor-react';

function App() {
  return <Heart size={32} color='red' weight='fill' />;
}
Renders a filled heart icon in React with a size of 32 pixels and red color.
Using inline SVG
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='currentColor' viewBox='0 0 256 256'>
  <path d='M128 232s-90-48-90-136c0-55 45-100 100-100s100 45 100 100c0 88-90 136-90 136z'/>
</svg>
Uses a Phosphor icon as an inline SVG element that can be styled with CSS.

Advanced usage

Where the library earns its place over a simpler alternative.

Multiple weights
<Heart size={32} weight='thin' />
<Heart size={32} weight='light' />
<Heart size={32} weight='bold' />
Demonstrates different icon weights (thin, light, bold) for design flexibility.
Custom color and hover effect
<Heart size={32} color='gray' className='hover:text-red-500 transition-colors' />
Applies Tailwind CSS classes for hover color change and smooth transitions.
Stacked icons
<div className='relative'>
  <Star size={32} color='yellow' />
  <Star size={16} color='white' className='absolute top-0 left-0' />
</div>
Combines multiple Phosphor icons in a stacked layout for complex UI designs.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Icon not displayed
Ensure the icon component or SVG path is correctly imported and rendered.
Incorrect size or weight
Verify the `size` and `weight` props or SVG attributes are properly applied.
Bundle too large
Import only individual icons rather than the entire Phosphor package.

Best practices

  • Import only the icons you need to minimize bundle size.
  • Use consistent weight and size across your UI for visual harmony.
  • Combine with CSS or Tailwind utilities for interactive effects.
  • Prefer React/Vue components for easier integration and props control.
  • Leverage inline SVGs for advanced styling or animation needs.

Background

Why it exists, and what it was reacting to.

Phosphor was created to provide developers with a modern, lightweight, and highly adaptable icon library. It emphasizes scalability, accessibility, and design consistency, making it easy to integrate into various UI frameworks.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide