Phosphor Icon Hover Preview

Phosphor Icon Hover Preview helps you preview Phosphor Icons directly in VS Code and Cursor while you code.

It is built for faster icon workflows: type less, discover icon names quickly, and check icon styles without leaving your editor.

What this extension does

• Autocompletes Phosphor icon names using the ph- prefix (example: ph-house, ph-arrow-right)
• Shows hover previews for icon weights: thin, light, regular, bold, fill, duotone
• Automatically adapts preview color to your editor theme:
  • Dark theme: white icons
  • Light theme: black icons

Why use it

• No need to search icon names manually on the website while coding
• Faster iteration when choosing between icon variants
• Better productivity in JSX/TSX/HTML/CSS and any text file where icon names are used

Settings

• phosphorIcons.completionPrefix
  • Prefix used in autocomplete items
  • Default: ph-
• phosphorIcons.weight
  • Default selected weight in hover previews
  • Options: regular, bold, duotone, fill, light, thin

Notes

• Icon assets are provided by the official @phosphor-icons/core package.