Unlike phosphor-icons, phosphor-css isn't loading any fonts. Instead, CSS is loaded, and SVG icons are requested when required. It is possible to load a multi- or single-weight CSS file (e.g. "regular" or "fill"), allowing for even more efficient use.

• phosphor-css
• Index
• Installation
• Usage
• License
• Contribute

npm i phosphor-css

By default, icons are the size of 1.5rem (24px). width, height, background-color (final icon colour) and line-height can be modified when targetting .ph.icon.

@import 'phosphor-css/css/index.css';
@import 'phosphor-css/sass/index.scss';
@import 'phosphor-css/less/index.less';
/* @import "phosphor-css/{language}/{weight}.{language}"; */

<!-- regular -->
<i class="ph icon heart" />

<!-- bold -->
<i class="ph icon heart bold" />

phosphor-icons is licensed under MIT. After building, you may find the license in the assets folder. Thus, the license is included in the npm package.

Install all (dev-)dependencies by running the following.

  pnpm i

Make sure husky is being installed too.

  pnpm run prepare

And off we go …

Build this project with the following.

  pnpm run build