set svg background color css
/* You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element. */ background-color: red; -webkit-mask-image: url(icon.svg); mask-image: url(icon.svg);
Source: stackoverflow.com
how to change color of an svg
<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
Source: stackoverflow.com
svg color css
fill="white" <svg class="bi d-block mx-auto mb-1" width="24" height="24" fill="white"> <use xlink:href="#table"></use> </svg>
svg color
/* 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%); }
change svg color
<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/
Source: stackoverflow.com
change svg color css
/*Try using the filter property*/ .turn-white { filter: brightness(0) invert(1); }