Tutorial

Phosphor Icons on the Web

A flexible icon family with 6 weights — thin, light, regular, bold, fill, and duotone. Drop in one script and you get 1,200+ icons ready to resize and recolor with CSS.

Step 1

Install Phosphor with one line

The easiest way to add Phosphor to any HTML page is the CDN script. Paste this into your <head> and every weight becomes available. 

<script src="https://unpkg.com/@phosphor-icons/web"></script>

Now use an icon

Every icon is rendered with an <i> tag. The classes follow the pattern ph-[weight] ph-[icon-name]. Regular is the default and uses just ph.

Result
<i class="ph ph-house"></i>
<i class="ph ph-envelope"></i>
<i class="ph ph-gear"></i>
<i class="ph ph-user"></i>
<i class="ph ph-magnifying-glass"></i>
Heads up: Icon names are always kebab-case. So MagnifyingGlass on the website becomes ph-magnifying-glass in your HTML.
Step 2

Thinner to bolder — the 6 weights

Phosphor ships the same icon in six visual weights. Change the class prefix to swap weights. Going from ph-thin → ph-fill is the same icon, just heavier.

Same icon, 6 weights
Thin
Light
Regular
Bold
Fill
Duotone
<!-- lightest to heaviest -->
<i class="ph-thin    ph-star"></i>
<i class="ph-light   ph-star"></i>
<i class="ph         ph-star"></i>  <!-- regular -->
<i class="ph-bold    ph-star"></i>
<i class="ph-fill    ph-star"></i>
<i class="ph-duotone ph-star"></i>
When to use which:
• Thin / Light — elegant, editorial feel, large display sizes
• Regular — default UI work, body text alignment
• Bold — buttons, headings, small sizes where clarity matters
• Fill — "active" or "selected" states (e.g. filled heart = liked)
• Duotone — decorative, marketing, feature sections
Step 3

Sizing with CSS font-size

Phosphor icons are fonts — they inherit the font-size of their parent, just like text. No special size class needed.

Same icon, different sizes
1rem
1.5rem
2rem
3rem
4.5rem
6rem
<i class="ph ph-rocket" style="font-size: 3rem"></i>

/* Or in your stylesheet */
.hero-icon { font-size: 4rem; }
Step 4

Changing colors

Icons inherit color from their parent. Set color on the icon, its wrapper, or a parent — it all just works.

Color via CSS
#ef4444
#f59e0b
#10b981
#3b82f6
#a855f7
#ec4899
/* inline */
<i class="ph-fill ph-heart" style="color: #ef4444"></i>

/* in a stylesheet */
.icon-danger { color: #ef4444; }
.icon-brand  { color: var(--brand); }

/* inherit from parent */
.btn        { color: white; } /* icons inside go white too */

Duotone uses two colors

Duotone icons have a primary path and a secondary (lighter) path. Control them with color and the CSS variable --ph-secondary-color — or use the built-in opacity.

Duotone recoloring
<i class="ph-duotone ph-cloud"
   style="color:#ec4899; --ph-secondary-color:#fbbf24; --ph-secondary-opacity:1;"></i>
Step 5

Putting it together

A few common patterns — icons in buttons, lists, and headings.

Buttons with icons
Feature list
  • Fast, tree-shakeable icon library
  • Six distinct weights for any design
  • MIT licensed — free for any project 
<button class="btn">
  <i class="ph-bold ph-download-simple"></i> Download
</button>
Step 6

Browse available icons

Search this mini library of 90+ popular icons — type to filter, change the weight dropdown, and click any tile to copy its HTML.

Full catalog: 1,200+ icons are available — browse and search them all at phosphoricons.com
Cheat Sheet

Quick reference

<!-- 1. Load once in <head> -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>

<!-- 2. Anywhere in <body> -->
<i class="ph ph-house"></i>

<!-- Weights: thin | light | (blank = regular) | bold | fill | duotone -->
<i class="ph-thin    ph-star"></i>
<i class="ph-light   ph-star"></i>
<i class="ph         ph-star"></i>
<i class="ph-bold    ph-star"></i>
<i class="ph-fill    ph-star"></i>
<i class="ph-duotone ph-star"></i>

/* Size = font-size, color = color */
.icon { font-size: 2rem; color: #10b981; }

/* Duotone secondary layer */
.icon-duo {
  color: hotpink;
  --ph-secondary-color: gold;
  --ph-secondary-opacity: 1;
}