Phosphor Icons in Your Project

How to Use Phosphor Icons in Your Project (Step-by-Step)

by

Icons are a great way to improve the visual appeal and usability of your website or app. One of the most flexible and beautiful icon libraries available today is Phosphor Icons.

In this beginner-friendly tutorial, you’ll learn how to use Phosphor Icons in your HTML project step by step — no frameworks or advanced setup needed.

👁️ Preview

🧠 What Is Phosphor Icons?

Phosphor is an open-source icon library designed for flexibility and consistency. It offers:

  • Multiple styles (regular, bold, fill, duotone, etc.)
  • SVG support
  • Easy integration with plain HTML, React, Vue, and more

In this tutorial, we’ll use Phosphor Icons via CDN, so you can start quickly.

🧱 Step 1: Include the Phosphor CDN in Your HTML

Add the following <script> tag in your HTML <head> to load the icon set:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Using Phosphor Icons</title>

  <!-- Phosphor Icons CDN -->
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>

✅ This script gives you access to all icons via the <i> tag with the ph class.

🎨 Step 2: Add an Icon to Your Page

Now, you can place any icon by using a simple tag like this:

<i class="ph ph-house"></i>

This will render a house icon. You can change "ph-house" to any other icon name.

Example with a title and icon together:

<h2><i class="ph ph-code"></i> Learn to Code</h2>

📐 Step 3: Style the Icons with CSS

Phosphor icons are font-based, so you can style them like text using CSS:

.ph {
  font-size: 32px;
  color: #7179F4; /* your brand color */
  vertical-align: middle;
  margin-right: 8px;
}

This will make your icons larger, colored, and spaced nicely beside text.

🧩 Step 4: Find Icon Names

To find the name of an icon:

  1. Visit phosphoricons.com
  2. Click on an icon
  3. Look for the class name (e.g., ph ph-chat, ph ph-envelope)

You can also select the style (e.g., thin, bold, duotone) depending on your visual preference.

✅ Final Result

You now have Phosphor Icons working in your HTML project. You can:

  • Add beautiful icons anywhere
  • Style them easily with CSS
  • Use them without installing packages or writing JavaScript

🧠 Extra Tips

  • Use different icon styles by importing specific versions if needed
  • Combine with buttons or links for interactive elements
  • You can also use Phosphor in React/Vue via npm (@phosphor-icons/react)

Leave a Comment