Icon Libraries Tutorial · Visual Playground

Section 1

Why Use Icon Libraries?

Icons create visual hierarchy, guide users through interfaces, and make content scannable at a glance. A well-chosen icon communicates meaning faster than text alone, improving both usability and aesthetics.

Icon libraries beat individual image files because they are vector-based (infinitely scalable, always crisp), consistent (same stroke weight, sizing, and style), and easy to customize with CSS — change color, size, or weight with a single property. No Photoshop needed.

Section 2

Quick Comparison Table

Five popular icon libraries side by side. Each has strengths — pick the one that fits your project.

Feature	Font Awesome	Phosphor	Lucide	Heroicons	Feather
Icon count	2,000+	1,200+	1,500+	~300	~280
Weights / Styles	3 (solid, regular, brands)	6 (thin → fill)	1 (adjustable stroke)	3 (outline, solid, mini)	1 (2px stroke)
CSS-only?	Yes	Yes	No (needs JS)	No (inline SVG)	No (needs JS)
File size	Medium	Light	Light	Zero (SVG)	Very light
Best for	Full-featured projects	Modern UI, multiple weights	React / Next.js apps	Tailwind projects	Minimalist designs
License	Free + Pro	MIT	ISC	MIT	MIT
Website	fontawesome.com	phosphoricons.com	lucide.dev	heroicons.com	feathericons.com

Section 3

Font Awesome — Deep Dive

The most popular icon library on the web. Massive selection including brand icons (GitHub, YouTube, Twitter, etc.). Offers free and paid tiers. Works with a single CSS link — no JavaScript needed.

Live Demo

12 Font Awesome Icons

house

user

envelope

phone

star

heart

trash

download

gear

github

youtube

When to use: You need brand logos, a massive icon selection, or a pure CSS-only solution with no JavaScript.

Setup Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Awesome Icons</title>
  <!-- Add to <head>: one CSS link, no JavaScript needed -->
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0a; color: #f5f5f7; margin: 0; padding: 24px;
    }
    .icon-row {
      display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    }
    .icon-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      min-width: 60px; transition: transform .2s;
    }
    .icon-item:hover { transform: translateY(-3px); }
    .icon-item i { font-size: 2.5rem; color: #f5f5f7; }
    .icon-item .lbl {
      font-size: 0.65rem; color: #86868b; text-align: center;
      max-width: 70px; word-wrap: break-word;
    }
    .icon-item.heart-pink i { color: #ff6b9d; }
  </style>
</head>
<body>

  <!-- 12 Font Awesome icons. Usage: <i class="fa-solid fa-house"></i> -->
  <div class="icon-row">
    <div class="icon-item"><i class="fa-solid fa-house"></i><span class="lbl">house</span></div>
    <div class="icon-item"><i class="fa-solid fa-magnifying-glass"></i><span class="lbl">search</span></div>
    <div class="icon-item"><i class="fa-solid fa-user"></i><span class="lbl">user</span></div>
    <div class="icon-item"><i class="fa-solid fa-envelope"></i><span class="lbl">envelope</span></div>
    <div class="icon-item"><i class="fa-solid fa-phone"></i><span class="lbl">phone</span></div>
    <div class="icon-item"><i class="fa-solid fa-star"></i><span class="lbl">star</span></div>
    <div class="icon-item heart-pink"><i class="fa-solid fa-heart"></i><span class="lbl">heart</span></div>
    <div class="icon-item"><i class="fa-solid fa-trash"></i><span class="lbl">trash</span></div>
    <div class="icon-item"><i class="fa-solid fa-download"></i><span class="lbl">download</span></div>
    <div class="icon-item"><i class="fa-solid fa-gear"></i><span class="lbl">gear</span></div>
    <div class="icon-item"><i class="fa-brands fa-github"></i><span class="lbl">github</span></div>
    <div class="icon-item"><i class="fa-brands fa-youtube" style="color:#ff0000;"></i><span class="lbl">youtube</span></div>
  </div>

</body>
</html>

Styles: Solid vs Regular

fa-solid

fa-regular

Sizing with CSS

1rem

1.5rem

2rem

3rem

Coloring with CSS

#6c63ff

#ff79c6

#50fa7b

#f1fa8c

#ff6b6b

Section 4

Phosphor Icons — Deep Dive

A flexible, modern icon set with 6 weights — from thin to fill. Pure CSS, no JavaScript required. Perfect for modern UIs that need visual variety.

Live Demo

12 Phosphor Icons (light weight)

house

user

envelope

phone

star

heart

trash

download

gear

github

rocket

When to use: You want multiple weight options, CSS-only with no JS, and a clean modern look.

Setup Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phosphor Icons</title>
  <!-- Add to <head> (pick one weight or load all). CSS only, no JavaScript -->
  <link rel="stylesheet"
        href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0a; color: #f5f5f7; margin: 0; padding: 24px;
    }
    .icon-row {
      display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    }
    .icon-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      min-width: 60px; transition: transform .2s;
    }
    .icon-item:hover { transform: translateY(-3px); }
    .icon-item i { font-size: 2.5rem; color: #f5f5f7; }
    .icon-item .lbl {
      font-size: 0.65rem; color: #86868b; text-align: center;
      max-width: 70px; word-wrap: break-word;
    }
    .icon-item.heart-pink i { color: #ff6b9d; }
  </style>
</head>
<body>

  <!-- 12 Phosphor icons (light weight). Usage: <i class="ph-light ph-house"></i> -->
  <div class="icon-row">
    <div class="icon-item"><i class="ph-light ph-house"></i><span class="lbl">house</span></div>
    <div class="icon-item"><i class="ph-light ph-magnifying-glass"></i><span class="lbl">search</span></div>
    <div class="icon-item"><i class="ph-light ph-user"></i><span class="lbl">user</span></div>
    <div class="icon-item"><i class="ph-light ph-envelope"></i><span class="lbl">envelope</span></div>
    <div class="icon-item"><i class="ph-light ph-phone"></i><span class="lbl">phone</span></div>
    <div class="icon-item"><i class="ph-light ph-star"></i><span class="lbl">star</span></div>
    <div class="icon-item heart-pink"><i class="ph-light ph-heart"></i><span class="lbl">heart</span></div>
    <div class="icon-item"><i class="ph-light ph-trash"></i><span class="lbl">trash</span></div>
    <div class="icon-item"><i class="ph-light ph-download-simple"></i><span class="lbl">download</span></div>
    <div class="icon-item"><i class="ph-light ph-gear"></i><span class="lbl">gear</span></div>
    <div class="icon-item"><i class="ph-light ph-github-logo"></i><span class="lbl">github</span></div>
    <div class="icon-item"><i class="ph-light ph-rocket-launch"></i><span class="lbl">rocket</span></div>
  </div>

</body>
</html>

All 6 Weights

Same icon (heart) in every weight

ph-thin

ph-light

ph (regular)

ph-bold

ph-fill

ph-duotone

Sizing with CSS

1rem

1.5rem

2rem

3rem

Coloring with CSS

#6c63ff

#ff79c6

#50fa7b

#f1fa8c

#ff6b6b

Section 5

Lucide — Deep Dive

A community-driven fork of Feather Icons with 5x more icons. Requires a small JS initialization call. Very popular in the React and Next.js ecosystem. Clean, consistent stroke style.

Live Demo

12 Lucide Icons

home

user

mail

phone

star

heart

trash-2

download

settings

git-branch

rocket

When to use: Modern JS frameworks (React, Next.js, Vue), need more icons than Feather, tree-shakable imports.

Setup Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lucide Icons</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0a; color: #f5f5f7; margin: 0; padding: 24px;
    }
    .icon-row {
      display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    }
    .icon-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      min-width: 60px; transition: transform .2s;
    }
    .icon-item:hover { transform: translateY(-3px); }
    .icon-item svg { color: #f5f5f7; }
    .icon-item .lbl {
      font-size: 0.65rem; color: #86868b; text-align: center;
      max-width: 70px; word-wrap: break-word;
    }
    .icon-item.heart-pink svg { color: #ff6b9d; }
  </style>
</head>
<body>

  <!-- 12 Lucide icons. Usage: <i data-lucide="home"></i> -->
  <div class="icon-row">
    <div class="icon-item"><i data-lucide="home" style="width:40px;height:40px;"></i><span class="lbl">home</span></div>
    <div class="icon-item"><i data-lucide="search" style="width:40px;height:40px;"></i><span class="lbl">search</span></div>
    <div class="icon-item"><i data-lucide="user" style="width:40px;height:40px;"></i><span class="lbl">user</span></div>
    <div class="icon-item"><i data-lucide="mail" style="width:40px;height:40px;"></i><span class="lbl">mail</span></div>
    <div class="icon-item"><i data-lucide="phone" style="width:40px;height:40px;"></i><span class="lbl">phone</span></div>
    <div class="icon-item"><i data-lucide="star" style="width:40px;height:40px;"></i><span class="lbl">star</span></div>
    <div class="icon-item heart-pink"><i data-lucide="heart" style="width:40px;height:40px;"></i><span class="lbl">heart</span></div>
    <div class="icon-item"><i data-lucide="trash-2" style="width:40px;height:40px;"></i><span class="lbl">trash-2</span></div>
    <div class="icon-item"><i data-lucide="download" style="width:40px;height:40px;"></i><span class="lbl">download</span></div>
    <div class="icon-item"><i data-lucide="settings" style="width:40px;height:40px;"></i><span class="lbl">settings</span></div>
    <div class="icon-item"><i data-lucide="git-branch" style="width:40px;height:40px;"></i><span class="lbl">git-branch</span></div>
    <div class="icon-item"><i data-lucide="rocket" style="width:40px;height:40px;"></i><span class="lbl">rocket</span></div>
  </div>

  <!-- Lucide needs its JS, then a one-time init call -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>
</html>

Adjustable Stroke Width

Same icon, different stroke widths

stroke: 1

stroke: 1.5

stroke: 2

stroke: 3

Section 6

Heroicons — Deep Dive

Built by the Tailwind CSS team. No CDN needed — copy the SVG directly from heroicons.com and paste it into your HTML. Clean and professional.

Live Demo — Outline Style

8 Heroicons (inline SVG, outline)

home

user

envelope

star

heart

cog

bolt

When to use: Tailwind CSS projects, want zero runtime dependencies, need both outline and solid styles.

Setup Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heroicons</title>
  <!-- No CDN needed! Copy each SVG from heroicons.com and paste it in -->
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0a; color: #f5f5f7; margin: 0; padding: 24px;
    }
    .icon-row {
      display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    }
    .icon-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      min-width: 60px; transition: transform .2s;
    }
    .icon-item:hover { transform: translateY(-3px); }
    .icon-item .lbl {
      font-size: 0.65rem; color: #86868b; text-align: center;
      max-width: 70px; word-wrap: break-word;
    }
    /* Outline icons: stroke, no fill */
    .svg-icon {
      width: 40px; height: 40px; color: #f5f5f7;
      stroke: currentColor; fill: none;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    }
    .icon-item.heart-pink .svg-icon { color: #ff6b9d; }
  </style>
</head>
<body>

  <!-- 8 Heroicons (inline SVG, outline) -->
  <div class="icon-row">
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M2.25 12l8.954-8.955a1.126 1.126 0 011.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
      <span class="lbl">home</span>
    </div>
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
      <span class="lbl">search</span>
    </div>
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/></svg>
      <span class="lbl">user</span>
    </div>
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
      <span class="lbl">envelope</span>
    </div>
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/></svg>
      <span class="lbl">star</span>
    </div>
    <div class="icon-item heart-pink">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/></svg>
      <span class="lbl">heart</span>
    </div>
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      <span class="lbl">cog</span>
    </div>
    <div class="icon-item">
      <svg class="svg-icon" viewBox="0 0 24 24"><path d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
      <span class="lbl">bolt</span>
    </div>
  </div>

</body>
</html>

Outline vs Solid

Same icon in outline and solid

Outline

Solid

Section 7

Feather Icons — Deep Dive

The original minimal icon set. ~280 carefully crafted icons with a consistent 2px stroke. Feather is the predecessor to Lucide — if you want more icons in the same style, look at Lucide.

Live Demo

12 Feather Icons

home

user

mail

phone

star

heart

trash-2

download

settings

github

zap

When to use: Minimalist designs, small projects where you need a consistent clean look with a small footprint.

Setup Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feather Icons</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #0a0a0a; color: #f5f5f7; margin: 0; padding: 24px;
    }
    .icon-row {
      display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
    }
    .icon-item {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      min-width: 60px; transition: transform .2s;
    }
    .icon-item:hover { transform: translateY(-3px); }
    .icon-item svg { color: #f5f5f7; }
    .icon-item .lbl {
      font-size: 0.65rem; color: #86868b; text-align: center;
      max-width: 70px; word-wrap: break-word;
    }
    .icon-item.heart-pink svg { color: #ff6b9d; }
  </style>
</head>
<body>

  <!-- 12 Feather icons. Usage: <i data-feather="home"></i> -->
  <div class="icon-row">
    <div class="icon-item"><i data-feather="home" style="width:40px;height:40px;"></i><span class="lbl">home</span></div>
    <div class="icon-item"><i data-feather="search" style="width:40px;height:40px;"></i><span class="lbl">search</span></div>
    <div class="icon-item"><i data-feather="user" style="width:40px;height:40px;"></i><span class="lbl">user</span></div>
    <div class="icon-item"><i data-feather="mail" style="width:40px;height:40px;"></i><span class="lbl">mail</span></div>
    <div class="icon-item"><i data-feather="phone" style="width:40px;height:40px;"></i><span class="lbl">phone</span></div>
    <div class="icon-item"><i data-feather="star" style="width:40px;height:40px;"></i><span class="lbl">star</span></div>
    <div class="icon-item heart-pink"><i data-feather="heart" style="width:40px;height:40px;"></i><span class="lbl">heart</span></div>
    <div class="icon-item"><i data-feather="trash-2" style="width:40px;height:40px;"></i><span class="lbl">trash-2</span></div>
    <div class="icon-item"><i data-feather="download" style="width:40px;height:40px;"></i><span class="lbl">download</span></div>
    <div class="icon-item"><i data-feather="settings" style="width:40px;height:40px;"></i><span class="lbl">settings</span></div>
    <div class="icon-item"><i data-feather="github" style="width:40px;height:40px;"></i><span class="lbl">github</span></div>
    <div class="icon-item"><i data-feather="zap" style="width:40px;height:40px;"></i><span class="lbl">zap</span></div>
  </div>

  <!-- Feather needs its JS, then a one-time replace() call -->
  <script src="https://unpkg.com/feather-icons"></script>
  <script>
    feather.replace();
  </script>
</body>
</html>

Section 8

When to Use What? — Decision Guide

Answer the question on the left and follow the arrow to the recommended library.

Need brand icons (GitHub, YouTube, Twitter)? → Font Awesome
Want CSS-only, no JavaScript at all? → Font Awesome or Phosphor
Need multiple icon weights (thin → bold → fill)? → Phosphor
Building with React or Next.js? → Lucide
Using Tailwind CSS? → Heroicons
Want the most minimal, clean look? → Feather
Need the largest icon selection? → Lucide or Font Awesome
Want zero dependencies (just SVG)? → Heroicons

Section 9

Mixing Libraries

It is completely fine to use more than one icon library in a single project. A common pattern is to use Font Awesome for brand icons (GitHub, YouTube, LinkedIn) alongside Phosphor or Lucide for UI icons (navigation, actions, status).

Performance tip: Each library adds CSS or JS weight to your page. If you only need a handful of icons from a second library, consider copying the individual SVGs instead of loading the entire library. Heroicons is great for this — just grab the SVG code you need with zero overhead.

Mixed: Font Awesome brands + Phosphor UI

FA github

FA youtube

FA x-twitter

FA linkedin

PH house

PH gear

PH bell

PH chat

Mixed Libraries — Copy-Paste Snippet

HTML

<!-- In <head>: load BOTH Font Awesome and Phosphor -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet"
      href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css">

<!-- In <body>: brand icons from FA, UI icons from Phosphor -->
<div class="icon-row">
  <i class="fa-brands fa-github"></i>
  <i class="fa-brands fa-youtube" style="color:#ff0000;"></i>
  <i class="fa-brands fa-linkedin" style="color:#0a66c2;"></i>
  <i class="ph-light ph-house" style="color:#6c63ff;"></i>
  <i class="ph-light ph-bell" style="color:#6c63ff;"></i>
  <i class="ph-light ph-gear" style="color:#6c63ff;"></i>
</div>

CSS

body { background: #0a0a0a; color: #f5f5f7; font-family: sans-serif; padding: 24px; }
.icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  font-size: 2rem; /* icons inherit from font-size */
  color: #f5f5f7;
}

Patterns

Useful Icon Patterns

Three small, copy-paste-ready building blocks that combine icons with text. Each one stands on its own — the HTML plus the CSS reproduces the demo in a fresh blank file.

Pattern 1 — Icon Feature List

Vertical list with leading icon + label

CSS-only icon libraries load fast and need zero JavaScript.
Inline SVG gives you full control over color, size, and stroke.
You can mix multiple libraries in one project without conflict.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Icon List</title>
  <link rel="stylesheet"
        href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css">
  <style>
    body { background: #0a0a0a; color: #f5f5f7; font-family: sans-serif; padding: 32px; }
    .icon-list { list-style: none; padding: 0; margin: 0; max-width: 480px; }
    .icon-list li {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 10px 0;
      font-size: 0.95rem;
      color: #cccccc;
    }
    .icon-list li i { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
  </style>
</head>
<body>
  <ul class="icon-list">
    <li><i class="ph-light ph-check-circle" style="color:#10b981;"></i><span>CSS-only icon libraries load fast and need zero JavaScript.</span></li>
    <li><i class="ph-light ph-check-circle" style="color:#10b981;"></i><span>Inline SVG gives you full control over color, size, and stroke.</span></li>
    <li><i class="ph-light ph-check-circle" style="color:#10b981;"></i><span>You can mix multiple libraries in one project without conflict.</span></li>
  </ul>
</body>
</html>

CSS (just the list rules, if dropping into an existing page)

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 480px;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.95rem;
  color: #cccccc;
}
.icon-list li i {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 1px;
}

Pattern 2 — Icon Button

Button with leading icon + label

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Icon Buttons</title>
  <link rel="stylesheet"
        href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css">
  <style>
    body { background: #0a0a0a; color: #f5f5f7; font-family: sans-serif; padding: 32px; }
    .icon-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 18px;
      font-size: 0.92rem; font-weight: 600;
      background: #6c63ff; color: #ffffff;
      border: 1px solid #6c63ff;
      border-radius: 10px;
      cursor: pointer;
      transition: background .15s, transform .15s;
    }
    .icon-btn:hover { background: #5851e6; transform: translateY(-1px); }
    .icon-btn i { font-size: 1rem; }
    .icon-btn-ghost {
      background: transparent;
      color: #6c63ff;
      border-color: rgba(108,99,255,.4);
    }
    .icon-btn-ghost:hover { background: rgba(108,99,255,.08); }
    .icon-btn-danger {
      background: #ef4444;
      border-color: #ef4444;
    }
    .icon-btn-danger:hover { background: #dc2626; }
  </style>
</head>
<body>
  <button class="icon-btn"><i class="ph-bold ph-download-simple"></i>Download</button>
  <button class="icon-btn icon-btn-ghost"><i class="ph-bold ph-arrow-up-right"></i>Open in tab</button>
  <button class="icon-btn icon-btn-danger"><i class="ph-bold ph-trash"></i>Delete</button>
</body>
</html>

CSS (just the button rules)

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  background: #6c63ff;
  color: #ffffff;
  border: 1px solid #6c63ff;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.icon-btn:hover {
  background: #5851e6;
  transform: translateY(-1px);
}
.icon-btn i { font-size: 1rem; }

.icon-btn-ghost {
  background: transparent;
  color: #6c63ff;
  border-color: rgba(108,99,255,.4);
}
.icon-btn-ghost:hover { background: rgba(108,99,255,.08); }

.icon-btn-danger {
  background: #ef4444;
  border-color: #ef4444;
}
.icon-btn-danger:hover { background: #dc2626; }

Pattern 3 — Feature Row Grid

Three-column grid: icon + heading + body

Fast to load

Icon fonts are tiny and cache-friendly, so pages stay snappy even on slow networks.

Easy to style

Icons inherit color and size from CSS, so theming them takes one variable.

Accessible

Pair every decorative icon with a text label so screen readers describe the action.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Feature Row</title>
  <link rel="stylesheet"
        href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css">
  <style>
    body { background: #0a0a0a; color: #f5f5f7; font-family: sans-serif; padding: 32px; }
    .feature-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      max-width: 960px;
    }
    .feature {
      background: #111111;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 14px;
      padding: 22px;
    }
    .feature-ico {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 12px;
    }
    .feature h4 { font-size: 1rem; margin: 0 0 6px; color: #f5f5f7; }
    .feature p  { font-size: 0.86rem; color: #86868b; line-height: 1.6; margin: 0; }
  </style>
</head>
<body>
  <div class="feature-row">
    <div class="feature">
      <div class="feature-ico" style="background:rgba(108,99,255,.14);color:#6c63ff;"><i class="ph-light ph-lightning"></i></div>
      <h4>Fast to load</h4>
      <p>Icon fonts are tiny and cache-friendly, so pages stay snappy even on slow networks.</p>
    </div>
    <div class="feature">
      <div class="feature-ico" style="background:rgba(255,107,157,.16);color:#ff6b9d;"><i class="ph-light ph-heart"></i></div>
      <h4>Easy to style</h4>
      <p>Icons inherit color and size from CSS, so theming them takes one variable.</p>
    </div>
    <div class="feature">
      <div class="feature-ico" style="background:rgba(16,185,129,.14);color:#10b981;"><i class="ph-light ph-shield-check"></i></div>
      <h4>Accessible</h4>
      <p>Pair every decorative icon with a text label so screen readers describe the action.</p>
    </div>
  </div>
</body>
</html>

CSS (just the feature-row rules)

.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 960px;
}
.feature {
  background: #111111;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 22px;
}
.feature-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.feature h4 { font-size: 1rem; margin: 0 0 6px; color: #f5f5f7; }
.feature p  { font-size: 0.86rem; color: #86868b; line-height: 1.6; margin: 0; }

Section 10

Full Page — Put It All Together

Here is everything combined into one complete, copy-pasteable HTML file: a small product dashboard whose sidebar, top bar, and stat cards are built entirely from icon libraries. It loads Font Awesome and Phosphor via CDN (CSS-only), plus Lucide via its tiny JS init — exactly the mix-and-match approach from above. Copy it into a new .html file and open it in a browser; the live preview is rendered from the very same code.

Live preview

Complete HTML — copy this whole file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Dashboard</title>

  <!-- Font Awesome (CSS only) -->
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <!-- Phosphor Icons, light weight (CSS only) -->
  <link rel="stylesheet"
        href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css">

  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f4f5fb; color: #1f2433; display: flex; min-height: 100vh;
    }

    /* ===== Sidebar (Phosphor icons) ===== */
    .sidebar {
      width: 220px; background: #14141b; color: #e5e7eb;
      padding: 22px 14px; display: flex; flex-direction: column; gap: 4px;
    }
    .sidebar .brand {
      display: flex; align-items: center; gap: 10px;
      font-weight: 800; font-size: 1.15rem; color: #fff; padding: 6px 10px 18px;
    }
    .sidebar .brand i { color: #6c63ff; font-size: 1.5rem; }
    .sidebar a {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px; border-radius: 9px; color: #cbd5e1;
      text-decoration: none; font-size: .92rem; transition: background .15s, color .15s;
    }
    .sidebar a i { font-size: 1.25rem; width: 22px; text-align: center; }
    .sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
    .sidebar a.active { background: #6c63ff; color: #fff; }

    /* ===== Main column ===== */
    .main { flex: 1; display: flex; flex-direction: column; }

    /* Top bar (Font Awesome icons) */
    .topbar {
      display: flex; align-items: center; justify-content: space-between;
      background: #fff; padding: 14px 26px; border-bottom: 1px solid #e6e8f0;
    }
    .topbar .search {
      display: flex; align-items: center; gap: 10px;
      background: #f1f2f8; border-radius: 9px; padding: 9px 14px;
      color: #6b7280; flex: 1; max-width: 360px;
    }
    .topbar .search input { border: none; background: none; outline: none; flex: 1; font-size: .9rem; }
    .topbar .actions { display: flex; align-items: center; gap: 20px; color: #4b5563; }
    .topbar .actions i { font-size: 1.15rem; cursor: pointer; transition: color .15s; }
    .topbar .actions i:hover { color: #6c63ff; }
    .topbar .avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: #6c63ff; color: #fff; display: flex;
      align-items: center; justify-content: center; font-size: 1rem;
    }

    /* Content + stat cards (Lucide icons) */
    .content { padding: 28px 26px; }
    .content h1 { font-size: 1.5rem; margin-bottom: 4px; }
    .content .lead { color: #6b7280; font-size: .92rem; margin-bottom: 22px; }
    .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
    .stat-card {
      background: #fff; border: 1px solid #e6e8f0; border-radius: 14px; padding: 20px;
      display: flex; align-items: center; gap: 16px;
    }
    .stat-card .ico {
      width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(108,99,255,.12); color: #6c63ff;
    }
    .stat-card .ico i { width: 24px; height: 24px; }
    .stat-card.green .ico { background: rgba(16,185,129,.14); color: #10b981; }
    .stat-card.pink  .ico { background: rgba(255,107,157,.16); color: #ff6b9d; }
    .stat-card.amber .ico { background: rgba(245,158,11,.15); color: #f59e0b; }
    .stat-card .num { font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
    .stat-card .cap { font-size: .8rem; color: #6b7280; }

    @media (max-width: 640px) {
      body { flex-direction: column; }
      .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 2px; }
      .sidebar .brand { width: 100%; padding-bottom: 8px; }
    }
  </style>
</head>
<body>

  <!-- Sidebar uses Phosphor (ph-light) icons -->
  <aside class="sidebar">
    <div class="brand"><i class="ph-light ph-diamond"></i>Nimbus</div>
    <a href="#" class="active"><i class="ph-light ph-house"></i>Dashboard</a>
    <a href="#"><i class="ph-light ph-chart-line"></i>Analytics</a>
    <a href="#"><i class="ph-light ph-users-three"></i>Customers</a>
    <a href="#"><i class="ph-light ph-shopping-cart"></i>Orders</a>
    <a href="#"><i class="ph-light ph-gear"></i>Settings</a>
  </aside>

  <div class="main">

    <!-- Top bar uses Font Awesome (fa-solid) icons -->
    <header class="topbar">
      <label class="search">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" placeholder="Search...">
      </label>
      <div class="actions">
        <i class="fa-solid fa-bell" title="Notifications"></i>
        <i class="fa-solid fa-envelope" title="Messages"></i>
        <i class="fa-solid fa-gear" title="Settings"></i>
        <div class="avatar"><i class="fa-solid fa-user"></i></div>
      </div>
    </header>

    <!-- Stat cards use Lucide icons (data-lucide) -->
    <main class="content">
      <h1>Good morning, Dr. G</h1>
      <p class="lead">Here is how your store is doing today.</p>
      <section class="stats">
        <div class="stat-card">
          <div class="ico"><i data-lucide="dollar-sign"></i></div>
          <div><div class="num">$12,480</div><div class="cap">Revenue</div></div>
        </div>
        <div class="stat-card green">
          <div class="ico"><i data-lucide="shopping-bag"></i></div>
          <div><div class="num">328</div><div class="cap">Orders</div></div>
        </div>
        <div class="stat-card pink">
          <div class="ico"><i data-lucide="heart"></i></div>
          <div><div class="num">1,204</div><div class="cap">Favorites</div></div>
        </div>
        <div class="stat-card amber">
          <div class="ico"><i data-lucide="star"></i></div>
          <div><div class="num">4.8</div><div class="cap">Avg. rating</div></div>
        </div>
      </section>
    </main>

  </div>

  <!-- Lucide needs a tiny JS init call -->
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>
</html>

What you are seeing: the live preview above is generated from the exact code in the box — so what you copy is precisely what renders. Three libraries, one page: Phosphor in the sidebar, Font Awesome in the top bar, Lucide in the stat cards.