How to Use SVG in Gatsby
Import and render SVG graphics efficiently in Gatsby using SVGR-based plugins and Gatsby's image processing pipeline.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Importing SVG as React Components in Gatsby
Gatsby supports importing SVG files directly as React components using plugins like gatsby-plugin-react-svg, which transforms SVG imports through SVGR. This lets you treat each SVG icon as a reusable, prop-controllable component throughout your site.
- gatsby-plugin-react-svg enables component-style SVG imports
- Imported SVG components accept className and style props
- Ideal for icon systems used repeatedly across page templates
Static SVG and Optimization in Gatsby
For simpler use cases, SVG files placed in the static folder are served directly without processing, while build-time optimization tools like SVGO can be run as a pre-build step to minify SVG assets before deployment.
- Static folder: simplest approach for unprocessed SVG files
- Run SVGO in a pre-build script to minify SVG assets
- Inline SVG in JSX directly for the smallest possible page weight
Frequently Asked Questions
Should I use gatsby-plugin-react-svg or just import SVG as an image?
Use the plugin when you need to style or manipulate the SVG via props (color, size); import as a plain image when you just need a static graphic with no per-instance customization.
Does Gatsby optimize SVG files automatically during build?
Not by default — SVG isn't processed by gatsby-plugin-image. Run SVGO manually or via a build script to minify SVG assets before deployment.
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