Change Color Of SVG Icon Image File
May 6, 2020 by Andreas Wik
Did you just get your hands on a set of SVG icons but they are not in the color you want? Here is how you, in seconds, can change the color of an SVG icon image file.
Simply open the SVG file in your code editor. This example below is the alert-triangle icon from the Feather icon set.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
To change the color of the icon’s lines, locate stroke and set it to the color you want. It may be set to currentColor as in my example above. To make it green, simply change it from stroke=”fillColor” to stroke=”red” or use a hex value e.g. stroke=”#cc0000″
Save the file and you’re done.
You can also find fill and set that to any color you want e.g. fill=”pink”. Often it’s set to none for icons.
Over and out.
Share this article
