Phosphor Icons (Filled)

Overview

The filled weight variant of Phosphor Icons. All 1,000+ Phosphor icons rendered in a solid, filled style — ideal for active states, selected navigation items, or any scenario where you need strong visual emphasis. Pairs perfectly with Phosphor Regular to indicate active vs. inactive states.

Key Features

• Same 1,000+ icons as Phosphor Regular
• Filled/solid style for strong visual emphasis
• Same package as Phosphor — no extra install
• Perfect for active/selected states
• Pairs naturally with Phosphor outline style
• TypeScript support

Installation

npm install phosphor-react

Usage Example

Basic React usage with Phosphor Icons (Filled)

import { House, MagnifyingGlass, Gear } from 'phosphor-react';

export default function NavItem({ isActive }: { isActive: boolean }) {
  return (
    <div>
      {/* Toggle between outline and fill based on state */}
      <House
        size={24}
        weight={isActive ? 'fill' : 'regular'}
        color={isActive ? '#8b5cf6' : '#6b7280'}
      />
    </div>
  );
}

Best For