phosphoricons.com

What is Phosphor Icons?

Phosphor Icons is a flexible icon family intended for interfaces, diagrams and presentations — essentially anywhere a consistent set of symbols is useful. Its page describes it as an icon family rather than a single-purpose UI kit, which suggests the set is meant to be reused across very different contexts, not just app screens. It is created by Helena Zhang and Tobias Fried.

The main practical appeal of an icon family like this is consistency: using one family across a product, a slide deck and documentation avoids the visual mismatch that comes from mixing icon sets. For a concrete scenario, a designer building a dashboard could use the same icons in the navigation, empty states and exported diagrams, so the visual language stays coherent.

A quick decision criterion: choose it if you want one coherent family that covers UI and presentation needs. If you need a very specialised icon (for example, detailed industry-specific symbols), check the available set first, since no single family covers everything. You can also reach the project via Phosphor Icons or its listed contact channels.

How do I install Phosphor Icons in my project?

For most projects, the intended way to install Phosphor Icons is through a package manager rather than downloading files by hand. The official site at Phosphor Icons itself is built as a JavaScript app, so the page you land on may show only a notice to enable JavaScript; the actual setup instructions live in its documentation and code repository.

Typical installation paths

Package manager (recommended for apps and build-tool projects)

• Look for the official npm package, commonly published as @phosphor-icons/react for React, with separate packages or wrappers for other frameworks.
• Install it with your usual command (for example npm install @phosphor-icons/react), then import individual icons so your bundler can tree-shake the ones you don't use.
• This gives you versioned updates and keeps icons in sync with your framework's component conventions.

Raw SVG or font files (for plain HTML, design tools, or no-build setups)

• Download the SVG set and reference the files directly, or copy the markup inline.
• A webfont option is convenient when you want to style icons with CSS color and font-size, but it loads the whole set and can cause a flash of unstyled or missing glyphs.

A useful next step

Check the project's README for the exact package name matching your framework before running anything, since the React package, web component, and plain SVG assets are distributed differently. If you only need a handful of icons on a static page, downloading those SVGs is simpler than adding a dependency; if you expect to use dozens across a growing app, the package manager route will save you maintenance work.

Which icon styles and weights does Phosphor Icons offer?

Phosphor Icons offers six weights, and each weight can be used in any of three styles, giving 18 visual variants of the same underlying icon set.

Weights

• Thin — lightest stroke, best for large display sizes or airy layouts
• Light — subtle, good for secondary UI
• Regular — the default, balanced for most interface work
• Bold — stronger presence for primary actions
• Fill — solid shapes rather than strokes
• Duotone — two-tone treatment with a primary and secondary layer

Styles

• Outline — stroked, open shapes
• Fill — solid shapes
• Duotone — two-tone, with a secondary color layer

In practice, Outline and Fill are the two you'll toggle most: Outline for navigation and toolbars, Fill for active or selected states. Duotone is the one to reach for when you want icons to carry brand color without redrawing them. Thin and Light suit large hero graphics or dense dashboards where Regular feels heavy; Bold works when an icon sits next to bold text or must survive a busy background.

A useful decision rule: pick one weight as your default across the product, then use Fill only to signal state (selected tab, active toggle) and Duotone only for decorative or marketing surfaces. Mixing Thin and Bold in the same toolbar usually reads as inconsistency rather than hierarchy.

Because all weights share the same geometry, you can swap weight without re-aligning anything — a real advantage if you're building a design system where icons must scale from 16px controls to 96px illustrations.

Next step: open Phosphor Icons and preview the same icon across all six weights before committing, since the difference between Regular and Bold at small sizes is easy to misjudge in the abstract.

Can I use Phosphor Icons in Figma or other design tools?

Yes. Phosphor Icons is designed for interface, diagram and presentation work, and it is distributed in formats that plug into Figma and most other design tools. The site itself is a JavaScript app, so if you only see a blank page, that is the site waiting for scripts rather than a sign the icons are unavailable.

Phosphor Icons is the official source, maintained by Helena Zhang and Tobias Fried. The practical route is to install it as a Figma library or component set so designers can drag icons onto frames and swap weights without leaving the canvas. The same icon family is also packaged for code, which matters if you want the design and the build to stay in sync.

What to check before committing

• Figma: look for an official library or plugin, then confirm the weights you need are included. Weight variants are the main reason to pick Phosphor over a single-style set.
• Other design tools: Sketch, Adobe XD and similar tools generally accept SVG. Download the SVGs and import them as symbols or components, or use a plugin that pulls from the same source.
• Code handoff: if developers use the React, Vue or web-font packages, agree on icon names early. A shared naming convention prevents the classic mismatch where a designer's "caret-down" is a developer's "chevron-down".
• Licensing: check the licence terms on the official site before shipping in a commercial product; icon licences vary in whether attribution is required.

A quick decision rule

If your team works mainly in Figma, install the library and treat it as the single source of truth. If you work across several tools, keep a folder of downloaded SVGs and import them per tool rather than relying on one integration. If you only need a handful of icons for a slide deck, downloading individual SVGs is faster than setting up a library.

A useful next step: open the official site, find the download or Figma section, and install the library in a scratch file first. Test one icon at small and large sizes, then decide whether the weight range fits your product before rolling it out to the whole team.

Is Phosphor Icons free for commercial projects?

Yes. Phosphor Icons is an open-source icon family, and its icons can be used in commercial projects without paying a license fee. The practical catch is attribution and the exact license version: Phosphor has historically been released under the MIT license, which permits commercial use, modification and redistribution as long as the copyright notice and license text are included.

For most teams, that means:

• Apps, dashboards and marketing sites: fine to use commercially.
• Client work: fine, but keep the license notice in your project's credits or bundled license file.
• Redistribution or resale: permitted under MIT, but you must carry the notice; you cannot claim authorship of the icons.
• Trademark use: the license covers the icon files, not the Phosphor name or logo as a brand endorsement.

A useful next step: open the project's repository and read the LICENSE file rather than relying on a general description, since some icon sets mix licenses across icon styles or add a separate brand-assets carve-out. If your legal team needs certainty for a paid product, have them review that file and confirm whether the version you installed is still MIT.

One concrete scenario: a design agency building a commercial SaaS dashboard can ship Phosphor icons in the product and in client handoff files, provided the license text travels with the source. If the client later asks for exclusive ownership of all assets, the icons themselves remain under MIT and cannot be transferred exclusively — plan for that in the contract.

How do I customize the size and color of Phosphor Icons?

You can customize size and color of Phosphor Icons mainly through the styling of the element that renders the icon, rather than through a single built-in “size” or “color” control. In practice, Phosphor icons are designed to inherit the CSS properties of their container, so you typically set font-size (or width/height for SVG) and color in your own stylesheet.

Size

• For font-based icons: set font-size on the icon element or a parent. The icon scales with the text size, so font-size: 24px gives you a 24px icon.
• For SVG icons: set width and height directly, or use em units so the icon scales with surrounding text.
• Responsive scaling: use relative units like em or rem rather than fixed pixels if you want icons to adapt to different screen sizes or user font settings.

Color

• Single-color icons: set the CSS color property. The icon inherits it, so you can change color globally, per component, or on hover.
• Multi-color or duotone variants: these often use two separate color values. Check the specific icon variant’s markup — usually one color is controlled by color and the secondary color by a CSS variable or a separate class.
• Consistency: define color in your design tokens or theme variables so icons match your text and UI palette automatically.

Practical example

If you use an icon inside a button:

.button .icon {
  font-size: 1.25rem;
  color: currentColor;
}

This makes the icon match the button’s text size and color, and it will update automatically if the button’s color changes (for example, on hover or in a dark theme).

Decision criteria

• If you need pixel-perfect sizing: use SVG with explicit width/height.
• If you want icons to flow with text: use font icons or em-based SVG sizing.
• If you need multiple colors per icon: choose the duotone or multi-color variants and style each layer separately.
• If you want theme-wide control: set color and size once in a parent or global CSS rule rather than per icon.

For the exact class names, variants, and framework-specific usage (React, Vue, etc.), the official documentation at Phosphor Icons is the best next step — it shows the available weights and how each variant is structured, which determines exactly which CSS properties apply.