Phosphor Icons: One Family, One Way Into the Page
Phosphor icons are the family described on the project README as a flexible icon family for interfaces, diagrams, and presentations. Who made the set, and how the files are licensed, is on the project site and in the license files those repositories link. This page does not restate a catalog count, a weight list, or the license terms. It is how to bring the files into a page once. It is not legal advice and not a promise about rankings.
Raw SVG and catalog data live in the core repository, which describes itself as the source of truth for the current SVG assets and as a base for ports. Read that page before you treat a random download as the set. Pair the page decision with responsive icons.
What to take from the Phosphor repositories
Start from the site when you are choosing a symbol, and from the core repository when you need the file itself. The homepage README is short. It points at the project and the license. The core README says the repository hosts the raw SVGs and catalog data, including tags, categories, and release versions, and that some framework libraries use it while they build. If a framework package and the core files disagree, the core README is telling you which one it considers the assets.
Do not invent a count of icons or a list of weights in your design system docs. Those facts change, and they are on the project, not in this article. Open the site. Copy the name you see. If a tutorial names a weight or a package path, check it against the current repository before you add it.
The project site names its creators in the page that shows when JavaScript is off: Helena Zhang and Tobias Fried. That is a credit, not a support channel. Use the contact the site itself prints if you need the project. Do not put their names in your component as if they maintained your fork.
How to use Phosphor icons without a second set
Pick one delivery for a surface. Either depend on a package you have read, or copy the SVG from the core files next to the component, with a comment that names the path and the day. Do not do both for the same symbol. Two copies will drift the week one of them is updated.
Leave the viewBox and the drawing as they arrived. Size the icon in CSS. If a weight exists as its own file, use that file. Do not thicken a stroke in the vendor SVG and still call it the upstream icon. A changed path is a fork. Before you redistribute a changed file, read the license linked from the repository. This article does not summarize it.
Color follows the file you copied. If the markup is set up to use the surrounding color, set that color on the control and test it. If the file bakes a color in, do not fight it with a filter. Either keep that color on purpose or replace the paint in your copy and mark the copy as yours. Phosphor icons that secretly mix both will not survive a theme switch.
The icon is not the accessible name. A control that shows only the symbol needs a text name in your markup. Decorative icons that sit beside a visible word can be hidden from assistive technology. Read accessibility guidelines for that split. The family does not decide it for you.
Review the row
Line the buttons up. Look for one icon from a different weight, one cropped viewBox, and one button with no name. Return the outlier to the shared file and the shared component. If several icons fail the same way, the component is wrong. Fix it once.
Keep the package version or the copied path in the repo. A file in a chat will not be the file in the build. When you upgrade, render one icon the old way and the new way and look at them before you upgrade the row.
Tomorrow, choose one symbol on the site, take the SVG from the core repository or from the package you actually installed, and put it in a button that has a visible label. Change the label color and see whether the icon follows. Then delete the other copy if you made one. Phosphor icons are in the page when there is one file, one name, and a control people can read.
Hand the next person the component and the link to the core README, not a zip of every asset. The zip invites a second inclusion method. The component already has the method. Opening the component should open the rule.
Check the icon at the two widths you ship. The file stays the same. The layout changes. If the symbol hits the label, fix the gap. Do not crop the viewBox. A cropped file is a different grid from the rest of the family.
If two people add icons in the same week, they use the same component. A pasted SVG with its own width is a second system. Ask them to pass the name through the component before review. The review compares the button to that method, not two drawings to each other.
Write the day on a copied file. The package records a version. A loose file does not. When the button drifts from the site, the comment should say which path you copied. The vendor file stays the one the repository describes. Your component is the file you edit.
After the row looks even, hide one label and read the accessible name. If the name disappears with the label, put the name on the button before you call the screen done. Phosphor icons can sit beside a word. They cannot be the word by themselves unless you wrote the word in the markup.
Do not build a private nickname list. The site and the core catalog are the names. A spreadsheet that says settings while the file says something else becomes a bug the day the import fails. Write the published name on the component. Phosphor icons are addressed by those names, not by the label a slide used.
If a sanitizer strips attributes, put the file back the way you copied it or stop pasting and use the package. A redraw is not the fix. Look at the button again after the attributes are restored. The check is the color and the name of the control.
Store the family next to any other icon family you already use, and do not mix them in one toolbar. A stroke from one family beside a fill from another looks accidental. If a symbol exists only in the other family, say so in the component comment. Do not trace it into the Phosphor folder and hope the upgrade keeps your tracing.
When the launch is late, the hurried icon is the one that skips the component. Make the component the fastest way to add a symbol: one import, one name, a label already wired. A folder of loose SVGs is slower and it forks the set. The rule survives if the correct path is the short path.
Review once with the guides and the weights you did not choose hidden. You are not judging the whole catalog. You are judging the buttons you ship. Phosphor icons you do not use do not belong in the bundle. Import or copy only the symbols the screens need, and delete a trial file the same day you reject it.
Check a theme change if the product has one. A symbol that is clear on the artboard can disappear on the toolbar. Fix the paint on the control or in your marked copy. Do not add a shadow under the icon to fake contrast. The shadow will not match the rest of the row, and it is not part of the file you took from the repository.
Keep a one-line exception when a logo or a registered mark must leave the family. Write the exception on that component. Unlabeled exceptions become the new default because people copy the file they see. Labeled exceptions stay exceptions. Everything else stays on the shared inclusion method, which is the only reason to standardize on Phosphor icons at all.
