Skip to main content
Performance

Caching Icons for Performance

Proper caching ensures returning visitors don't re-download icons they already have. This guide covers caching strategies for icons, from HTTP headers to service workers, helping you deliver icons efficiently to all users.

Why Cache Icons?

Icons are perfect candidates for aggressive caching because they:

  • Change infrequently – Icon sets are typically stable
  • Are used across multiple pages – Same icon appears throughout a site
  • Are small but numerous – Many requests can be eliminated
  • Impact perceived performance – Users notice when UI icons lag

With proper caching, returning visitors can load your icons from local storage in milliseconds instead of making network requests.

HTTP Cache Headers

Cache-Control is the primary header for controlling how browsers and CDNs cache your icons. For detailed documentation on caching headers, see the Cloudflare Cache-Control documentation.

Key Directives

  • max-age – How long (in seconds) the browser can use the cached version
  • s-maxage – Same as max-age but for shared caches (CDNs)
  • immutable – Tells browser the file will never change
  • public – Response can be cached by any cache
  • private – Response is for a single user only
  • no-cache – Must revalidate before using cached version
  • must-revalidate – Once stale, must check with origin

Recommended Settings for Icons

For icons with versioned filenames (e.g., icon-abc123.svg):

Cache-Control: public, max-age=31536000, immutable

For icons without versioning:

Cache-Control: public, max-age=604800, must-revalidate

File Versioning Strategies

Versioning allows you to cache icons forever while still being able to update them.

Content Hash in Filename

The most reliable approach: include a hash of the file content in the filename.

icons/
  arrow-right.abc123.svg
  arrow-left.def456.svg

When the icon changes, the hash changes, creating a new URL. Build tools like Webpack, Vite, and Rollup automate this process.

Query String Versioning

A simpler but less reliable approach: append a version query string.

<img src="/icons/arrow.svg?v=1.2.3">

Note: Some CDNs and proxies ignore query strings for caching, making this unreliable.

CDN Configuration

Content Delivery Networks cache icons at edge locations worldwide, reducing latency for global users.

CDN Benefits for Icons

  • Geographic distribution – Serve icons from nearby servers
  • Reduced origin load – CDN handles most requests
  • Automatic optimization – Some CDNs optimize images on the fly
  • DDoS protection – Edge absorbs traffic spikes

CDN Cache Settings

Configure your CDN to respect Cache-Control headers or set CDN-specific rules:

  • Cache by file extension (.svg, .png, .ico)
  • Set long TTLs for versioned assets
  • Enable Brotli or Gzip compression
  • Configure cache purge for updates

Browser Caching Behavior

Understanding how browsers handle cached icons helps debug caching issues.

Cache Locations

  • Memory cache – Fastest, cleared on tab close
  • Disk cache – Persists across sessions
  • Service Worker cache – Developer-controlled

Revalidation

When a cached resource expires, browsers may send a conditional request with:

  • If-Modified-Since – Check if file changed since cached date
  • If-None-Match – Check if ETag matches

If unchanged, the server responds with 304 Not Modified, saving bandwidth.

Service Worker Caching

Service Workers provide programmatic control over caching, useful for:

  • Pre-caching critical icons during installation
  • Implementing cache-first strategies
  • Providing offline support
  • Updating icons in the background

Cache-First Strategy

For icons, a cache-first strategy works well: always serve from cache if available, then update the cache in the background.

// Service Worker cache-first for icons
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/icons/')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => response || fetch(event.request))
    );
  }
});

SVG Sprite Caching

SVG sprites offer caching advantages:

  • Single request – One file contains all icons
  • Efficient updates – New sprite replaces all icons at once
  • Shared cache entry – All pages use the same cached sprite

Cache the sprite file aggressively with content hashing for cache-busting when updated.

Debugging Cache Issues

Use browser DevTools to verify caching behavior:

  • Network tab – Check "from cache" status
  • Application tab – Inspect Cache Storage
  • Disable cache – DevTools option for testing
  • Hard refresh – Ctrl+Shift+R to bypass cache

Cache Invalidation

When you update icons, ensure users get the new versions:

  • Content hashing – New hash = new URL (preferred)
  • CDN purge – Manually clear CDN cache
  • Short max-age – For frequently changing icons
  • Service Worker update – Push new cache version

Frequently Asked Questions

How long should I cache icons?
For versioned/hashed filenames, cache for 1 year (immutable). For non-versioned files, use shorter durations (1 week to 1 month) with revalidation.
Should I use a CDN for icons?
Yes, if your site has global users. CDNs reduce latency by serving icons from edge locations near users. They also handle caching headers automatically.
What about Service Worker caching?
Service Workers provide fine-grained control over caching. Pre-cache critical icons during installation and use cache-first strategies for icon requests.
Do inline SVGs benefit from caching?
No, inline SVGs are part of the HTML document. They benefit from HTML caching but not separate asset caching. Use external SVG files or sprites for better cache efficiency.
Related Downloads
Related Articles