Phosphor Icons Core

Icons are available as SVG files grouped by weight under the /assets directory. The path pattern is /assets/<weight>/<kebab-name>-<weight>.svg. You can also omit the /assets prefix if your project supports import maps.

Note: Your build tooling may require custom type declarations to handle *.svg imports.

Standard Import

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

Using SVGR (e.g., Create React App)

If you use SVGR, you can import icons as React components:

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

Install the package using your preferred package manager to access raw SVG assets and the icon catalog.

pnpm add @phosphor-icons/core

Some icons are available under multiple names via an alias property. When using an icon, you can use either the primary name or the alias.name. The pascal_name will also change accordingly.

Examples found in the catalog:

• file-dashed (Alias for file-dotted / FileDotted)
• file-magnifying-glass (Alias for file-search / FileSearch)
• folder (Alias for folder-notch / FolderNotch)
• folder-dashed (Alias for folder-dotted / FolderDotted)
• folder-minus (Alias for folder-notch-minus / FolderNotchMinus)
• folder-open (Alias for folder-notch-open / FolderNotchOpen)
• folder-plus (Alias for folder-notch-plus / FolderNotchPlus)
• folder-simple-dashed (Alias for folder-simple-dotted / FolderSimpleDotted)

Each icon in the Phosphor Icons catalog is defined by a set of metadata properties. When programmatically accessing the icon registry, you can use these properties to filter, categorize, or search for specific icons.

Key properties include:

• name: The kebab-case identifier (e.g., four-k).
• pascal_name: The PascalCase version of the name, typically used for component naming (e.g., FourK).
• categories: An array of IconCategory values assigned to the icon.
• figma_category: The corresponding FigmaCategory for use in design tools.
• tags: An array of strings used for semantic searching (e.g., ['video', 'resolution']).
• codepoint: The unique integer identifier for the icon.
• published_in / updated_in: Version numbers indicating when the icon was added or last modified.

Each icon in the Phosphor library is defined by a metadata object containing its identity, categorization, and technical details. When programmatically accessing the icon catalog, you can use these properties to filter or identify icons:

• name: The kebab-case string identifier (e.g., chart-line).
• pascal_name: The PascalCase name used for component identifiers (e.g., ChartLine).
• categories: An array of IconCategory values the icon belongs to.
• figma_category: The specific FigmaCategory used for organization in Figma files.
• tags: An array of descriptive strings used for searching and grouping.
• codepoint: The unique integer representing the icon's codepoint.
• published_in: The version number when the icon was first introduced.
• updated_in: The version number of the last update to the icon.

The icons constant is a central catalog containing metadata for every icon in the Phosphor library. Each entry in the array represents a single icon and provides information used for searching, categorization, and mapping to specific assets.

An icon entry typically includes:

• name: The kebab-case identifier (e.g., address-book).
• pascal_name: The PascalCase name used for component identifiers (e.g., AddressBook).
• categories: An array of IconCategory values for logical grouping.
• figma_category: The corresponding category used in Figma design files.
• tags: A list of searchable keywords.
• codepoint: The unique numeric identifier for the icon.
• published_in / updated_in: Version tracking for when the icon was introduced or last modified.

Each icon in the Phosphor library is defined as an IconEntry object. This object contains metadata used for categorization, searching, and identification. Key properties include:

• name: The kebab-case string identifier for the icon (e.g., file-code).
• pascal_name: The PascalCase name used for component identifiers (e.g., FileCode).
• categories: An array of IconCategory values representing the icon's functional group.
• figma_category: A FigmaCategory value used for organization within Figma files.
• tags: An array of strings used for semantic searching (e.g., ['documents', 'code']).
• codepoint: The unique numeric identifier for the icon.
• alias: An optional object providing an alternative name and pascal_name for the same icon (e.g., file-dashed is an alias for file-dotted).

Some icons support aliases. This allows you to use an alternative name that points to the same icon, which is useful for maintaining compatibility when an icon is renamed or to support different naming conventions.

Example: The icon box-arrow-down has an alias for archive-box.

{
  name: "box-arrow-down",
  pascal_name: "BoxArrowDown",
  alias: { name: "archive-box", pascal_name: "ArchiveBox" },
  // ...
}

The @phosphor-icons/core package provides a unified entry point for all icon components and their associated types. You can import individual icon components or types directly from the package root.

All icon components are exported from the ./icons module, and all type definitions are exported from the ./types module.

import { Airplane, Cube, IconProps } from '@phosphor-icons/core';

// Usage example:
// <Airplane size={32} weight="fill" />

The FigmaCategory enum defines the specific category mapping used for icons within Figma design files.

export enum FigmaCategory {
  ARROWS = "arrows",
  BRAND = "brands",
  COMMERCE = "commerce",
  COMMUNICATION = "communication",
  DESIGN = "design",
  DEVELOPMENT = "technology & development",
  EDUCATION = "education",
  FINANCE = "math & finance",
  GAMES = "games",
  HEALTH = "health & wellness",
  MAP = "maps & travel",
  MEDIA = "media",
  OFFICE = "office & editing",
  PEOPLE = "people",
  SECURITY = "security & warnings",
  SYSTEM = "system & devices",
  TIME = "time",
  WEATHER = "weather & nature",
}