@phosphor-icons/core

This repository hosts the raw SVGs and catalog data – including tags, categories, and release versions – of all icons in the Phosphor Icons family. It serves as the basis for our fuzzy-search on our website and other tools, and as a dev dependency in the build process in some of our framework-specific libraries. You may find this package is useful to you in implementing a port of Phosphor to your preferred framework, or as a source of truth for our current SVG assets.

Installation

yarn add @phosphor-icons/core

Assets

This package exposes all icons as SVG assets, grouped by weight, under the /assets directory (i.e. /assets/<weight>/<kebab-name>-<weight>.svg). These files can be used as needed for custom implementations or ports. Your framework and build tooling may require custom type declarations to recognize and transform "*.svg" files into modules.

Note for Vite users: As of Vite 4.0.4 (current at the time of writing), a bug in one of its dependencies prevents wildcard exports from being resolved. This will be fixed in Vite 4.1.

Example

import ghostDuotone from "@phosphor-icons/core/duotone/ghost-duotone.svg";

Using SVGR (includes create-react-app projects):

import { ReactComponent as GhostDuotone } from "@phosphor-icons/core/duotone/ghost-duotone.svg";

Catalog

This package exposes a named export icons, which is an array of IconEntry objects represententing each icon, its name in both kebab-case and PascalCase, the catergories and tags associated with it, as well as the version it was published in and the most recent version it was updated in:

interface IconEntry {
  name: string;               // "cloud-lightning"
  pascal_name: string;        // "CloudLightning"
  categories: IconCategory[]; // ["weather"]
  tags: string[];             // ["*updated*", "meteorology", "cloudy", "overcast", "stormy", "thunderstorm"]
  published_in: number;       // 1.0
  updated_in: number;         // 1.4
}

Our Related Projects

@phosphor-icons/homepage ▲ Phosphor homepage and general info
@phosphor-icons/vue ▲ Phosphor icon component library for Vue
@phosphor-icons/web ▲ Phosphor icons for Vanilla JS
@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

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

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

sachaw / core