svelte-icon-comparison
Side-by-side comparison of 5 popular Svelte icon libraries.
Visual preview • Import patterns • Bundle info • Brand icon coverage
Libraries Compared
| Library | Icons | Brand Icons | Import Pattern | Notes |
|---|---|---|---|---|
@lucide/svelte |
~1,500+ | No | Home |
Clean, minimal. Brand icons removed in v1.x |
@tabler/icons-svelte |
~5,800+ | Yes | IconHome |
Largest free set. 2px stroke default |
phosphor-svelte |
~1,500+ | Yes | House |
6 weight variants. Unique naming |
svelte-remix |
~2,800+ | Yes | HomeLineBuildings |
Verbose naming with category suffix |
@hugeicons/svelte |
5,100+ | Yes | Home01Icon |
Data-driven. Separate icon data package |
Quick Start
pnpm install
pnpm dev
Opens at localhost:5173.
Stack
- SvelteKit 5 with runes mode
- Tailwind CSS v4 via Vite plugin
What It Shows
Each library gets a card displaying:
- 10 common icons — Home, Search, Settings, Heart, Star, Calendar, Mail, Phone, Camera, ChevronRight
- 5 brand icons — Instagram, WhatsApp, Github, Twitter/X, TikTok
- Metadata — icon count, tree-shakeability, bundle size per icon
- Import pattern — how each library names its exports
A summary comparison table at the bottom ties it all together.
