How to change the color of an svg element?

Css Problem Overview

I want to use this technique and change the SVG color, but so far I haven't been able to do so. I put this in the CSS, but my image is always black, no matter what.

My code:

.change-my-color {
  fill: green;
}

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

Css Solutions

Solution 1 - Css

2020 answer

CSS Filter works on all current browsers

To change any SVGs color

Add the SVG image using an <img> tag.

<img src="dotted-arrow.svg" class="filter-green"/>

To filter to a specific color, use the following Codepen(Click Here to open codepen) to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

Add the CSS filter into this class.

    .filter-green{
    	filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }

Solution 2 - Css

To change the color of any SVG you can directly change the svg code by opening the svg file in any text editor. The code may look like the below code

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
    	<path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
    		C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

You can observe that there are some XML tags like path, circle, polygon etc. There you can add your own color with help of style attribute. Look at the below example

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
        		C181.113,454.921,171.371,464.663,161.629,474.404z"/>

Add the style attribute to all the tags so that you can get your SVG of your required color

Edit: As per Daniel's comment, we can use fill attribute directly instead of fill element inside style attribute

Solution 3 - Css

You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser.

If you want to change your SVG image, you have to load it using <object>, <iframe> or using <svg> inline.

If you want to use the techniques in the page, you need the Modernizr library, where you can check for SVG support and conditionally display or not a fallback image. You can then inline your SVG and apply the styles you need.

See :

#time-3-icon {
   fill: green;
}

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
	C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
	C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
	c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
	c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

You can inline your SVG, tag your fallback image with a class name (my-svg-alternate):

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

And in CSS use the no-svg class from Modernizr (CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js ) to check for SVG support. If there is no SVG support the SVG block will be ignored and the image will be displayed, otherwise the image will be removed from the DOM tree (display: none):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

Then you can change the color of your inlined element:

#time-3-icon {
   fill: green;
}

Solution 4 - Css

if you want to change the color dynamically:

Open the SVG in a code editor
Add or rewrite the attribute of fill of every path to fill="currentColor"
Now, that svg will take the color of your font color so you can do something like:

svg {
    color : "red";
}

Solution 5 - Css

Only SVG with path information. you can't do that to the image.. as the path you can change stroke and fill information and you are done. like Illustrator

so: via CSS you can overwrite path fill value

path { fill: orange; }

but if you want more flexible way as you want to change it with a text when having some hovering effect going on.. use

path { fill: currentColor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>

Solution 6 - Css

Added a test page - to color SVG via Filter settings:

E.G filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Upload & Color your SVG - Jsfiddle

Took the idea from: https://blog.union.io/code/2017/08/10/img-svg-fill/

Solution 7 - Css

Solutions 1 - Edit SVG to point to the currentColor

<svg>... fill: currentColor stroke: currentColor ...</svg>

Then you can control the color of the stroke and the fill from your css

svg {
  color: blue; // or any color of your choice.
}

Pros and cons:

Simple and uses conventional supported css.

Suitable if:

You control the SVG
SVG can be included inline in the HTML.

Solution 2 - css mask property

<i class="icon"></i>

.icon {
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url(https://url.of.svg/....svg);
  mask-image: url(https://url.of.svg/....svg);
  background-color: blue; // or any color of your choice.
  width: 20px; 
  height: 20px; 
}
}

Pros and cons

Relatively easy to use
Browser support for the mask css property is partial.

Suitable if:

SVG is external, and included via URL
Meant to be used on modern known browsers.

Solution 3 - css Filter property - static color

If the color is known in advance you can use https://codepen.io/sosuke/pen/Pjoqqp to find the filter needed to change your SVG to the desired color. For example, to convert the svg to #00f:

<img src="https://url.of.svg/....svg" class="icon">

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%); 
}

if your original color isn't black prefix the list of filters with brightness(0) saturate(100%) to convert it first to black.

Pros and cons:

There might be a small, non significant difference between the result and the desired color.

Suitable if:

Desired color is known in advance.
External image

Solution 8 - Css

SVG mask on a box element with a background color will result:

body{ overflow:hidden; }

.icon {
  --size: 70px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  transition: .12s;
  
  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-bike {
  background: black;
  animation: 4s frames infinite linear;
  
  -webkit-mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
  mask-image: url(https://image.flaticon.com/icons/svg/89/89139.svg);
}

@keyframes frames {
  0% { transform:translatex(100vw) }
  25% { background: red; }
  75% { background: lime; }
  100% { transform:translatex(-100%) }
}

<i class="icon icon-bike" style="--size:150px"></i>

_{Note - SVG masks are not supported in Internet Explorer browsers}

Solution 9 - Css

the easiest way would be to create a font out of the SVG using a service like https://icomoon.io/app/#/select or such. upload your SVG, click "generate font", include font files and css into your side and just use and style it like any other text. I always use it like this because it makes styling much easier.

EDIT: As mentioned in the article commented by @CodeMouse92 icon fonts mess up screen readers (and are possibly bad for SEO). So rather stick to the SVGs.

Solution 10 - Css

To simply change the color of the svg :

Go to the svg file and under styles, mention the color in fill.

<style>.cls-1{fill:#FFFFFF;}</style>

Solution 11 - Css

You can try with filter hack:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

Solution 12 - Css

To change color of SVG element I have found out a way while inspecting Google search box search icon below:

.search_icon {
  color: red;
  fill: currentColor;
  display: inline-block;
  width: 100px;
  height: 100px;
}

I have used span element with "display:inline-block", height, width and setting a particular style "color: red; fill: currentColor;" to that span tag which is inherited by the child svg element.

Solution 13 - Css

Target the path within the svg:

<svg>
   <path>....
</svg>

You can do inline, like:

<path fill="#ccc">

svg{
   path{
        fill: #ccc

Solution 14 - Css

You can change SVG coloring with css if you use some tricks. I wrote a small script for that.

go through a list of elements which do have an svg image
load the svg file as xml
fetch only svg part
change color of path
replace src with the modified svg as inline image

$('img.svg-changeable').each(function () {
  var $e = $(this);
  var imgURL = $e.prop('src');

  $.get(imgURL, function (data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');

    // change the color
    $svg.find('path').attr('fill', '#000');

    $e.prop('src', "data:image/svg+xml;base64," + window.btoa($svg.prop('outerHTML')));
  });

});

the code above might not be working correctly, I've implemented this for elements with an svg background image which works nearly similar to this. But anyway you have to modify this script to fit your case. hope it helped.

Solution 15 - Css

here the fast&furious way :)

 body{
 background-color: #deff05;
 }
 
 svg{
   width: 30%;
    height: auto;
 }
 
 svg path {
    color:red;
    fill: currentcolor;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453  c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z   M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432  c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111  V351.432z"></path></svg>

Solution 16 - Css

A simple way to change SVG image color is using a filter property.

Filter Generator here

Original SVG:

https://svgur.com/i/AFM.svg">

Filtered SVG:

.change-my-color {
  filter: invert(21%) sepia(100%) saturate(3618%) hue-rotate(102deg) brightness(96%) contrast(108%);
}
.change-my-color2 {
  filter: invert(90%) sepia(93%) saturate(636%) hue-rotate(338deg) brightness(112%) contrast(102%);
}
.change-my-color3 {
  filter: invert(71%) sepia(98%) saturate(1284%) hue-rotate(164deg) brightness(100%) contrast(103%);
}
.change-my-color4 {
  filter: invert(23%) sepia(99%) saturate(2151%) hue-rotate(258deg) brightness(100%) contrast(112%);
}

<svg>
    <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>
<svg>
    <image class="change-my-color2" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback2.png" />
</svg>
<svg>
    <image class="change-my-color3" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback3.png" />
</svg>
<svg>
    <image class="change-my-color4" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback4.png" />
</svg>

Solution 17 - Css

For Example, in your HTML:

<body>
  <svg viewBox="" width="" height="">
    <path id="struct1" fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
  </svg>
</body>

Use jQuery:

$("#struct1").css("fill","<desired colour>");

Solution 18 - Css

Method 1

The easy and effect way

open your .svg file with any text editor

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 477.526 477.526" style="enable-background:new 0 0 477.526 477.526; 
   fill: rgb(109, 248, 248);" xml:space="preserve"> 
<svg />

give an style attribute and fill that with color

Another way

fill with color in your shape here i have rect shape fill="white

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
      <g>
          <title>background</title>
          <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" 
           x="-1"/>
           <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" 
           id="canvasGrid">
              <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" 
              width="100%"/>
           </g>
       </g>
</svg>

Solution 19 - Css

Found this useful codepen. It asks for a color and generates an appropriate css filter that achieves your color.

For example:

filter: 'invert(48%) sepia(75%) saturate(1969%) hue-rotate(213deg) brightness(97%) contrast(87%)',

Solution 20 - Css

2022 Web Component `<load-file>` answer

docs: https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

customElements.define("load-file", class extends HTMLElement {

  // declare default connectedCallback as sync so await can be used
  async connectedCallback(
  	// call connectedCallback with parameter to *replace* SVG (of <load-file> persists)
  	src = this.getAttribute("src"),
    // attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
    // declare as parameter to save 4 Bytes: 'let '
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
      // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML
    shadowRoot.innerHTML = await (await fetch(src)).text()

    // append optional <tag [shadowRoot]> Elements from inside <load-svg> after parsed <svg>
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))

    // if "replaceWith" attribute 
    // then replace <load-svg> with loaded content <load-svg>
    // childNodes instead of children to include #textNodes also
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
})

<load-file src="//load-file.github.io/heart.svg">
  <!-- elements inside load-file are MOVED to shadowDOM -->
  <style shadowRoot>
    svg {
      height: 180px; /* stackoverflow subwindow height */
    }
    path:nth-child(2n+2) {
      fill: GREEN; /* shadowDOM style does NOT style global DOM */
    }
  </style>
</load-file>

Solution 21 - Css

If you want to do this to an inline svg that is, for example, a background image in your css:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

of course, replace the ... with your inline image code

Solution 22 - Css

Use an svg <mask> element.

This is better than other solutions because:

Closely matches your original code.
Works in IE!
The embedded image can still be an external, unmodified file.
The image does not even have to be an SVG.
Color is inherited from font-color, so easy to use alongside text.
Color is a normal CSS color, not a strange combination of filters.

<svg style="color: green; width: 96px; height: 96px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <defs>
    <mask id="fillMask" x="0" y="0" width="100" height="100">
      <image xlink:href="https://svgur.com/i/AFM.svg" x="0" y="0" width="100" height="100" src="ppngfallback.png" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" style="stroke: none; fill: currentColor" mask="url(&quot;#fillMask&quot;)" />
</svg>

https://jsfiddle.net/jamiegl/5jaL0s1t/19/

Solution 23 - Css

You can use font icon to use any CSS option on SVG

I was searching for a way to have any CSS options like animation for SVG, and I ended up to generate a font icon with my SVG(s) and then use it inside a span (like FontAwesome), So any CSS option like coloring is available on it.

I used https://icomoon.io to convert my SVG to font icon. Then you can use it like FontAwesome or MaterialIcon inside HTML elements.

Solution 24 - Css

If the same SVG must be used multiple times with different colors, define the set of paths within a hidden SVG which serves as the master copy. Then place new instances which refer to the master path with their individual fills.

Note: This approach only works with inline <svg> tags. It will not work with <img> tags loading .svg files.

:root {
  fill: gray;
}

.hidden {
  display: none;
}

svg {
  width: 1em;
  height: 1em;
}

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="hidden">
 <path id="s_fave" d="m379 21c-57 0-104 53-123 78-19-25-66-78-123-78-74 0-133 68-133 151 0 45 18 88 49 116 0.5 0.8 1 2 2 2l197 197c2 2 5 3 8 3s5-1 8-3l206-206c2-2 3-3 5-5 0.8-0.8 1-2 2-3 23-28 35-64 35-102 0-83-60-151-133-151z"/>
 <path id="s_star" d="m511 196c-3-10-13-18-23-19l-148-13-58-137c-4-10-14-17-25-17-11 0-21 6-25 17l-58 137-148 13c-11 1-20 8-23 19-3 10-0.3 22 8 29l112 98-33 145c-2 11 2 22 11 28 5 3 10 5 16 5 5 0 10-1 14-4l127-76 127 76c9 6 21 5 30-1 9-6 13-17 11-28l-33-145 112-98c8-7 11-19 8-29z"/>
</svg>

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="red"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="gold"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="purple"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="silver"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_fave" fill="pink"></use></svg>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><use href="#s_star" fill="blue"></use></svg>

Solution 25 - Css

Actually, there is a quite more flexible solution to this problem: writing a Web Component which will patch SVG as text in runtime. Also published in gist with a link to JSFiddle

>  filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

<html>

<head>
  <title>SVG with color</title>
</head>

<body>
  <script>
    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta'	
      ></svg-with-color>`;

    })();

  </script>
</body>

</html>

Solution 26 - Css

There are some problem with @Manish Menaria answer, if we convert white color it shows gray.

so added some tweaks, below example specifically shows how to change color in material icon

<mat-icon class="draft-white" svgIcon="draft" aria-hidden="false"></mat-icon>


.draft-white{
    filter: brightness(0) invert(1);
}

Solution 27 - Css

A good approach is to use a mixin to control stroke colour and fill colour. My svgs are used as icons.

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;

        circle, line, path {
            fill: $color
        }

        &:hover {
            fill: $hoverColor;

            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

You can then do the following in your scss:

.container {
    @include icon(white, blue);
}

Solution 28 - Css

If you want to use css to change the colour, you could also use an online tool like this one: https://change-svg-color.vercel.app/

Solution 29 - Css

You shall not set the color directly on the svg image, if you want to program the color of the svg.

In 2021, you can use the following css to make the color change.

html{
  --iron-icon-fill-color-1:green;
  --iron-icon-fill-color-2:red;
  --iron-icon-stroke-color:white;
}


svg#icon-green{
  fill: var(--iron-icon-fill-color-1, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}
svg#icon-red{
  fill: var(--iron-icon-fill-color-2, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}
svg#icon{
  fill: var(--iron-icon-fill-color-x, currentcolor);
  stroke: white;
}

<html>
<body>
<svg id="icon-green" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>


<svg id="icon-red" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>

<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" style="vertical-align:text-bottom" viewbox="0 0 40 40">
  <circle cx="20" cy="20" r="18" stroke-width="3"/>
  <path d="M 10,10 30,30 M 10,30 30,10" fill="none"  stroke-width="6"/>
</svg>

</body>

</html>

Solution 30 - Css

Open your image using a browser, right-click on the image click on view page source and you will see the svg tag of the image. Cope and paste into your html, then change the fill to the colour of your choice

Solution 31 - Css

Simply add fill:"desiredColor" in the svg tag of the image: example:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#bbb9c6">
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

Solution 32 - Css

shortest Bootstrap-compatible way, no JavaScript:

.cameraicon {
height: 1.6em;/* set your own icon size */
mask: url(/camera.svg); /* path to your image */
-webkit-mask: url(/camera.svg) no-repeat center;
}

and use it like:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

Solution 33 - Css

The easiest trick is, Change color using jQuery on page load.

      $(document).ready(function () { 
              $('svg').find('path').attr('fill', '#fff');
      });

#fff is color code that you want to set.

Content Type	Original Author	Original Content on Stackoverflow
Question	Barbara	View Question on Stackoverflow
Solution 1 - Css	Manish Menaria	View Answer on Stackoverflow
Solution 2 - Css	sushant047	View Answer on Stackoverflow
Solution 3 - Css	helderdarocha	View Answer on Stackoverflow
Solution 4 - Css	Mártin Alcalá	View Answer on Stackoverflow
Solution 5 - Css	Biskrem Muhammad	View Answer on Stackoverflow
Solution 6 - Css	Yonatan Ayalon	View Answer on Stackoverflow
Solution 7 - Css	Ben Carp	View Answer on Stackoverflow
Solution 8 - Css	vsync	View Answer on Stackoverflow
Solution 9 - Css	Felix Hagspiel	View Answer on Stackoverflow
Solution 10 - Css	Sethu Sathyan	View Answer on Stackoverflow
Solution 11 - Css	warfish	View Answer on Stackoverflow
Solution 12 - Css	Sarang Kakkoth	View Answer on Stackoverflow
Solution 13 - Css	Michael Philips	View Answer on Stackoverflow
Solution 14 - Css	cydoc	View Answer on Stackoverflow
Solution 15 - Css	Ali Besharati	View Answer on Stackoverflow
Solution 16 - Css	Venteens Productions	View Answer on Stackoverflow
Solution 17 - Css	Grv97	View Answer on Stackoverflow
Solution 18 - Css	MD SHAYON	View Answer on Stackoverflow
Solution 19 - Css	Kristiyan Tsvetanov	View Answer on Stackoverflow
Solution 20 - Css	Danny '365CSI' Engelman	View Answer on Stackoverflow
Solution 21 - Css	Peter Kionga-Kamau	View Answer on Stackoverflow
Solution 22 - Css	JamieGL	View Answer on Stackoverflow
Solution 23 - Css	Mahdi Khansari	View Answer on Stackoverflow
Solution 24 - Css	OXiGEN	View Answer on Stackoverflow
Solution 25 - Css	Petr Tripolsky	View Answer on Stackoverflow
Solution 26 - Css	Shabeer M	View Answer on Stackoverflow
Solution 27 - Css	omarjebari	View Answer on Stackoverflow
Solution 28 - Css	Prottay	View Answer on Stackoverflow
Solution 29 - Css	Chester Fung	View Answer on Stackoverflow
Solution 30 - Css	Chiemelie Akah	View Answer on Stackoverflow
Solution 31 - Css	Shivani	View Answer on Stackoverflow
Solution 32 - Css	Wolfrevok Cats	View Answer on Stackoverflow
Solution 33 - Css	symi khan	View Answer on Stackoverflow

Css Problem Overview

Css Solutions

Solution 1 - Css

To change any SVGs color

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Solution 5 - Css

Solution 6 - Css

Solution 7 - Css

Solutions 1 - Edit SVG to point to the currentColor

Solution 2 - css mask property

Solution 3 - css Filter property - static color

Solution 8 - Css

SVG mask on a box element with a background color will result:

Solution 9 - Css

Solution 10 - Css

Solution 11 - Css

Solution 12 - Css

Solution 13 - Css

Solution 14 - Css

Solution 15 - Css

Solution 16 - Css

Solution 17 - Css

Solution 18 - Css

Solution 19 - Css

Solution 20 - Css

2022 Web Component <load-file> answer

Solution 21 - Css

Solution 22 - Css

Solution 23 - Css

Solution 24 - Css

Solution 25 - Css

Solution 26 - Css

Solution 27 - Css

Solution 28 - Css

Solution 29 - Css

Solution 30 - Css

Solution 31 - Css

Solution 32 - Css

Solution 33 - Css

Combine two columns of text in pandas dataframe

Print string to text file

Attributions

2022 Web Component `<load-file>` answer