Imagine: a designer hands over a layout from Figma, you open it and see dozens of PNG icons with hardcoded blue color. On Retina they are blurry, in dark mode unreadable, and loading each file separately creates 50 HTTP requests that kill Core Web Vitals. We solve this problem at the asset preparation stage: we turn scattered rasters into a unified SVG icon system optimized for any device and theme.
Formats: What and When
SVG sprite is the web standard. It scales without loss, supports currentColor for dynamic theming, CSS animations, and weighs 0.5–3 KB per icon. Traffic savings up to 60% compared to PNG — that's up to $500 per month in CDN costs for high-traffic sites. For simple shapes, SVG is 10–50 times lighter than PNG (a 10x to 50x improvement). We keep PNG only for complex gradients – need 1x, 2x, 3x versions for Retina. Icon Font (Font Awesome, Material Icons) is outdated: poor accessibility, FOIT on load. Use it only if the project already relies on it.
How to Prepare SVG Icons for Integration?
An icon ready for development must:
- Use
currentColorinstead of a hardcoded color:
Then<path fill="currentColor" d="M..." />color: redon the parent changes the icon color. - Have a fixed viewBox, usually
0 0 24 24or0 0 20 20. - Not contain extra attributes –
id,class,style,data-*from Figma export must be removed. Tool: SVGO or online svgomg.net. - Be optimized – SVGO removes unnecessary
<g>, merges paths, removes whitespace. Typical savings: 30–60% file weight. This reduces hosting costs and speeds up loading. For accessibility, we addrole="img"andaria-labelwhere needed.
Why an SVG Sprite Speeds Up Loading by 10x?
Using a sprite reduces the number of HTTP requests from dozens to one – a 10–50 times reduction (10x to 50x better). The sprite is cached by the browser: after the first load, icons appear instantly on all pages. Unlike CSS icons (background-position), SVG sprite retains sharpness and supports currentColor. We have prepared assets for over 100 sites and know how to build a sprite correctly.
Example SVG Sprite Structure
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="icon-search">
<path fill="currentColor" d="M10 2a8 8 0 0 0-6.32 12.9l-2.38 2.38 1.41 1.41 2.38-2.38A8 8 0 1 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/>
</g>
</defs>
<use href="#icon-search"/>
</svg>Include: <svg><use href="#icon-search"/></svg>.
Format Comparison
| Format | Scalability | Color | Weight | Use Case |
|---|---|---|---|---|
| SVG | Lossless | currentColor | 0.5-3 KB | Primary |
| PNG | Deteriorates on Retina | Fixed | 10-100 KB | Complex gradients |
| Icon Font | Depends on font | CSS | 100-500 KB | Legacy |
Icon Systems
Ready-made icon libraries worth considering before drawing from scratch:
| Library | License | Icons | Style |
|---|---|---|---|
| Lucide Icons | MIT | 1500+ | Outline, 24×24 |
| Heroicons | MIT | 292 | Outline + Solid, 24×24 |
| Phosphor Icons | MIT | 9000+ | 6 styles |
| Tabler Icons | MIT | 5500+ | Outline, 24×24 |
| Material Symbols | Apache 2.0 | 3000+ | Variable font |
If the brand requires unique icons, we design them based on a chosen grid (24×24, stroke 1.5–2px for outline style, uniform corner radius).
What Is Included in Favicon and App Icons?
Today favicon is not just a single ICO file. Minimum set:
-
favicon.ico– 32×32, for legacy browsers -
favicon.svg– vector, supportsprefers-color-scheme -
apple-touch-icon.png– 180×180, for iOS Safari -
icon-192.png+icon-512.png– for PWA manifest
Example SVG favicon with theme adaptation:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path d="..."/>
</svg>OG Images and Social Assets
For SEO and social sharing, you need:
-
OG Image (Open Graph): 1200×630px, PNG or JPEG. Autogeneration via
@vercel/ogor Puppeteer – for dynamic pages. - Twitter Card: 1200×628px (similar to OG)
- LinkedIn Banner: 1128×191px (for corporate pages)
What is Included in Asset Preparation Work
Everything turnkey: from audit to integration.
- Audit of source layouts and SVG export
- Cleaning and optimization of each file via SVGO
- Building a single SVG sprite hosted on a CDN with caching headers
- Generating favicon set (ICO, SVG, PNG, PWA)
- OG image templates with dynamic variables
- Integration documentation and code snippets
- Training session for your developers on icon usage
- Post-launch support for 30 days
Timelines and Cost
Preparation of a full asset set (optimization of existing icons, SVG sprite, favicon set, OG template) takes 2–4 days depending on volume. Starting from $500 for a complete set. We offer an assessment of your project – contact us. Get a consultation: our engineers will select the optimal solution for your tasks.
We have been working with web projects for over 5 years and have prepared assets for 100+ sites. Our track record guarantees a 60% reduction in HTTP requests. The original SVG format specifications are defined by SVG 2 from W3C.