@phosphor-icons/webcomponents

Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.

Installation

To add Phosphor web components to your app via CDN, you can include the following in the <head> of the document:

<script
  type="module"
  src="https://unpkg.com/@phosphor-icons/webcomponents@2.1"
></script>

To use within ES modules, install the package and import once near the root of your app:

pnpm add @phosphor-icons/webcomponents
#^ Or whatever package manager you use

Then import either just the icons you need, or the entire library (this can be quite large):

import "@phosphor-icons/webcomponents/PhHorse";
import "@phosphor-icons/webcomponents/PhHeart";
import "@phosphor-icons/webcomponents/PhCube";
// OR IF YOU NEED ALL ICONS:
import "@phosphor-icons/webcomponents";

Usage

Add the custom elements to the document, using the ph- prefixed name of the icon as the custom element name:

<body>
  <ph-horse></ph-horse>
  <ph-heart color="crimson" weight="fill"></ph-heart>
  <ph-cube></ph-cube>
</body>

Styling

Icon components can be styled with the following attributes:

color?: string – Icon stroke/fill color. Can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.
size?: number | string – Icon height & width. This can be a number (defaults to pixels), or a string with units in px, %, em, rem, pt, cm, mm, in.
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" – Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars with weight="regular" to denote an empty star, and weight="fill" to denote a filled star.
mirrored?: boolean – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.

Our Related Projects

@phosphor-icons/homepage ▲ Phosphor homepage and general info
@phosphor-icons/core ▲ Phosphor icon assets and catalog
@phosphor-icons/react ▲ Phosphor icon component library for React
@phosphor-icons/web ▲ Phosphor icons for Vanilla JS
@phosphor-icons/vue ▲ Phosphor icon component library for Vue
@phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
@phosphor-icons/elm ▲ Phosphor icons for Elm
@phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
@phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
@phosphor-icons/figma ▲ Phosphor icons Figma plugin
@phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
@phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
@phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette

Community Projects

phosphor-react-native ▲ Phosphor icon component library for React Native
phosphor-svelte ▲ Phosphor icons for Svelte apps
phosphor-r ▲ Phosphor icon wrapper for R documents and applications
blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
wireui/phosphoricons ▲ Phosphor icons for Laravel
phosphor-css ▲ CSS wrapper for Phosphor SVG icons
ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
ember-phosphor-icons ▲ Phosphor icons for Ember apps

If you've made a port of Phosphor and you want to see it here, just open a PR here!