This content originally appeared on DEV Community and was authored by Gouranga Das Samrat
I’ve stared at my React app’s bundle size ballooning, cursing every SVG icon I lovingly crafted for that polished UI. Heavy icons frustrate users and tank performance. Slow page loads and bloated bundles are a developer’s nightmare, nobody wants their app to feel like it’s an amateur’s work.
There’s a better way to load SVG icons that keeps your app snappy and your users happy, without ditching those crisp visuals.
The Naive Approach
I used to inline every SVG directly in my components or import them as React components. It’s straightforward but bloats the bundle, each icon’s XML adds kilobytes, and duplicated icons across views compound the pain. Network requests pile up, and users wait longer for the app to render.
The Smarter Approach
Enter the SVG tag, a lightweight way to reference icons from a single sprite. It’s like a Progressive JPEG for icons: load once, reuse everywhere. The catch? You need a sprite file, but it’s a small price for slashing bundle size.
The first step is to create a single .svg file that will reference several icons:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="display: none"
>
<symbol id="arrow-right" viewBox="0 0 24 24">
<path
d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2h12.172Z"
/>
</symbol>
<symbol id="arrow-left" viewBox="0 0 24 24">
<path
d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11Z"
/>
</symbol>
</svg>
Let’s see how to use that sprite file to load icon:
<svg>
<use href="/images/icons/sprite.svg#arrow-right"></use>
</svg>
Host a sprite.svg file with all your icons as elements, then reference them by ID. Bundle size shrinks since you’re not duplicating SVG code.
Reducing The Sprite Size
Sprites are great, but a fat sprite can still slow your initial load. To improve performance, split your sprite into individual files.
<!-- arrow-left.svg -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="display: none"
>
<symbol id="icon" viewBox="0 0 24 24">
<path
d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414L7.828 11Z"
/>
</symbol>
</svg>
<!-- arrow-right.svg -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="display: none"
>
<symbol id="icon" viewBox="0 0 24 24">
<path
d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2h12.172Z"
/>
</symbol>
</svg>
This is how you can use it:
<svg>
<use href="/images/icons/arrow-right.svg#icon"></use>
</svg>
Bonus: Browser cache is doing its work. Icons will load instantly after first use.
The Lazy-Loading Refinement
The sprite approach is slick, but loading a massive sprite upfront can still choke initial render. Lazy-load the sprite only when icons are needed.
The Lazy-Loading Refinement
Use Intersection Observer to load icons only when they’re in the viewport. It’s like deferring dessert until you’re ready to eat, why load what users can’t see? This cuts unnecessary network requests on long pages.
// @/components/icon.tsx
// This code implements lazy loading for SVG icons using the Intersection Observer API.
type Props = React.SVGProps<SVGSVGElement> & {
code: string,
};
export default function Icon({ code, ...props }: Props) {
// Creates a ref to track the SVG element
const ref = React.useRef < SVGSVGElement > null;
// Uses useState to track if the icon is in viewport
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
// Checks if IntersectionObserver is supported by the browser
const isCompatible = "IntersectionObserver" in window;
if (isCompatible) {
const svg = ref.current;
// Checks if not already inView before setting the observer
if (svg && !inView) {
// Creates an observer that triggers when icon enters viewport
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setInView(true);
}
},
// Adds a root margin to trigger the observer a bit earlier: 24px before svg enters the viewport
{ rootMargin: "24px" }
);
// Sets up observation of the SVG element on mount
observer.observe(svg);
return () => {
// Cleans up by unobserving when icon is inView or unmounted
observer.unobserve(svg);
};
}
} else {
// Falls back to always showing the icon
setInView(true);
}
}, [inView]);
// Only sets the SVG reference when icon is in view
// Prevents unnecessary loading of SVG icons outside viewport
const href = inView ? `/images/icons/${code}.svg#icon` : undefined;
return (
<svg ref={ref} width={24} height={24} {...props}>
{href && <use href={href} />}
</svg>
);
}
This only fetches the icon when it’s visible. It’s overkill for small apps but shines on content-heavy pages.
Final Takeaway
This isn’t the only way to optimize icons, experiment with code-splitting or CDN-hosted sprites. Tweak it, test it, share your hacks.
Follow for more React performance tips!
This content originally appeared on DEV Community and was authored by Gouranga Das Samrat
Gouranga Das Samrat | Sciencx (2025-09-14T12:00:00+00:00) Use SVG Sprites to Make Your React App Load Faster. Retrieved from https://www.scien.cx/2025/09/14/use-svg-sprites-to-make-your-react-app-load-faster/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.