phosphor-icons

What problem does it solve?

Phosphor Icons provides a clear, consistent approach to selecting, sizing, and styling UI icons across React, Next.js, Vue, and vanilla HTML projects to avoid visual inconsistency, accessibility gaps, and unnecessary bundle bloat.

Core Features & Use Cases

• Weight guidance: six weights explained and a rule to keep one weight per UI region for visual cohesion.
• Framework patterns: usage patterns for React props, IconContext defaults, server component SSR imports, and vanilla HTML class-based usage.
• Performance & tooling: recommendations for Next.js package optimization to reduce dev startup time and alternatives for direct path imports.
• Accessibility & semantics: guidance on aria-label, alt, aria-hidden, and when icons should be decorative versus semantic.
• Duotone and styling tips: how to use duotone layers, sizing guidelines for common UI contexts, and CSS rules to avoid breaking icon rendering.

Quick Start

Install the Phosphor package for your framework, import the desired icon into your component, and render it with a size of 24 and weight bold while providing an accessible label.