How to Use SVG Icons in HTML & CSS (4 Methods Compared)
SVG is the best format for icons on the web: it stays razor-sharp at any size, weighs almost nothing, and can be recolored with plain CSS. But there are four different ways to actually put an SVG icon on a page, and picking the wrong one makes styling harder than it needs to be. Here is each method with working code and an honest verdict.
1. Inline SVG — best for styling control
Paste the SVG markup directly into your HTML. The icon becomes part of the DOM, so CSS can restyle every part of it — color, stroke width, hover states, transitions.
On any Infyicon icon page, open the Get-the-code box and copy the SVG tab, then paste it where the icon should appear. Set fill: currentColor on paths and the icon automatically follows your text color: .btn svg { width: 20px; height: 20px; } and the icon inherits color from the button.
Verdict: use inline SVG for interactive icons — buttons, navigation, anything that changes on hover or with themes (dark mode included).
2. The img tag — simplest, cache-friendly
Reference the .svg file like any image: <img src="/icons/rocket.svg" width="24" height="24" alt="Launch">. The browser caches the file, your HTML stays clean, and layout shift is avoided when width and height are set.
The trade-off: CSS cannot recolor an external SVG file. If you need a different color, export the icon in that color first — the free SVG editor recolors any icon and downloads a fresh copy in seconds.
Verdict: use img for decorative or static icons, especially repeated ones (feature lists, footers).
3. CSS background-image — for pseudo-elements and lists
Set the icon as a background: background: url(check.svg) no-repeat left center / 16px — handy for custom list bullets and input decorations where an extra tag would be clutter.
Like the img method, recoloring requires either a pre-colored file or a CSS mask trick: set mask-image: url(icon.svg) with a background-color, and the icon takes any color you want — at the cost of slightly worse browser-cache behavior.
4. Icon fonts — hundreds of icons, one request
An icon font packs thousands of glyphs into one cached file, and every icon is used like text: it inherits font-size and color automatically. One stylesheet, then <i class="ii-r-home"></i> anywhere.
The Infyicons webfont has 61,000+ glyphs in outline and solid weights, split by unicode-range so browsers only download the ranges a page uses. Install it from CDN with one link tag or via npm as "infyicons".
Verdict: use an icon font for UI-heavy apps and admin panels where dozens of icons appear per page.
Which method should you pick?
Interactive, theme-aware icons: inline SVG. Static decorations: img. Bullets and input decorations: CSS background. Many icons across a whole app: the icon font. Most real projects mix two of these — inline SVG for the five icons in the header, and a font or img for everything else.