How to import SVG files as components in Astro

Astro 5.7 ships with a sleek new feature for working with SVGs: you can now import local .svg files directly as Astro components. No plugins, no workarounds. Just smooth, inlined graphics that are fully optimized out of the box.

If you’ve ever manually copy-pasted SVG code or wrangled third-party integrations just to use inline icons or logos, you’re going to love this.

Inline SVGs = Peak Performance

With this new capability, Astro automatically inlines the contents of your SVG file into the final HTML during the build. This means no <img> tags, no extra HTTP requests, and no rendering delays. Just clean, efficient markup that loads fast and styles easily.

Inline SVGs are more performant than images or background CSS because:

• The SVG is part of your HTML (fewer requests)
• You can directly style and animate it with CSS
• It’s more accessible and flexible for layout control

Just import your file using the default syntax and drop it in like any other component:

---
import MyLogo from '../assets/my-logo.svg';
import AnotherIcon from '../path/to/another.svg';
---

<div>
  <MyLogo />
  <p>Some text</p>
  <AnotherIcon />
</div>

Customize with Props

Need to tweak the size, color, or style? You can pass any standard <svg> attributes,like width, height, fill, stroke, class, and more, directly to the component.

Astro will apply these attributes to the root <svg> tag. If both the file and your props define a value, the prop takes priority. This gives you precise control over how each SVG is rendered.

---
import Logo from '../assets/logo.svg';
---

<Logo width={64} height={64} fill="currentColor" />
<Logo class="icon large-icon text-primary" />

Using SVG Components with Frameworks

SVG components are processed by Astro at build time, just like the <Image /> component. This means you can’t use them directly inside client-rendered framework components (like React or Vue). However, you can pass them into a framework component from an .astro file.

---
import MyLogo from '../assets/logo.svg';
import MyReactComponent from '../components/MyReactComponent.jsx';
---

<MyReactComponent client:load>
  <MyLogo />
</MyReactComponent>

This lets Astro handle the inlining while still working nicely with your client-side framework components.

Astro + SVGs = Performance Wins

This native SVG import feature is another example of Astro’s commitment to speed and simplicity. Whether you’re building a personal site or a polished production app, inline SVGs let you design freely without sacrificing performance.

Ready to build faster and smarter? All of our premium themes take advantage of this feature. Icons, logos, and vector illustrations are optimized out of the box. No fiddling required.

---

For full technical details, visit the official Astro SVG components documentation.