@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/[email protected]"></script>

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

yarn add @phosphor-icons/webcomponents

npm install --save @phosphor-icons/webcomponents

Then

import "@phosphor-icons/webcomponents";

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>

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.

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