Phosphor Icons

Language: JavaScript

Icons

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.

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.

Installation

npm: npm install phosphor-icons

yarn: yarn add phosphor-icons

cdn: <script src='https://unpkg.com/phosphor-icons'></script>

manual: Download individual icons or the entire package and include them in your project.

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.

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.

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.

Error Handling

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.

Official Docs Github