xxxxxxxxxx
/* change svg color using css filter
https://codepen.io/sosuke/pen/Pjoqqp
*/
/* in the HTML: */
<img src="dotted-arrow.svg" class="filter-green"/>
then change the color in the css file:
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
xxxxxxxxxx
fill="white"
<svg class="bi d-block mx-auto mb-1" width="24" height="24" fill="white">
<use xlink:href="#table"></use>
</svg>
xxxxxxxxxx
<style>
.search_icon {
color: red;
fill: currentColor;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
<span class="search_icon">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>
Run code snippet
xxxxxxxxxx
<!-- use fill="white" -->
<div>
<svg id="Layer_1" width="30px" fill="white" style="enable-background:new 0 0 100 100;" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M71.1,86H28.9c-2.7,0-4.9-2.2-4.9-4.9V18.9c0-2.7,2.2-4.9,4.9-4.9H51v2H28.9c-1.6,0-2.9,1.3-2.9,2.9v62.2 c0,1.6,1.3,2.9,2.9,2.9h42.2c1.6,0,2.9-1.3,2.9-2.9V40h2v41.1C76,83.8,73.8,86,71.1,86z"/></g><g><path d="M75,41H54.9c-2.7,0-4.9-2.2-4.9-4.9V15c0-0.6,0.4-1,1-1s1,0.4,1,1v21.1c0,1.6,1.3,2.9,2.9,2.9H75c0.6,0,1,0.4,1,1 S75.6,41,75,41z"/></g><g><path d="M75,41c-0.3,0-0.5-0.1-0.7-0.3l-24-25c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l24,25c0.4,0.4,0.4,1,0,1.4 C75.5,40.9,75.2,41,75,41z"/></g><g><path d="M65,58H35c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S65.5,58,65,58z"/></g><g><path d="M65,52H35c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S65.5,52,65,52z"/></g><g><path d="M65,46H35c-0.6,0-1-0.4-1-1s0.4-1,1-1h30c0.6,0,1,0.4,1,1S65.5,46,65,46z"/></g></svg>
</div>
xxxxxxxxxx
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
xxxxxxxxxx
<!-- If you want to change te color of an svg element with CSS, the best way
to do it is by targeting the individual elements used inside the svg. See
example below: -->
<!DOCTYPE html>
<html>
<head>
<style>
circle {
stroke: yellow;
fill: red;
}
line {
stroke: blue;
}
</style>
<body>
<svg>
<g>
<line x1="18" y1="6" x2="6" y2="18"/>
<circle cx="50" cy="50" r="40"/>
</body>
</html>