Blog
Guides, tips, and fixes for working with icons and SVG.They cover color, sizing, React components, and picking a library.
SVG vs PNG Icons: Which Should You Use?
A measured comparison of SVG and PNG icons: real file sizes at 1×, 2×, and 3×, how each handles color and pixel density, and the places where PNG is still the only option.
Read guideHow to Change the Color of an SVG Icon
Why some SVG icons ignore your CSS, and how to recolor any of them: currentColor, fill vs stroke, specificity, masks for <img> icons, duotone, and sprites.
Read guideHow to Turn an SVG Icon into a React Component
Turn raw SVG into a typed, reusable React component: JSX attribute fixes, a props API that holds up, refs, tree-shaking, SVGR for Vite and Next.js, and ID bugs.
Read guideLucide vs Tabler vs Heroicons: Which Icon Library?
A hands-on comparison of three popular open-source icon sets: real icon counts, the SVG each one renders, bundle cost, accessibility defaults, and when to pick which.
Read guideWhy Are My SVG Icons Blurry? (And How to Fix It)
SVG never pixelates, but it can still look soft.Measured examples of why: odd sizes, half-pixel strokes, fractional positioning, and hidden bitmaps, with a fix for each.
Read guide5 Ways to Add Icons to a Website, Measured
The same 20 icons embedded as inline SVG, <img>, React components, a CSS mask and an external sprite: bytes, requests, DOM size and whether CSS can recolor them.
Read guideIcon Size and Stroke Width: How Line Weight Changes with Size
Which icon sizes to use and why each set’s grid matters, what stroke-width measures, how lines grow with size, how to keep them constant, and where heavy strokes clip.
Read guideHow to Make a Favicon from an Icon
A minimal, current favicon setup: an SVG, a multi-size ICO, an Apple touch icon, and manifest icons.Includes a tested Node script that generates all of them from one SVG.
Read guideHow to Reduce SVG File Size
Measured before-and-after results with SVGO on an editor export, a library icon set, and precision settings, plus what is safe to strip and what to keep.
Read guideHow to Make SVG Icons Accessible
Decide whether an icon is decorative, informative, or a control, then mark it up correctly.Includes what Lucide, Heroicons, Tabler, and Phosphor do by default, contrast, target size, and testing.
Read guideSVG Not Showing? Common Causes and Fixes
Why an SVG shows nothing: work out whether it failed to load, has no size, or draws nothing visible, then fix MIME types, xmlns, XML errors, imports, and viewBox.
Read guideHow to Convert an SVG to PNG
Pick the right pixel size, keep transparency, and avoid cropping and blur.Tested code for the browser (canvas), Node (sharp), the command line, and headless Chrome.
Read guideHow to Animate SVG Icons with CSS
Hover nudges, spinners, bell swings, icon swaps, and the line-drawing effect in plain CSS, plus why the classic dasharray trick mistimes and how pathLength fixes it.
Read guideSVG Sprites: Reuse Icons with <symbol> and <use>
How SVG sprites work, what they save with and without gzip, a tested build script, styling through the <use> shadow tree, and the same-origin trap.
Read guideThe Best Free Icon Libraries in 2026
Six open-source icon libraries examined from their installed packages: icon counts, design grids, how each draws its icons, licenses, and a practical way to choose.
Read guide