@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 of the document:

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

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

`bash
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):

`ts
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";
`

Usage

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

`html





`

$3

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!

License

MIT © Phosphor Icons