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
fill="white"
<svg class="bi d-block mx-auto mb-1" width="24" height="24" fill="white">
<use xlink:href="#table"></use>
</svg>
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
<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
.filter-green{
filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
xxxxxxxxxx
filter: "invert(28%) sepia(98%) saturate(1838%) hue-rotate(224deg) brightness(99%) contrast(91%)"
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>