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

CSS only Click-handlers You Might not be using, but you should

  You’re building a simple website, a good-looking landing page with a “See More” button. Instinctively, you reach for JavaScript to handle the button click event. But wait — what if I told you that CSS alone could do the job? Yes. CSS is often underestimated, but it can handle click interactions without JavaScript. In this guide, you’ll learn how to create CSS-only click handlers using the :target pseudo-class, and explore scenarios where this approach makes perfect sense. The :target Pseudo-Class CSS offers several pseudo-classes that let you style elements based on different states ( :hover , :focus , :checked ). But there’s one you might not have used before —  :target . The :target pseudo-class applies styles to an element when its ID matches the fragment identifier in the URL (the part after # ). This behavior is commonly seen when clicking an anchor link that jumps to a section on the same page. Here’s a simple example : <a href="#contact">Go to Contact</...
Post a Comment
Read more

Sharpen Your Front-End Skills: Quick HTML, CSS & React Interview Challenges

  The source of this image is Chat GPT based on writing! Are you preparing for front-end developer interviews and looking for practical, hands-on ways to improve your HTML, CSS, and React skills? Whether you’re a beginner aiming to build confidence or an experienced developer brushing up on UI skills, small, targeted challenges can make a huge difference. In this article, I’ll walk you through some of the best free and low-cost resources that offer real-world front-end tasks — perfect for interview prep, portfolio building, and daily practice. 1. Frontend Mentor frontendmentor.io Frontend Mentor is one of the most popular platforms for hands-on HTML, CSS, and JavaScript challenges. You get beautifully designed templates (in Figma or image formats) and are asked to bring them to life using clean code. The platform offers difficulty levels ranging from newbie to expert, and it’s perfect for practicing responsiveness and semantic HTML. Bonus : You can even filter for React-based ...
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