Making SVGs Customizable with CSS in Next.js (2026)

Introduction Are you confused by SVG icons that refuse to be styled with CSS? This article will give you a scalable workflow for styling SVG icons in your Next.js project. We will address the problems of: CSS properties not applying to static SVG images Hard-coded attributes within SVG files that overwrite CSS properties (The steps in this guide are specifically for Next.js v16+ and Typescript , but the concepts also apply to general React projects) Why CSS Doesn't Work on Static SVGs When you try to use an SVG like this: < img src = "your_icon.svg" className = "icon" /> # or < Image src = " your_icon.svg " alt = " GitHub " width = { 48 } height = { 48 } className = " icon " /> The SVG is treated as a static external image file, similar to a PNG or JPG. You can resize it, but you cannot style or animate the contents with CSS. The root cause is not the <img> or <Image> tag itself, but the fact that the SVG is being loaded from the public/ directory which is specifically meant for static