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!

StackFeed

Use SVG Sprites to Make Your React App Load Faster