Phosphor Svelte

Flexible icon family for Svelte with six weights per icon

Icon Library Open Source

Overview

Phosphor Svelte stands out in the icon library space with a simple but powerful differentiator: every icon comes in six weights. Thin, light, regular, bold, fill, and duotone variants give you an expressive range that other icon libraries cannot match with a single install.

This weight system enables design techniques that are awkward with single-weight icon sets. Use regular weight for default states, bold for emphasis, fill for active/selected states, and thin for decorative or secondary contexts — all from the same visual family with guaranteed consistency. The duotone weight, which uses two tones to add depth, is particularly distinctive and not available in Lucide or Tabler.

The icon set includes over 1,512 unique icons across standard categories: arrows, communication, design tools, commerce, media, development, and more. While the count is lower than Lucide or Tabler, the six weight variants mean you effectively have 9,072 icon options.

Each icon is a standalone Svelte component with props for size, color, weight, and mirroring. The weight can be set per-icon or via a context provider that applies a default weight to all child icons. This makes it easy to maintain consistency across your application.

The design language is clean and friendly — slightly rounder and more approachable than Lucide’s geometric precision. This makes Phosphor a natural fit for consumer-facing applications, educational tools, and products targeting a broad audience.

Tree-shaking works at the individual icon level, so your bundle only includes the icons and weights you actually use. TypeScript definitions are included, and Svelte 5 compatibility has been maintained.

One practical consideration is ecosystem alignment. Phosphor is less commonly referenced in Svelte library documentation than Lucide, so you’ll occasionally need to swap icon references when copying example code from libraries like shadcn-svelte.

Choose Phosphor Svelte when design flexibility matters more than raw icon count. The weight system is genuinely useful for building polished, nuanced interfaces.

What's Inside

1512 Components

Strengths

  • Six weights per icon for exceptional design flexibility
  • Duotone variant is unique and visually distinctive
  • Clean, friendly design language
  • Tree-shakable Svelte components
  • Consistent across all 1,512+ icons

Weaknesses

  • Smaller icon count than Lucide or Tabler
  • Multiple weights increase potential bundle size
  • Svelte package gets updates slightly after the core library
  • Less adoption in the Svelte ecosystem specifically

Best For

Design-conscious projects that want multiple icon weights for visual hierarchy and state indication

Not Ideal For

Projects needing the largest possible icon selection

Similar Libraries

Pairs Well With