Steps I follow to change any SVG's color: - First, add the SVG image using **img** tags. Note that the SVG's initial color must be black for the final color to be correct. <!-- language: lang-html --> <img src="dotted-arrow.svg" class="filter-green"/> <!-- end snippet --> - Use the following [Codepen(Click Here to open codepen)][1] to convert any **HEX color code** to filter: For example, output for **#00EE00** is filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); - Create a new class and add this filter into this class. <!-- language: lang-css --> .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); } - Now Add this class to image tag and color of SVG will be changed to HEX we provided. [1]: https://codepen.io/sosuke/pen/Pjoqqp