[{"data":1,"prerenderedAt":10},["ShallowReactive",2],{"guide-change-svg-icon-color-and-size":3},{"slug":4,"title":5,"description":6,"date":7,"order":8,"html":9},"change-svg-icon-color-and-size","How to change an SVG icon's color and size","Why some SVG icons ignore CSS color, how currentColor fixes it, and the right way to resize icons without blurry edges or broken proportions.","2026-09-23",4,"\u003Cp>Icon SVGs often "refuse" to change color, or end up cropped and stretched when you resize them. Both problems come from a couple of attributes in the SVG markup. Once you know which ones, fixing them takes seconds.\u003C\u002Fp>\n\u003Ch2>Why your icon ignores CSS \u003Ccode>color\u003C\u002Fcode>\u003C\u002Fh2>\n\u003Cp>Open a downloaded Fluent icon in a text editor and you'll see something like:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg">\n  <path d="…" fill="#212121"\u002F>\n<\u002Fsvg>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The path has a hard-coded fill, \u003Ccode>#212121\u003C\u002Fcode>, which is Microsoft's default dark gray. CSS \u003Ccode>color\u003C\u002Fcode> doesn't affect it, because \u003Ccode>color\u003C\u002Fcode> only changes things that reference it.\u003C\u002Fp>\n\u003Ch3>The fix: \u003Ccode>currentColor\u003C\u002Fcode>\u003C\u002Fh3>\n\u003Cp>Replace the fixed value with the keyword \u003Ccode>currentColor\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><path d="…" fill="currentColor"\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>currentColor\u003C\u002Fcode> means "use this element's \u003Ccode>color\u003C\u002Fcode> value". Now the icon takes the text color of wherever you place it:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.toolbar button { color: #424242; }\n.toolbar button:hover { color: #0f6cbd; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Both the button label and its icon turn blue on hover, and there's no extra CSS for the icon.\u003C\u002Fp>\n\u003Cp>Fluenticons' copy and download options let you choose the color up front, so you can also export an icon with its final color baked in. \u003Ccode>currentColor\u003C\u002Fcode> is still the better choice for anything that needs hover states or dark mode.\u003C\u002Fp>\n\u003Ch3>Overriding fill from CSS\u003C\u002Fh3>\n\u003Cp>If you can't edit the markup (a third-party component, say), CSS can override the attribute, because CSS rules win over SVG presentation attributes:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.icon path { fill: currentColor; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This works for inline SVG only. It doesn't work for SVGs loaded with \u003Ccode><img>\u003C\u002Fcode> or \u003Ccode>background-image\u003C\u002Fcode>, because their contents aren't part of your page's DOM. For those, see the mask technique in \u003Ca href=\"\u002Fguides\u002Fuse-fluent-icons-in-html-and-css\u002F\">Using Fluent icons in plain HTML and CSS\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2>Resizing without breaking the icon\u003C\u002Fh2>\n\u003Ch3>Keep the viewBox\u003C\u002Fh3>\n\u003Cp>\u003Ccode>viewBox="0 0 24 24"\u003C\u002Fcode> describes the coordinate system the icon was drawn in. \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> describe how big it appears. As long as the viewBox is present, you can set any size and the drawing scales to fit:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.icon { width: 32px; height: 32px; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>If you remove the viewBox, the browser renders the paths at their original coordinates, so a 48 px icon shows only its top-left 24 px.\u003C\u002Fp>\n\u003Ch3>Scale with the text\u003C\u002Fh3>\n\u003Cp>For icons inside text or buttons, size them in \u003Ccode>em\u003C\u002Fcode> so they grow with the font:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">.icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The small negative \u003Ccode>vertical-align\u003C\u002Fcode> lines the icon up with the text baseline.\u003C\u002Fp>\n\u003Ch3>Prefer multiples of the design grid\u003C\u002Fh3>\n\u003Cp>Fluent icons are drawn on a pixel grid. At the size they were designed for (24 px here), their edges land exactly on pixels and look sharp. They scale smoothly to any size, but multiples such as 48 and 72, or the native smaller sizes Microsoft publishes (16 and 20 px), render crispest. If an icon looks soft at 18 or 22 px, try the nearest native size instead.\u003C\u002Fp>\n\u003Ch3>Don't forget stroke weight\u003C\u002Fh3>\n\u003Cp>Scaling an SVG scales everything, including line thickness: double the size and the lines are twice as thick. That's usually what you want. If very large icons feel too heavy, use a size that Microsoft designed natively, since those are adjusted for their size.\u003C\u002Fp>\n\u003Ch2>Gradients and multi-color effects\u003C\u002Fh2>\n\u003Cp>For hero graphics or marketing pages, the Fluenticons editor can apply a linear or radial gradient to an icon and export it as SVG or PNG. Under the hood it adds a \u003Ccode><linearGradient>\u003C\u002Fcode> definition and points the path's fill at it:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><defs>\n  <linearGradient id="grad"><stop offset="0%" stop-color="#0f6cbd"\u002F><stop offset="100%" stop-color="#8764b8"\u002F><\u002FlinearGradient>\n<\u002Fdefs>\n<path d="…" fill="url(#grad)"\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>If you inline several gradient icons on one page, give each gradient a unique \u003Ccode>id\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Summary\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Use \u003Ccode>fill="currentColor"\u003C\u002Fcode> and control color with CSS \u003Ccode>color\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>Keep the \u003Ccode>viewBox\u003C\u002Fcode>; change \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> or use CSS to resize.\u003C\u002Fli>\n\u003Cli>Size inline icons in \u003Ccode>em\u003C\u002Fcode> so they follow the text.\u003C\u002Fli>\n\u003Cli>Native sizes and grid multiples render sharpest.\u003C\u002Fli>\n\u003C\u002Ful>\n",1790215639589]