Optimizing Small Icons as Data URIs

Small Icon Optimization with Data URIs

Small UI icons (16x16 to 32x32 pixels) are ideal candidates for data URI inlining. At these sizes, the HTTP request overhead often exceeds the actual image data, making inlining a net performance win.

Size Analysis for Small Icons

Icon Size	PNG Size	Base64 Size	HTTP Overhead
16x16 px	200-400 B	270-540 B	500-2000 B
24x24 px	400-800 B	540-1070 B	500-2000 B
32x32 px	600-1500 B	800-2000 B	500-2000 B

HTTP overhead includes DNS lookup, TCP handshake, TLS negotiation, HTTP headers, and connection keep-alive overhead. On HTTP/2, multiplexing reduces this, but each request still has framing overhead.

Comparison of Icon Delivery Methods

Data URI inlining:

• Pro: Zero additional requests
• Pro: Works offline
• Con: No independent caching
• Con: Increases HTML/CSS size

CSS sprites:

• Pro: Single request for all icons
• Pro: Cacheable independently
• Con: Complex positioning CSS
• Con: Difficult to maintain and update

Icon fonts:

• Pro: Scalable, color via CSS
• Pro: Single cacheable file
• Con: Accessibility challenges
• Con: Rendering inconsistencies

SVG symbol sprites:

• Pro: Scalable, styleable via CSS
• Pro: Single request
• Con: Requires <use> references
• Con: CORS restrictions for external sprites

Best Practice: SVG Data URIs in CSS

For a modern icon system, SVG data URIs in CSS custom properties offer the best combination of flexibility and performance:

:root {
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
}

.icon-search { background-image: var(--icon-search); }
.icon-close { background-image: var(--icon-close); }

This approach keeps icons in a single CSS file, avoids additional requests, and allows easy theming by overriding custom properties.