Phosphor Icons – CSS Variables

1. Include one or more stylesheets (regular, fill, and/or duotone):

<link rel="stylesheet" href="phosphor-icons-regular.css">
 <link rel="stylesheet" href="phosphor-icons-fill.css">
 <link rel="stylesheet" href="phosphor-icons-duotone.css">
 <link rel="stylesheet" href="phosphor-icons-thin.css">
 <link rel="stylesheet" href="phosphor-icons-light.css">
 <link rel="stylesheet" href="phosphor-icons-bold.css">

Each icon is exposed as a CSS variable --ph-icon-<name> whose value is a url("data:image/svg+xml;utf8,...") data URI. The stylesheet also includes classes so you can use icons like a webfont.

With classes (like a webfont):

<i class="ph ph-smiley"></i>

Use the base class ph plus the icon class ph-<name>. Icons scale with font-size and inherit text color. Example:

As a mask (custom element, icon inherits text color):

.my-icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-image: var(--ph-icon-heart);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

Example with mask (icon color follows text):

As a background image:

.my-icon {
  width: 24px;
  height: 24px;
  background-image: var(--ph-icon-heart);
  background-size: contain;
  background-position: center;
}

Example with background image: