Free Icons for Svelte — 47,000+ Icons Ready to Use

Browse and export 47,000+ icons optimized for Svelte projects. Get Svelte component code, raw SVG, or download as PNG/WebP. Copy-paste ready.

How to Use Icons in Svelte Without Installing Packages

Svelte's compiler-based approach means icons are just components — no runtime library needed. While packages like svelte-icons-pack exist, Svelte works best with plain SVG components. IconFontToPNG lets you search 47,000+ icons and copy the raw SVG to use directly in a .svelte file. No packages, no plugins, just SVG in your template.

Why Get Svelte Icons Here?

  • Svelte compiles away — standalone SVG is already the optimal approach
  • No svelte-icons-pack or other wrapper packages needed
  • Copy SVG, paste into .svelte file — done. Svelte handles the rest
  • Works with SvelteKit, Svelte 5 runes, and plain Svelte
  • Smallest possible bundle — compiled SVG has zero runtime overhead

Svelte Icon Code Example

What you get when you copy an icon from IconFontToPNG:

<!-- ArrowRight.svelte -->
<svg width="24" height="24" fill="#52c41a" viewBox="0 0 512 512">
  <path d="M502.6 278.6c12.5-12.5..."/>
</svg>

Best Icon Libraries for Svelte

For Svelte, the ecosystem is smaller than React/Vue. svelte-icons-pack and unplugin-icons work, but most Svelte developers prefer raw SVG since Svelte compiles it optimally. Lucide has an official @lucide/svelte package. For everything else, copy SVG from IconFontToPNG.

LibraryIconsSvelte PackageTree-shakeable
Lucide~1,500lucide-react / lucide-vue-nextYes
Heroicons~450@heroicons/react / @heroicons/vueYes
Phosphor~7,500@phosphor-icons/react / vueYes
Font Awesome~2,000@fortawesome/react-fontawesomeYes
Bootstrap Icons~2,000react-bootstrap-iconsYes
Tabler~5,000@tabler/icons-react / vueYes
Ionicons~1,300@ionic/react (built-in)Partial
Remix Icon~2,800remixicon-reactYes

Frequently Asked Questions

Why don't most icon libraries have Svelte packages?
Svelte compiles components to vanilla JS — SVG in a .svelte file is already optimal. Wrapper packages add no value since there's no virtual DOM to optimize. Most Svelte devs just use raw SVG.
How to make a reusable Svelte icon component with props?
Add export let size = 24 and export let color = "#000" at the top of <script>, then use {size} and {color} in SVG attributes. In Svelte 5, use $props() runes instead.
Does this work with SvelteKit?
Yes. Save SVG as a .svelte component in lib/ or components/, import normally. SvelteKit handles SSR and client rendering automatically.
Are these icons free for commercial Svelte apps?
Yes. All 47,000+ icons come from open-source libraries (MIT, Apache 2.0, ISC, CC0, CC BY 4.0). Free for commercial use.
Do I need to install anything?
No. IconFontToPNG runs in your browser. Search, click, copy the code. No npm packages, no build config.

Related Tools

Icons for Other Frameworks