xxxxxxxxxx
filter: "invert(28%) sepia(98%) saturate(1838%) hue-rotate(224deg) brightness(99%) contrast(91%)"
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
<style type="text/css">
.myicon {
display: inline-block;
filter: invert(39%) sepia(16%) saturate(614%) hue-rotate(156deg) brightness(97%) contrast(89%);
}
.sidebar .nav-link:hover .myicon {
filter: brightness(0) invert(1);
}
</style>
<div class="sidebar">
<li class="nav-item">
<a class="nav-link" href="#"><img src="icon.svg" class="myicon"/> MyPage</a>
</li>
</div>
<!--Hex Color To CSS Filter Converter-->
https://isotropic.co/tool/hex-color-to-css-filter/
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
/*change the fill property to new color*/
<svg width="16" height="16" fill="red" class="bi bi-youtube" viewBox="0 0 16 16">
</svg>
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>
xxxxxxxxxx
To control the colour, edit the svg file and change the fill or stroke attributes to "currentColor" (so <polygon fill="#000" > would become <polygon fill="currentColor" >). After that you may change color of svg parent and that will effect svg to change color
xxxxxxxxxx
<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
Run code snippet