Phosphor Icons (Filled)

Overview

Phosphor Fill is the weight="fill" style of Phosphor Icons. The unusual part is coverage: all 1,512 Phosphor icons have a fill version, which is rare among free libraries. The fill shapes are drawn separately rather than painted inside the outline. Details such as a house’s door or a gear’s hub are cut out of the solid shape so the icon stays readable. Icony lists it as its own library so you can browse and export solid icons directly.

At a Glance

Version examined

@phosphor-icons/react 2.1.10

Icons with a fill weight

1,512 of 1,512

Icons available in Icony

1,512

Canvas

256×256 viewBox

How to select it

weight="fill"

Rendered House SVG (fill)

324 bytes (224 gzipped) vs. 387 for regular

Rendered Gear SVG (fill)

1,024 bytes vs. 2,008 for regular

License

MIT

How the fill shapes are drawn

Compare the regular and fill markup for House. Regular is one path made of an outer contour and an inner contour, and the gap between them is the “line”. Fill is a single contour describing the silhouette, with the door notched out (V164a4,4,0,0,0-4-4H108a4,4…).

Gear follows the same pattern. The fill version is the silhouette with a circular hole for the hub, and its path is about half as long as the regular one (1,024 vs. 2,008 rendered bytes).

Because details are cut out rather than drawn as lines, fill icons stay legible at sizes where thin lines start to disappear, and they hold up on saturated button backgrounds. The cost is simpler interior detail. Icons whose meaning depends on inner strokes (a document with text lines, a detailed chart) say less in fill form.

When solid icons are the right call

• Selected state in tab bars and sidebars. Switching regular → fill is a strong, familiar signal, and because every Phosphor weight shares the same 256×256 box, the icon does not shift when it changes.
• Icons on filled buttons, chips and badges, where a thin outline would look weak against the background color.
• Small sizes (16px and below) in low-contrast themes.
• Toggle icons such as favorite, bookmark or pin, where filled means “on”.

When not to use the fill style

• As the only style for a whole interface. Large areas of solid icons feel heavy, and without an outline counterpart you lose the easy way to show state.
• For icons that rely on internal detail, such as maps, charts and documents. Outline weights show more there.
• When icon style is the only sign of state. Filled versus outline is a visual cue, so also set aria-current, aria-pressed or text for assistive technology.

Phosphor Fill vs. other solid sets

Heroicons Solid is the closest alternative: 324 icons on a 24×24 grid with names matching its outline set, plus separately drawn 20px and 16px solid sets. It is smaller but very polished.

Tabler has 1,001 filled icons alongside 4,985 outline ones, so only some outline icons have a solid partner. Bootstrap Icons has 670 …Fill variants out of 2,078 components. Phosphor and Heroicons are the two where every icon has a solid form, and Phosphor has about four times as many, so it is the safest choice if your design depends on outline/solid pairs across a large catalog.

Phosphor Fill also looks a little lighter than Heroicons Solid because of its larger corner radii. If you combine them, compare them side by side at your target size.

Usage notes

• Nothing extra to install. Fill is a weight of the same @phosphor-icons/react components.
• Set weight="fill" per icon, or once with IconContext.Provider in client components. In server components, import from @phosphor-icons/react/ssr and pass weight directly.
• Stroke settings don’t apply. In Icony, the stroke slider has no effect on this library, because the renderer forces weight="fill" whatever the slider says.
• Color the icon with color or CSS color; the fill uses currentColor.

License: same package, same terms

The fill style has no separate license. weight="fill" comes from the same MIT-licensed Phosphor package, so the same terms as the regular weight apply. Commercial use, modification and redistribution are allowed as long as the license notice stays with your source.

Key Features

• Fill version exists for all 1,512 icons (checked in the package)
• Solid shapes redrawn with cut-out details
• Same component as the outline; switch with weight
• Identical bounding box across weights, so no layout shift
• Often a smaller SVG than the outline version
• MIT license, same package as Phosphor

Installation

npm install @phosphor-icons/react

Usage Example

Basic React usage with Phosphor Icons (Filled)

'use client';
import { House, Bell, User } from '@phosphor-icons/react';
import Link from 'next/link';

const items = [
  { href: '/', label: 'Home', Icon: House },
  { href: '/alerts', label: 'Alerts', Icon: Bell },
  { href: '/me', label: 'Profile', Icon: User },
];

export function TabBar({ pathname }: { pathname: string }) {
  return (
    <nav className="flex justify-around">
      {items.map(({ href, label, Icon }) => {
        const active = pathname === href;
        return (
          <Link key={href} href={href} aria-current={active ? 'page' : undefined}>
            {/* Same component, same box — only the weight changes */}
            <Icon size={24} weight={active ? 'fill' : 'regular'} aria-hidden="true" />
            <span>{label}</span>
          </Link>
        );
      })}
    </nav>
  );
}

Best For

Common Questions