Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
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 "@phoshpor-icons/webcomponents/PhHorse";
import "@phoshpor-icons/webcomponents/PhHeart";
import "@phoshpor-icons/webcomponents/PhCube";
// OR IF YOU NEED ALL ICONS:
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:
string
– Icon stroke/fill color. Can be any CSS color string, including hex
, rgb
, rgba
, hsl
, hsla
, named colors, or the special currentColor
variable.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
."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.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!
MIT © Phosphor Icons