Awesome
<img src="/meta/phosphor-mark-tight-black.png" width="128" align="right" />@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, includinghex
,rgb
,rgba
,hsl
,hsla
, named colors, or the specialcurrentColor
variable. - size?:
number | string
– Icon height & width. This can be a number (defaults to pixels), or a string with units inpx
,%
,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 withweight="regular"
to denote an empty star, andweight="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!
License
MIT © Phosphor Icons