Phosphor Icons

Browse 9072 free Phosphor SVG icons. Download SVG, copy as JSX, PNG or Base64. MIT licensed. Designed by Phosphor Icons. Styles: Has Padding.

9,072 icons MIT UI Other / Mixed Grid 24px grid by Phosphor Icons

Search icons...

More SVG Icons

acorn

acorn-bold

acorn-duotone

acorn-fill

acorn-light

acorn-thin

address-book

address-book-bold

address-book-duotone

address-book-fill

address-book-light

address-book-tabs

address-book-tabs-bold

address-book-tabs-duotone

address-book-tabs-fill

address-book-tabs-light

address-book-tabs-thin

address-book-thin

air-traffic-control

air-traffic-control-bold

air-traffic-control-duotone

air-traffic-control-fill

air-traffic-control-light

air-traffic-control-thin

airplane

airplane-bold

airplane-duotone

airplane-fill

airplane-in-flight

airplane-in-flight-bold

airplane-in-flight-duotone

airplane-in-flight-fill

airplane-in-flight-light

airplane-in-flight-thin

airplane-landing

airplane-landing-bold

airplane-landing-duotone

airplane-landing-fill

airplane-landing-light

airplane-landing-thin

airplane-light

airplane-takeoff

airplane-takeoff-bold

airplane-takeoff-duotone

airplane-takeoff-fill

airplane-takeoff-light

airplane-takeoff-thin

airplane-taxiing

airplane-taxiing-bold

airplane-taxiing-duotone

airplane-taxiing-fill

airplane-taxiing-light

airplane-taxiing-thin

airplane-thin

airplane-tilt

airplane-tilt-bold

airplane-tilt-duotone

airplane-tilt-fill

airplane-tilt-light

airplane-tilt-thin

airplay

airplay-bold

airplay-duotone

airplay-fill

airplay-light

airplay-thin

alarm

alarm-bold

alarm-duotone

alarm-fill

alarm-light

alarm-thin

Copy & download Phosphor icons

Click any icon above to open the detail panel. Four export formats are available instantly, no sign-up required.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

Inline data URI, embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.

Works with shadcn/ui

Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install @phosphor-icons/react and use via @iconify/react, fully tree-shakeable, no icon font loading required.

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.

Created By

Phosphor Icons Visit Website

License

MIT View License

Features & Tags

Has Padding

Pack Details

Version

2.1.1

v2.1.1

Color Support

Monochrome

How to use Phosphor icons

Icon Set Version

v2.1.1

Package

@phosphor-icons/react, @phosphor-icons/vue

License SPDX

MIT

Grid Size

24px

Sample Icons

folder-open-duotone, check-square-offset-thin, pencil-line-fill

Install

bash

npm install @phosphor-icons/react

React

tsx

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" />;
}

Vue

vue

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

Via Iconify · HTML

html

<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>

Via Iconify · any framework

tsx

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

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

Package stats

Build-time npm metadata cached weekly • Last refresh Aug 13, 2026

@phosphor-icons/react

A clean and friendly icon family for React

v2.1.10

License

MIT

Weekly downloads

Monthly downloads

11.3M

Total downloads

69M

Unpacked size

31 MB

Last published

May 22, 2025

Registry updated

May 22, 2025

npm Repository Homepage

@phosphor-icons/vue

A clean and friendly icon family for Vue, too!

v2.2.1

License

MIT

Weekly downloads

78,357

Monthly downloads

290.7K

Total downloads

2.2M

Unpacked size

15 MB

Last published

Apr 5, 2024

Registry updated

Apr 5, 2024

npm Repository Homepage

Phosphor version history

Phosphor has not published a new npm release in over a year. The latest version, v2.1.10, was released on May 22, 2025.

Version	Released
v2.1.10	May 22, 2025
v2.1.9	May 22, 2025
v2.1.8	May 16, 2025
v2.1.7	Jun 29, 2024
v2.1.6	Jun 11, 2024
v2.1.5	Apr 18, 2024
v2.1.4	Mar 29, 2024
v2.0.15	Nov 23, 2023
v2.0.14	Oct 31, 2023
v2.0.13	Sep 19, 2023
v2.0.12	Sep 19, 2023
v2.0.11	Sep 19, 2023
v2.1.3	Sep 15, 2023
v2.1.2	Sep 14, 2023
v2.1.1	Sep 14, 2023
v2.1.0	Sep 14, 2023
v2.0.10	Jun 13, 2023
v2.0.9	Apr 26, 2023
v2.0.8	Apr 2, 2023
v2.0.7	Apr 2, 2023

Source: npm registry data for @phosphor-icons/react, refreshed weekly.

Compare Phosphor with similar icon packs

Lucide Tabler Icons Solar Icons

Frequently Asked Questions

What makes Phosphor Icons different from other icon sets?

Phosphor provides six weights (Thin, Light, Regular, Bold, Fill, Duotone) for every icon, ideal for design systems that need consistent iconography across different states, sizes, and emphasis levels.

How do I use Phosphor Icons in React?

Install npm install @phosphor-icons/react, then: import { Heart } from "@phosphor-icons/react";. Set the weight: <Heart weight="fill" />.

Does Phosphor support Vue and other frameworks?

Yes. Official packages exist for React, Vue, Svelte, Angular, Flutter, and Elm. Raw SVGs can also be copied here for any framework.

How many icons are in Phosphor?

Phosphor contains 9,072 SVG icons in the UI Other / Mixed Grid category, designed on a 24px grid.

How often is Phosphor updated?

Phosphor has not published a new npm release in over a year. The latest version, v2.1.10, was released on May 22, 2025. See the full version history below.