SVG vs PNG Icons: What to Use
A direct decision guide for choosing SVG or PNG icons based on quality, file size, control, and UI use case.
On this page
Use this rule first: for UI icons, choose SVG by default. Use PNG only when the asset is truly raster-based. Here’s the full picture so you can make that call confidently in every edge case.
Quick decision table
| Need | Use |
|---|---|
| Nav icons, button icons, form icons | SVG |
| Dashboard icons, data viz indicators | SVG |
| Dark mode / theme color control | SVG |
| Hover/active state animation | SVG |
| Favicon | SVG (modern browsers) + PNG fallback |
| Complex photo-like textures or gradients | PNG |
| Legacy raster artwork you can’t convert | PNG |
background-image in CSS (no inline SVG) |
SVG (data URI) or PNG |
File size comparison with real numbers
Simple UI icons favor SVG heavily after optimization. Here’s a realistic comparison for a standard 24px icon:
| Format | Raw size | After optimization | 2× retina version |
|---|---|---|---|
| SVG (inline) | 2–8KB | 300–800 bytes (SVGO) | Same file (vector) |
| PNG 24px | 1–3KB | 500–900 bytes (pngquant) | Need separate 48px file |
| PNG 48px (@2x) | 3–8KB | 1–2KB | , |
| WebP 24px | 0.5–2KB | 400–700 bytes | Need separate @2x file |
Key difference: SVG scales infinitely from one file. PNG needs a separate asset at every resolution. For a product with 50 icons across 4 density breakpoints (1x, 1.5x, 2x, 3x), that’s 200 PNG files vs 50 SVGs.
For icons that include photographic textures, gradients with many color stops, or complex shadow effects, PNG can be smaller than the equivalent SVG path data. The break-even point is roughly when an SVG exceeds 20–30KB, at that point, the source artwork is too complex to benefit from vector format.
Why SVG wins for UI icons
1. Scales without additional assets. One SVG file looks sharp at 16px in a table row and 48px in an empty state header. The same PNG would look soft at either non-native resolution.
2. CSS color control. With currentColor, SVG icons respond to text-* Tailwind classes, CSS variable tokens, and dark mode without any additional work. See SVG Icons in Dark Mode for the full picture.
3. Interactive states. Hover colors, active fills, loading spinners, and path morphing are trivial with SVG. PNG can’t do any of them without JavaScript and canvas.
4. Accessibility. Inline SVG icons can have aria-hidden, role="img", and aria-label applied directly. PNG icons in <img> tags require the alt attribute and can’t be hidden semantically without aria-hidden on the wrapper.
5. One maintenance path. Update the SVG source once. No regenerating multiple @2x, @3x, and WebP fallbacks.
When PNG is the right call
Complex artwork that doesn’t simplify cleanly to paths. A hand-drawn illustration, a photograph-based icon, or a gradient-heavy badge with multiple effects are better as PNG, the SVG equivalent would be enormous and slow to parse.
Legacy codebases where refactoring isn’t practical. If you have 500 PNG icons already in production and stable, migrating to SVG is an investment decision, not a technical requirement. Keep PNGs, and adopt SVG for new icons going forward.
Background images in CSS. If you’re using background-image to display icons (common in older CSS-heavy codebases), SVG as a data URI or PNG are your options. Inline SVG can’t be used in background-image.
/* SVG as data URI in CSS background, still vector, no PNG needed */
.icon-search {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E...%3C/svg%3E");
}Favicons: SVG + PNG fallback
Modern browsers (Chrome 80+, Firefox 41+, Safari 17+) support SVG favicons, which stay sharp on every screen density with one file:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png"><!-- fallback -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 PNG required for iOS -->For favicons, the right answer is both: SVG as the primary (infinite scale) and a 32×32 PNG as the fallback for older browsers. See Favicon Sizes You Actually Need for the complete checklist.
Migration strategy for PNG-heavy projects
Migrating all at once creates risk. Migrate by priority:
- Migrate interactive UI controls first, buttons, nav icons, form icons. These have the biggest dark mode and hover state impact.
- Keep static decorative artwork where the raster quality is the point.
- Standardize icon tokens (16/20/24/32px) once SVG adoption begins. This is what makes the CSS sizing consistent.
- Optimize every SVG before merge: run SVGO to keep file sizes equivalent to (or smaller than) the PNGs you’re replacing.
Sources
Related posts