Phosphor Icons Tutorial · Visual Playground

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- One line loads all 6 weights -->
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    body { background: #0a0a0a; margin: 0; padding: 24px; }
    .row { font-size: 2rem; display: flex; gap: 20px; color: #10b981; }
  </style>
</head>
<body>
  <div class="row">
    <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>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    body { background: #0a0a0a; margin: 0; padding: 24px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .weights {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px;
    }
    .weight-card {
      background: #0a0a0a; border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px; padding: 22px 12px; text-align: center;
    }
    .weight-card i { font-size: 2.6rem; color: #f5f5f7; display: block; margin-bottom: 10px; }
    .weight-card .name {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: #a1a1aa;
    }
  </style>
</head>
<body>
  <!-- Same icon, 6 weights: lightest to heaviest -->
  <div class="weights">
    <div class="weight-card"><i class="ph-thin ph-star"></i><div class="name">Thin</div></div>
    <div class="weight-card"><i class="ph-light ph-star"></i><div class="name">Light</div></div>
    <div class="weight-card"><i class="ph ph-star"></i><div class="name">Regular</div></div>
    <div class="weight-card"><i class="ph-bold ph-star"></i><div class="name">Bold</div></div>
    <div class="weight-card"><i class="ph-fill ph-star"></i><div class="name">Fill</div></div>
    <div class="weight-card"><i class="ph-duotone ph-star"></i><div class="name">Duotone</div></div>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    body { background: #0a0a0a; margin: 0; padding: 24px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .sizes { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
    .sizes div { text-align: center; }
    .sizes i { color: #3b82f6; display: block; margin-bottom: 8px; }
    .sizes .tag { font-size: 0.7rem; font-weight: 600; color: #71717a;
      font-family: 'SF Mono', Menlo, monospace; }
  </style>
</head>
<body>
  <!-- Same icon, different sizes via font-size -->
  <div class="sizes">
    <div><i class="ph ph-rocket" style="font-size: 1rem"></i><div class="tag">1rem</div></div>
    <div><i class="ph ph-rocket" style="font-size: 1.5rem"></i><div class="tag">1.5rem</div></div>
    <div><i class="ph ph-rocket" style="font-size: 2rem"></i><div class="tag">2rem</div></div>
    <div><i class="ph ph-rocket" style="font-size: 3rem"></i><div class="tag">3rem</div></div>
    <div><i class="ph ph-rocket" style="font-size: 4.5rem"></i><div class="tag">4.5rem</div></div>
    <div><i class="ph ph-rocket" style="font-size: 6rem"></i><div class="tag">6rem</div></div>
  </div>
</body>
</html>

/* Or set size in your stylesheet instead of inline */
.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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    :root { --brand: #10b981; }
    body { background: #0a0a0a; margin: 0; padding: 24px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .colors {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px;
    }
    .color-card {
      background: #0a0a0a; border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px; padding: 20px 10px; text-align: center;
    }
    .color-card i { font-size: 2rem; display: block; margin-bottom: 8px; }
    .color-card .hex { font-size: 0.7rem; font-family: 'SF Mono', Menlo, monospace; color: #a1a1aa; }
  </style>
</head>
<body>
  <!-- Color via CSS — set color on each icon inline -->
  <div class="colors">
    <div class="color-card"><i class="ph-fill ph-heart" style="color:#ef4444"></i><div class="hex">#ef4444</div></div>
    <div class="color-card"><i class="ph-fill ph-heart" style="color:#f59e0b"></i><div class="hex">#f59e0b</div></div>
    <div class="color-card"><i class="ph-fill ph-heart" style="color:#10b981"></i><div class="hex">#10b981</div></div>
    <div class="color-card"><i class="ph-fill ph-heart" style="color:#3b82f6"></i><div class="hex">#3b82f6</div></div>
    <div class="color-card"><i class="ph-fill ph-heart" style="color:#a855f7"></i><div class="hex">#a855f7</div></div>
    <div class="color-card"><i class="ph-fill ph-heart" style="color:#ec4899"></i><div class="hex">#ec4899</div></div>
  </div>
</body>
</html>

/* Other ways to set color in a stylesheet: */
.icon-danger { color: #ef4444; }
.icon-brand  { color: var(--brand); } /* --brand defined on :root above */

/* Icons also inherit color from a 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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    body { background: #0a0a0a; margin: 0; padding: 24px; }
    .duo-row { display: flex; gap: 28px; font-size: 3rem; flex-wrap: wrap; }
  </style>
</head>
<body>
  <!-- Duotone recoloring: primary = color, secondary = --ph-secondary-color / --ph-secondary-opacity -->
  <div class="duo-row">
    <i class="ph-duotone ph-cloud" style="color:#3b82f6"></i>
    <i class="ph-duotone ph-cloud" style="color:#10b981; --ph-secondary-opacity:.35;"></i>
    <i class="ph-duotone ph-cloud" style="color:#ec4899; --ph-secondary-color:#fbbf24; --ph-secondary-opacity:1;"></i>
    <i class="ph-duotone ph-cloud" style="color:#a855f7; --ph-secondary-color:#10b981; --ph-secondary-opacity:1;"></i>
  </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    body { background: #0a0a0a; color: #f5f5f7; margin: 0; padding: 24px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: #10b981; color: #0a0a0a; font-weight: 700;
      padding: 10px 18px; border-radius: 8px; border: none;
      font-size: 0.95rem; cursor: pointer; font-family: inherit;
      margin: 6px 8px 6px 0;
    }
    .btn.outline { background: transparent; color: #10b981; border: 1px solid #10b981; }
    .btn.danger { background: #ef4444; color: #fff; }
  </style>
</head>
<body>
  <!-- Buttons with icons -->
  <button class="btn"><i class="ph-bold ph-download-simple"></i> Download</button>
  <button class="btn outline"><i class="ph-bold ph-github-logo"></i> View on GitHub</button>
  <button class="btn danger"><i class="ph-fill ph-trash"></i> Delete</button>

  <!-- Feature list -->
  <ul style="list-style:none; display:grid; gap:12px; padding:0; margin-top:20px;">
    <li style="display:flex; gap:12px; align-items:center;">
      <i class="ph-duotone ph-lightning" style="font-size:1.5rem; color:#f59e0b;"></i>
      <span>Fast, tree-shakeable icon library</span>
    </li>
    <li style="display:flex; gap:12px; align-items:center;">
      <i class="ph-duotone ph-paint-brush-broad" style="font-size:1.5rem; color:#a855f7;"></i>
      <span>Six distinct weights for any design</span>
    </li>
    <li style="display:flex; gap:12px; align-items:center;">
      <i class="ph-duotone ph-shield-check" style="font-size:1.5rem; color:#10b981;"></i>
      <span>MIT licensed — free for any project</span>
    </li>
  </ul>
</body>
</html>

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

Phosphor Icons on the Web

Install Phosphor with one line

Now use an icon

Thinner to bolder — the 6 weights

Sizing with CSS font-size

Changing colors

Duotone uses two colors

Putting it together

Browse available icons

Quick reference

Sizing with CSS `font-size`