Phosphor

About Phosphor

Phosphor Icons is a flexible open-source SVG icon family providing six visual weights — Thin, Light, Regular, Bold, Fill, and Duotone — for every icon in its 1,400+ icon catalog. This makes Phosphor uniquely capable in the free icon space: a single icon system that covers all semantic weight states a design system might need — outlined for inactive, filled for active, bold for emphasis, duotone for decorative. With 1,400+ icon names each available in six weights, the effective library spans over 8,000 unique SVG files. MIT licensed and available for React (@phosphor-icons/react), Vue, Svelte, Angular, Flutter, and Elm. Search Phosphor SVG icons, copy code, export JSX, or download PNG — all free. Compared with Lucide and Heroicons (outline-only), Phosphor's multi-weight system is superior for design systems where icons carry semantic state. The Duotone variant adds depth ideal for landing page illustrations and feature section icons.

How to use Phosphor icons

npm install @phosphor-icons/react

import { MagnifyingGlass, Heart, Star } from '@phosphor-icons/react';

export default function App() {
  // weight: "thin" | "light" | "regular" | "bold" | "fill" | "duotone"
  return <MagnifyingGlass size={24} weight="regular" />;
}

<script setup>
import { PhMagnifyingGlass } from '@phosphor-icons/vue';
</script>
<template>
  <PhMagnifyingGlass :size="24" weight="regular" />
</template>

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="ph:icon-name" width="24"></iconify-icon>

import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="ph:icon-name" width={24} />;
}

Compare Phosphor with similar icon packs