SVG vs PNG Icons: What to Use

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.

PNG can win on complex artwork

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.