DOCSEARCHbyAlgolia
Submit Docs

Phosphor Icons for Web

repository·master·Indexed 17 days ago

https://github.com/phosphor-icons/web

A flexible and friendly icon family for interfaces, diagrams, and presentations provided as webfonts. Version 2.1.2 supports six distinct weights: regular, thin, light, bold, fill, and duotone. The library can be integrated via CDN, npm/yarn modules, or a single script tag, allowing for easy styling using standard CSS properties like color and font-size.

Tokens
13.9K
Snippets
28
Records
31
Agent score
66%

What's inside @phosphor-icons/web

  1. Get started with @phosphor-icons/web via CDN

    master

    Phosphor Icons are provided as webfonts using Unicode's Private Use Area. To use them, include the stylesheet for your desired weight in the <head> of your HTML document, then use an <i> tag with the appropriate weight and icon classes.

    Only the weights you explicitly import will render. For example, to use the bold weight, include the bold/style.css stylesheet and use the .ph-bold class followed by the icon name class (e.g., .ph-smiley).

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import a specific weight -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css"
    />
  </head>
  <body>
    <!-- Use the weight class and the icon class -->
    <i class="ph-bold ph-smiley"></i>
    <i class="ph-bold ph-heart" style="color: hotpink"></i>
  </body>
</html>

  2. Install and import @phosphor-icons/web as modules

    master

    If your environment supports CSS module imports (e.g., via Webpack, Vite, or similar bundlers), you can install the package via npm/yarn and import specific weights directly in your JavaScript/TypeScript files.

    $ yarn add @phosphor-icons/web
    import "@phosphor-icons/web/light";
import "@phosphor-icons/web/bold";

  3. How to use all icon weights at once

    master

    If you need to use all 6 weights in a single project, you can include the library via a single <script> tag using the base URL.

    Warning: This method loads approximately 3MB of fonts and CSS, which may impact page load speed, though assets will be cached for subsequent loads.

    <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2"></script>

<!-- Now you can use any weight -->
<i class="ph-light ph-address-book"></i>
<i class="ph ph-sunglasses"></i>

  4. Style Phosphor Icons with CSS

    master

    Because icons are rendered as text, you can style them using standard CSS properties like color and font-size.

    Important Restrictions:

    • Do NOT override font-family, font-style, font-weight, font-variant, or text-transform. Doing so may break the icon rendering and display unprintable characters.
    • Do NOT override the :before pseudoelement. All weights use :before to inject the glyph. Overriding this in icon classes will break them.
    • Do NOT modify the :after pseudoelement for duotone icons, as it is used for the second color layer.
    <style>
  .ph-bold {
    font-size: 48px;
  }

  .green {
    color: limegreen;
  }
</style>

<!-- 48px icon -->
<i class="ph-bold ph-airplane"></i>

<!-- 48px and green icon -->
<i class="ph-bold ph-skull green"></i>

  5. Use Bold weight icons via CSS classes

    master

    To use icons from the Bold weight in your project, apply the .ph-bold class to an element. To display a specific icon, add its corresponding icon class (e.g., .ph-user, .ph-star) to the same element.

    If you are using the stack utility, you can combine the weight class with stack classes like .ph-stack, .ph-stack-plus, or .ph-stack-minus to create layered icon effects.

    Example usage:

    <!-- A standard bold user icon -->
<i class="ph-bold ph-user"></i>

<!-- A bold star icon -->
<i class="ph-bold ph-star"></i>
    <!-- Example of how to use the classes defined in the CSS -->
<i class="ph-bold ph-user"></i>
<i class="ph-bold ph-star"></i>

  6. Load Phosphor Icons via CDN

    master

    You can load all available icon weights by injecting <link> tags into your document's <head>. The current version (v2.1.2) provides styles for the following weights via jsDelivr:

    • regular
    • thin
    • light
    • bold
    • fill
    • duotone

    Each weight is served as a standalone CSS file. Note that loading all weights simultaneously may impact performance; it is recommended to only load the specific weights your project requires.

    // Example of how the package injects styles via CDN
var head = document.getElementsByTagName("head")[0];

for (const weight of ["regular", "thin", "light", "bold", "fill", "duotone"]) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = `https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/${weight}/style.css`;
  head.appendChild(link);
}

  7. Use Fill weight icon classes

    master

    To display icons with the fill weight using the CSS approach, apply the .ph-fill class to your element. To specify a particular icon, add a second class following the pattern .ph-[icon-name].

    For example, to display a 'star' icon in the fill weight, use the classes ph-fill and ph-star.

    <i class="ph-fill ph-star"></i>

  8. Use Phosphor Icons via CSS classes

    master

    To use Phosphor icons in your project via CSS, apply the base class ph along with a specific icon class to an element. The icon class follows the pattern ph-[icon-name]. The icons are rendered using the :before pseudo-element, which injects the correct icon character from the Phosphor icon font.

    Example usage:

    <i class="ph ph-globe-simple"></i>
<i class="ph ph-heart"></i>
    <i class="ph ph-globe-simple"></i>

  9. Use Light weight icons via CSS classes

    master

    To use the 'Light' weight of Phosphor Icons in your project, apply the .ph-light class along with the specific icon class (e.g., .ph-acorn) to an HTML element. The icon is rendered using the :before pseudo-element.

    Class Naming Convention:

    • Weight class: .ph-light
    • Icon class: .ph-[icon-name] (e.g., .ph-airplane, .ph-arrow-down)

    Example Usage:

    <i class="ph-light ph-airplane"></i>
<i class="ph-light ph-arrow-down"></i>
    <i class="ph-light ph-airplane"></i>

  10. Use Duotone icons via CSS classes

    master

    To render Duotone icons using the web font, apply the base class .ph-duotone along with the specific icon class (e.g., .ph-user, .ph-trend-up).

    Duotone icons are constructed using CSS pseudo-elements:

    • The :before pseudo-element represents the secondary layer, typically rendered with an opacity: 0.2 to create the duotone effect.
    • The :after pseudo-element represents the primary layer, often offset with a margin-left: -1em to align correctly with the base icon.

    Example usage in HTML:

    <i class="ph-duotone ph-user"></i>
<i class="ph-duotone ph-trend-up"></i>
    <i class="ph-duotone ph-user"></i>

  11. Use Phosphor Icon CSS classes

    master

    To display icons using the CSS method, apply the base class ph along with a specific icon class to an HTML element. The icon class follows the pattern ph-[icon-name]. The icon is rendered via the :before pseudo-element using a specific Unicode character from the Phosphor icon font.

    Example usage:

    <i class="ph ph-acorn"></i>
<i class="ph ph-address-book"></i>
<i class="ph ph-airplane"></i>
    <i class="ph ph-acorn"></i>

  12. Use the Fill weight via CSS classes

    master

    To use the 'Fill' weight of Phosphor Icons in a web project, apply the .ph-fill class to your icon element. This class triggers the specific icon glyphs associated with the filled style. You can combine this with specific icon classes (e.g., .ph-folder) to render a filled icon.

    Note: This CSS segment is part of the larger @phosphor-icons/web package and relies on the corresponding icon font being loaded.

    <i class="ph-fill ph-folder"></i>