skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

phosphor-icons

Guide Phosphor icon selection, sizing, and accessibility across React, Next.js, Vue, and HTML.

Updated Aug 23, 2026
Search Tags:#accessibility#react#nextjs#icons#svg#ssr#phosphor
One-click install
npx skills add https://github.com/leonardoacosta/central-claude --skill phosphor-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phosphor-icons
Source: https://github.com/leonardoacosta/central-claude/tree/main/skills/phosphor-icons
Command: npx skills add https://github.com/leonardoacosta/central-claude --skill phosphor-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about phosphor-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Phosphor icons in a React component with proper accessibility?▼

Use Phosphor icons in React by importing the specific icon component and rendering it with props like size and weight, adding aria-label for semantic meaning or aria-hidden for decorative icons.

What is the best way to keep UI icon weights consistent across a project?▼

Maintain consistency by selecting one Phosphor icon weight per UI region for visual cohesion, applying IconContext defaults globally to standardize sizing and styling across your React project.

Does Phosphor icons work with Next.js server-side rendering and package optimization?▼

Phosphor icons support Next.js SSR via specific server component imports, and applying Next.js optimizePackageImports guidance reduces dev startup time and prevents bundle bloat.

Can I use Phosphor icons in vanilla HTML without a JavaScript framework?▼

You can use Phosphor icons in vanilla HTML via class-based usage patterns, rendering SVGs directly without React or Vue, applying CSS rules to avoid breaking icon rendering.

Why does my duotone icon rendering break when applying custom CSS sizing?▼

Duotone icon rendering breaks when CSS sizing overrides SVG layers, requiring you to follow specific sizing guidelines and CSS rules to preserve duotone layers and avoid breaking icon rendering.

Related Skills

Explore More Software Engineering Skills→
NazmusSayadNazmusSayad
3

hugeicons

Render Hugeicons icons in React using HugeiconsIcon and core-free imports.

Community
Basic
Shresth-shShresth-sh

nextjs-performance

Apply critical performance fixes to Next.js applications.

Community
Intermediate
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced