How to Use SVG in Astro — Import, Inline, and Optimize
Use SVG in Astro — import as components, inline in layouts, optimize with astro-icon, and serve zero-JS SVG graphics in your static Astro site.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG in Astro Components
Astro processes SVG files as static assets by default. For inline SVG as components, use `astro-icon` (the most popular Astro SVG solution) or import SVG content as raw text. Astro's `.astro` components can include inline SVG directly in the template — it becomes static HTML output with zero JavaScript overhead.
- Static asset: place SVG in /public and reference with `<img src='/icon.svg' />`
- Inline in template: paste SVG directly in .astro component (zero JS)
- astro-icon: `import { Icon } from 'astro-icon/components'` then `<Icon name='icon-name' />`
astro-icon for SVG Icon System
`astro-icon` is the standard SVG icon solution for Astro. Install with `npm install astro-icon`, configure icon sets (Iconify or local SVG files), and reference icons by name. Icons are inlined at build time — no runtime JS, no icon font loading, perfect Lighthouse scores.
- Install: `npm install astro-icon @iconify-json/heroicons`
- Config: add integration to astro.config.mjs
- Usage: `<Icon name='heroicons:check-circle' class='w-6 h-6' />`
Frequently Asked Questions
Can I use SVG for Astro's image optimization?
Astro's `<Image>` component from `astro:assets` doesn't optimize SVG — it passes SVG through unchanged (SVG is already vector and doesn't benefit from raster optimization). Use `<img src={import('./icon.svg').src} />` for SVG images, which Astro serves statically.
How do I animate SVG in Astro without JavaScript?
Use CSS animation in a `<style>` block in your .astro component. CSS `@keyframes` and `animation` properties animate SVG fill, stroke, transform, and opacity with zero JS. For more complex animations, add GSAP as a client-side script with `<script>` in the component.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG