Skip to main content

Use SVG Sprites to Make Your React App Load Faster



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 it’s 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!

Comments

Post a Comment

Popular posts from this blog

Exploring Google’s New Gemini CLI: The Ultimate Open-Source Dev Tool

  Google quietly released a local AI agent that builds apps, debugs code, parses your repo, and fetches real-time data, right inside your terminal. And it’s completely free. This year, the most revolutionary developer tools I’ve used didn’t come with a splashy launch or billion-dollar hype. It came as a simple CLI: Gemini CLI, a terminal-based AI agent built on top of Google’s Gemini 2.5 Pro model . At first glance, it looks like a lightweight alternative to Claude Code. But after just 10 minutes of use, it became clear: this isn’t just a convenient utility. It’s a powerful local AI development assistant that can analyze, automate, and accelerate almost every part of your software workflow. And best of all? It’s fully open-source under the Apache 2.0 license It gives you up to 1,000 free requests per day It integrates with your local filesystem, IDE, and the web And it runs entirely in your terminal , no browser needed In this guide, I’ll show you what Gemini CLI is, how it works...
Post a Comment
Read more

6 Essential JavaScript Concepts Every Developer Should Understand

It’s the only language I’ve used where [] == ![] it's true and where you can, typeof null and somehow get 'object' . But despite all its quirks (and there are many), there are a few core concepts that make life with JS not just easier, but saner. This isn’t some computer science flex. These are practical concepts that, once you understand them, make you write better, cleaner, and less buggy code. 1. Hoisting  Before you rage at your variables being undefined , understand this: JS hoists variable and function declarations to the top of their scope. But —  and this is important  —  only the declarations , not the assignments. Why? Because JS reads it like: This is also why let and const behave differently — they’re hoisted too, but live in the “Temporal Dead Zone” until declared. 2. Closures Closures are like little memory vaults for your functions. They allow functions to remember variables from the scope they were created in, even after that scope has gone. Why care? T...
Post a Comment
Read more

Top 25 JavaScript Array Methods Every Developer Should Learn

  You wrote some code. You ran it. And then your array went from a list of users to an angry collection of undefined , NaN And more bugs than a summer camping trip. Staring at map , filter , and reduce like they were ancient scrolls written in Elvish. Copy-pasting from Stack Overflow like a caffeinated zombie. Wondering why the heck splice just murdered half my data. But here’s the truth: mastering arrays is non-negotiable. If you’re fumbling with arrays, you’re fumbling with everything . Web apps, APIs, UIs — they all depend on your ability to tame this glorious beast. So buckle up. I’m about to drop 25 methods that will make you look at arrays like a surgeon looks at a scalpel. Edited by me 1. map() - Because Loops Are for Cavemen You want to transform every item in an array? Don’t go forEach your way to hell. map It is concise, expressive, and doesn’t mutate your data. It’s like therapy for arrays. const names = [ 'alice' , 'bob' , 'charlie' ]; const u...
Post a Comment
Read more