# phosphor-icons/homepage

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/phosphor-icons-homepage).**

6,231 stars · 158 forks · TypeScript · mit

## Links

- GitHub: https://github.com/phosphor-icons/homepage
- Homepage: https://phosphoricons.com
- awesome-repositories: https://awesome-repositories.com/repository/phosphor-icons-homepage.md

## Topics

`icon-font` `icon-pack` `icons` `phosphor` `svgs`

## Description

Phosphor Icons is an icon library that provides SVG components for React and Vue, designed with tree-shaking support so only the icons actually used are included in the final JavaScript bundle. The library offers runtime customization of icons, allowing developers to override SVG rendering through inline styles, event handlers, and render props.

Icons can be styled by passing props to set color, size, and weight for quick visual adjustments in React or Vue applications. The project also includes a webfont-based icon set that can be used in any web page by adding a stylesheet and applying CSS classes to HTML elements, without requiring a JavaScript framework.

The library transforms raw SVG files into React components at build time through a code generation pipeline, ensuring efficient delivery of only the icons that are actually used.

## Tags

### Web Development

- [Icon Libraries](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-icon-libraries/icon-libraries.md) — Provides SVG icon components for React and Vue with runtime customization and tree-shaking.
- [SVG Component Transformations](https://awesome-repositories.com/f/web-development/svg-component-transformations.md) — Transforms raw SVG files into React components at build time using a code generation pipeline.
- [Tree-Shakeable Icon Bundles](https://awesome-repositories.com/f/web-development/tree-shaking-optimizers/tree-shaking-validators/tree-shakeable-icon-bundles.md) — Removes unused icon components from the final JavaScript bundle, shipping only used icons. ([source](https://cdn.jsdelivr.net/gh/phosphor-icons/homepage@master/README.md))

### User Interface & Experience

- [Tree-Shakeable](https://awesome-repositories.com/f/user-interface-experience/icon-sets/tree-shakeable.md) — Ships icon components designed for tree-shaking, ensuring only used icons are bundled.
- [Icon Styling](https://awesome-repositories.com/f/user-interface-experience/icon-styling.md) — Sets icon color, size, and weight by passing props to React or Vue components. ([source](https://cdn.jsdelivr.net/gh/phosphor-icons/homepage@master/README.md))
- [Icon Overrides](https://awesome-repositories.com/f/user-interface-experience/icon-systems/icon-overrides.md) — Provides runtime overrides of SVG rendering through inline styles, event handlers, and render props. ([source](https://cdn.jsdelivr.net/gh/phosphor-icons/homepage@master/README.md))
- [Icon Components](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/iconography/icon-components.md) — Overrides SVG rendering with inline styles, event handlers, or render props in React and Vue.

### Part of an Awesome List

- [Webfonts](https://awesome-repositories.com/f/awesome-lists/devtools/icon-sets/webfonts.md) — Provides a webfont-based icon set usable via stylesheet and CSS classes without a JavaScript framework.

### Graphics & Multimedia

- [Webfont Icon Displays](https://awesome-repositories.com/f/graphics-multimedia/web-page-rendering/webfont-icon-displays.md) — Ships a webfont-based icon set usable in any web page via stylesheet and CSS classes. ([source](https://cdn.jsdelivr.net/gh/phosphor-icons/homepage@master/README.md))