Как изменить цвет svg css

How can I change the color of an ‘svg’ element?

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

.change-my-color

30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
asked Mar 7, 2014 at 14:15
13.2k 6 6 gold badges 32 32 silver badges 43 43 bronze badges
I’m no svg expert, but have you tried changing fill to background-color?
Mar 7, 2014 at 14:29

@Megan in svg background-color is specified with the ‘fill’ property and the border with ‘stroke’ (as you would do in Illustrator). w3.org/TR/SVG/propidx.html

Mar 7, 2014 at 14:36

CSS from your HTML document will not apply to SVG elements within

Mar 7, 2014 at 14:38
This is possible now. Simple and functional answer here: stackoverflow.com/a/53336754/467240
Jan 12, 2020 at 20:27
Hi, you should probably change the acceepted answer (look at the most voted one).
Mar 31, 2021 at 8:01

46 Answers 46

2020 answer

To change any SVGs color

1. Add the SVG image using an tag.

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

.filter-green

19.6k 4 4 gold badges 74 74 silver badges 55 55 bronze badges
answered Nov 16, 2018 at 11:14
Manish Menaria Manish Menaria
24.6k 3 3 gold badges 22 22 silver badges 23 23 bronze badges

This comes with the usual caveat about not being supported in older browser versions: developer.mozilla.org/en-US/docs/Web/CSS/…

Mar 20, 2019 at 19:00

As noted in the CodePen, if your SVG isn’t black (mine was grey), adding brightness(0) saturate(100%) to the beginning of the list of filters will first turn it 100% black, which enables the other filters to change it to the correct color.

Apr 11, 2019 at 16:57

Also, lots of fascinating background on the solution in this StackOverflow question that informed the CodePen.

Apr 11, 2019 at 17:05
My guy. The support seems acceptable caniuse.com/#feat=css-filters.
Nov 7, 2019 at 15:20
but how do you specify a particular color ?
Oct 19, 2020 at 6:37

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:

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

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

As per Daniel’s comment, we can use fill attribute directly instead of fill element inside style attribute.

30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Dec 4, 2014 at 6:10
Sushant Pachipulusu Sushant Pachipulusu
5,598 1 1 gold badge 18 18 silver badges 30 30 bronze badges

Why not just using attribute fill like this: fill = «#AB7C94» ? Not sure why the style attribute is needed

Jan 27, 2017 at 19:24

Hi Daniel, yeah it works. I didn’t knew that fill can be used as an attribute. Sorry for not noticing your comment so long @bg17aw

Apr 30, 2018 at 9:08

This should be the best answer because it provides the same result which much less code. Less code, better code.

Dec 12, 2020 at 5:32

If you don’t want to change the color of the svg programmatically, this is the best and easiest solution. Thank you!

Jul 30, 2021 at 13:10

Problem I see is, if we need may different colors. Its will increase the size of project & slower the page loading. But SVG’s are normally small in size. In my case its not a problem to add few images. But this is a good answer. Thanks!

Sep 22, 2021 at 16:44

If you want to change the color dynamically:

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

30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Dec 4, 2020 at 16:56
Mártin Alcalá Mártin Alcalá
4,828 1 1 gold badge 7 7 silver badges 13 13 bronze badges
This is how icons (SVGs) from font-awesome do it. Works great.
Jun 14, 2021 at 13:45
Also you may have to change stroke attributes to stroke=»currentColor» .
Sep 29, 2021 at 21:16
It doesn’t work if SVG is saved as a file and displayed with tag.
Dec 27, 2021 at 12:55
How are you including the SVG, inline or using an img tag? Please include in your answer.
Jan 12, 2022 at 17:29
Should add that it only works if you are using the svg inline in the html.
Apr 23, 2022 at 13:17

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 , or using 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.

#time-3-icon < fill: green; >.my-svg-alternate < display: none; >.no-svg .my-svg-alternate

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

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 isn’t any 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

Then you can change the color of your inlined element:

#time-3-icon

30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Mar 7, 2014 at 14:39
helderdarocha helderdarocha
23.2k 4 4 gold badges 50 50 silver badges 65 65 bronze badges
You cannot style embedded object SVGs from the hosting document.
Nov 11, 2018 at 4:27

@JavierRey you could inject the styling into the object tag’s contents via javascript. But you’re right that it does not apply if you just add it to the hosting document’s stylesheet.

Dec 31, 2018 at 11:21
I’m using the solution from @manish-menaria and it works perfectly.
Mar 1, 2019 at 12:51
Accepted answer should be changed to: stackoverflow.com/a/53336754/467240
Jan 12, 2020 at 20:27

There is a way to do it, just give the svg fill=»currentColor» property, than it will get color from CSS color assigned to it (font color). See this answer stackoverflow.com/a/65147574/8230784

Apr 27, 2021 at 2:15

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 Adobe Illustrator

So, via CSS you can overwrite the path fill value:

path

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

path

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

 
TEXT WITH SVG  

30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Apr 3, 2018 at 10:05
Biskrem Muhammad Biskrem Muhammad
4,159 3 3 gold badges 31 31 silver badges 38 38 bronze badges

It’s a great and awesome solution in a simple way, I’ve tried the way, and it’s working for me. Thank you.

Aug 19, 2022 at 21:23
yes, I know now, use the fill in path of SVG, not in svg itself. thankyou!
Sep 9, 2022 at 2:07

Solution 1 — Edit SVG to point to the currentColor

Then you can control the color of the stroke and the fill from your CSS content:

• Simple and uses conventional supported CSS.

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

Solution 2 — CSS mask property

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

• 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 :

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

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


Desired color is known in advance.
External image

30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Aug 7, 2021 at 18:21

24.7k 10 10 gold badges 62 62 silver badges 76 76 bronze badges
On Solution 3 pros and cons; it might be worth adding that using multiple filters on complex SVG images have a huge negative impact on performance. And should be used sparingly if at all.
Apr 21, 2022 at 13:46
The C style /* */ is the only valid comment character sequence in CSS. Otherwise, the consequence is likely silently ignored CSS content. A CSS validator will report an error: " 7 Parse Error // Or any color of your choice. width: 20px "
Jan 12 at 19:05
Thanks @PeterMortensen !! That's what happens when you edit your code on Stackoverflow instead of the code editor .
Jan 14 at 19:44
How can I like this multiple times! This was it. If the original color isn't black you really need to first convert to black by prefixing with 'brightness(0) saturate(100%)' Was really helpful
Aug 17 at 7:23
I added a test page - to color SVG via Filter settings:
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Mar 1, 2018 at 11:42

Yonatan Ayalon Yonatan Ayalon

1,977 18 18 silver badges 19 19 bronze badges
Thanks, you just save me from myself. .custom-disabled > svg did just the job I need to disabled icon.
Mar 18, 2018 at 10:29
This answer helped me to change the color for image on hover and to convert the hex color to CSS filter I found following online hex-color to CSS filter converters. angel-rs.github.io/css-color-filter-generator isotropic.co/tool/hex-color-to-css-filter
Oct 2 at 15:30
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%) >>
Note - SVG masks are not supported in Internet Explorer browsers
answered Jun 19, 2019 at 14:15

121k 58 58 gold badges 312 312 silver badges 405 405 bronze badges

Thanks a lot, @vsync this is just the best hack around for what I need.

Jun 17, 2020 at 12:45
This is great. However with this approach, we use the img alt field, for accessibility. Any idea on how to bring that back? Thanks!
Sep 26, 2022 at 11:57

@Will59 - use the ARIA rules:

Sep 26, 2022 at 14:03
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 content 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.
But 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.
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Apr 16, 2015 at 14:55

Felix Hagspiel Felix Hagspiel

2,664 2 2 gold badges 30 30 silver badges 45 45 bronze badges

It also messes up screen readers. See "Death to Icon Fonts" by Seren Davies

Mar 31, 2017 at 20:55
Icon fonts are not bad for SEO. Not understanding how SEO works is what is bad for SEO. Learn about Section 508, ADA, and WCAG, and then you'll understand how to use font icons even better based on do's and don'ts. The video you referenced has been viewed 8500 times with 111 likes. You take this as religion?
Aug 2, 2022 at 15:35
You can try to color it with this css 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
answered Aug 6, 2020 at 13:03

612 5 5 silver badges 20 20 bronze badges
To change the color of an SVG element, I have found out a way while inspecting the Google search box search icon below:
.search_icon
I have used a 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.
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Feb 24, 2021 at 18:59

Sarang Kakkoth Sarang Kakkoth

411 4 4 silver badges 9 9 bronze badges
This was the best answer. Wrapping the svg in a span or div and applying fill: currentColor; to it is the key.
Mar 18, 2021 at 2:06

Can't believe no one else mentioned this. This is THE answer.

Apr 26 at 11:59

To be clear, it doesn't need to be wrapped in a span , almost any element works as a wrapper.

Apr 26 at 12:05
To simply change the color of the SVG file:
Go to the SVG file and under styles, mention the color in fill:
.cls-1 
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Apr 30, 2018 at 10:42

Sethu Sathyan Sethu Sathyan

187 1 1 silver badge 4 4 bronze badges

Already suggested by this answer

May 12, 2020 at 5:26
Target the path within the 'svg' tag:
You can do it inline, like:
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Feb 15, 2019 at 13:50

Uzair Khan Uzair Khan

2,842 7 7 gold badges 30 30 silver badges 48 48 bronze badges
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 the SVG part
change color of path
replace src with the modified SVG image as an 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.
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Apr 28, 2015 at 12:14

209 2 2 silver badges 6 6 bronze badges
By the way: If you are a RoR developer, you can add a new method for the sass precompiler which can do the job too. This is much better because you will have the base64 encoded, correct colored image in your compiled css file. No JS needed anymore! Maybe I could provide the code I have written, have to talk to the CTO.
Jul 17, 2015 at 7:01
+1 for providing a solution, rather than saying it can't be done. This answer is also relevant: stackoverflow.com/questions/11978995/…
Nov 27, 2017 at 18:59

Method 1 The easy and effect way: Open your .svg file with any text editor

  
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Jul 16, 2020 at 16:58

7,207 47 47 silver badges 40 40 bronze badges
2022 Web Component answer
This (7 line) native Web Component (JSWC) loads external content, and injects it into the DOM.
Full source code:
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 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() ) < // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML shadowRoot.innerHTML = await (await fetch(src)).text() // append optional Elements from inside after parsed shadowRoot.append(. this.querySelectorAll("[shadowRoot]")) // if "replaceWith" attribute // then replace with loaded content // childNodes instead of children to include #textNodes also this.hasAttribute("replaceWith") && this.replaceWith(. shadowRoot.childNodes) > >)
    
answered Feb 4, 2022 at 13:09

Danny '365CSI' Engelman Danny '365CSI' Engelman

17.4k 2 2 gold badges 33 33 silver badges 52 52 bronze badges
Wow this is quick, easy and has zero implementation problems (in comparison to other solutions, given my project characteristics).
Mar 17, 2022 at 19:06

Jan 12 at 19:27
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 tags. It will not work with tags loading .svg files.
:root < fill: gray; >.hidden < display: none; >svg
answered Jan 16, 2022 at 11:13

2,101 25 25 silver badges 19 19 bronze badges
Here the fast and furious way 🙂
body < background-color: #DEFF05; >svg < width: 30%; height: auto; >svg path
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Feb 5, 2021 at 7:26

Ali Besharati Ali Besharati

938 12 12 silver badges 25 25 bronze badges

why vote down !? this work well you can see it in the demo

Feb 18, 2021 at 10:56
Your answer explains nothing in contrast with others: stackoverflow.com/a/20720935/3795597 stackoverflow.com/a/30419873/3795597 stackoverflow.com/a/69397734/3795597 and countless others. It only works because you embed the svg in the main document.
Jul 21, 2022 at 16:00
For example, in your HTML:
$("#struct1").css("fill", ""); 
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Aug 27, 2019 at 7:18

91 1 1 silver badge 1 1 bronze badge
This only works if you include the SVG file inline in the HTML. I've edited your answer to make this clear.
Oct 31, 2019 at 14:48
Check out this code. It works.
CSS
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges

answered Nov 19, 2022 at 9:51

Amit Bodaliya Amit Bodaliya

128 2 2 silver badges 4 4 bronze badges

is this the new standazrd? admittedly, the 2020 answer looks convoluted.

Jan 8 at 1:08

Why is the CSS part syntax highlighted like that?

Jan 12 at 20:21
I found it a bit clumsy, but it is definitely a working way to dynamically change the color of an SVG included with tag.
In the SVG file, you can add CSS content the following way:
There you can use @media rules, with which the SVG can look outside itself for contextual circumstances. There's an aspect-ratio media feature that applies to the SVG box (e.g., the tag). You can create different contexts for the SVG by stretching the SVG box a little bit.
This way you can also make the favicon the same SVG that appears on the website, but with a different color. (In this case, no other SVG boxes should be square-shaped.)
/* img stretched horizontally (if SVG is square-shaped) */ @media (min-aspect-ratio: 1000/999) < path < fill: blue; >> /* img stretched vertically (if SVG is square-shaped) */ @media (max-aspect-ratio: 999/1000) < path < fill: green; >> /* img with exact sizes */ @media (aspect-ratio: 86/74) < path < fill: red; >> /* favicon with light browser theme */ @media (aspect-ratio: 1/1) and (prefers-color-scheme: light) < path < fill: black; >> /* favicon with dark browser theme */ @media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) < path < fill: white; >> 
One very important thing
The SVG must contain viewBox information, so that the stretching does not affect the graphics. Example:
Изменение цвета svg при наведении

 Смена цвета картинки (SVG) и ссылки (буквы) при наведении курсора мыши
Здравствуйте, я никогда до этого не работал с svg. У меня есть ссылка <a.
Изменение цвета при наведении
Добрый вечер! Изучаю html+css. Дошел до практики и столкнулся со следующей проблемой: Как.

 Изменение цвета текста при наведении
нужно чтоб при наведении в область меннялся цвет области и цвет некоторого текста

 Изменение цвета иконки при наведении
Подскажите, какими наиболее лучшими способами (по кросс-браузерности и кросс-платформенности).

1586 / 796 / 362

Регистрация: 01.02.2019

Сообщений: 1,047
Vektoralgor, увы, но с svg, представленным как изображение(а не как html), цвет менять не получиться, так что есть два варианта: 
1. Сделать два варианта svg и подставлять их под background-image(от тега img всё равно придётся отказаться) 
2. Использовать svg в html-разметке "как есть" и тогда всё можно будет делать через css:
1 2 3 4 5 6 7
button class="Close"> p class="textClose">Закрыть/p> ="0 0 14 14" xmlns="http://www.w3.org/2000/svg" class="cross"> ="M13 1L1 13" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> ="M1 1L13 13" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> /svg> /button>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
body { margin: 0; background: green; } .Close { position: absolute; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 12vmin; height: 4vmin; right: 3vw; top: 3vh; background: transparent; color: white; border: none; font-family: Akrobat; font-size: 3vmin; color: #FFFFFF; } .textClose { margin: 0 0.5vw 0 0; } .cross { width: 2vmin; height: 2vmin; stroke: currentColor; } .Close:hover { color: #E6443B; transform: scale(1.2); } .Close:focus { outline: none; color: #E6443B; }
Как изменить цвет svg
Изменим цвет svg картинки двумя способами: сначала используем свойство fill , затем mask-image .
Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill
Цвет svg картинки изменяется с помощью CSS свойства fill — заливки.
Если svg в вставлено в HTML в виде тега img , то нужно добавить следующий js-код:
$("img.img-svg").each(function () < var $img = $(this); var imgClass = $img.attr("class"); var imgURL = $img.attr("src"); $.get(imgURL, function (data) < var $svg = $(data).find("svg"); if (typeof imgClass !== "undefined") < $svg = $svg.attr("class", imgClass + " replaced-svg"); >$svg = $svg.removeAttr("xmlns:a"); if (!$svg.attr("viewBox") && $svg.attr("height") && $svg.attr("width")) < $svg.attr("viewBox", "0 0 " + $svg.attr("height") + " " + $svg.attr("width")) >$img.replaceWith($svg); >, "xml"); >);
В данном примере мы используем класс img-svg , который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg.
Изображение было в виде тега img :

Изображение стало inline svg :

Теперь можем изменить цвет нашей svg картинки, используя свойство fill , как в первом примере.

Какие ещё свойства можно применить к svg картинке
.img-svg path, .img-svg polygon < fill-opacity: 0.5; /* прозрачность заливки */ stroke: #ff6c00; /* цвет обводки */ stroke-width: 10px; /* толщина обводки */ stroke-opacity: 0.8; /* прозрачность обводки */ >
Это далеко не полный перечень свойств, которые можно использовать для работы с svg, это лишь самые часто используемые.

Второй способ. Реализуем с помощью свойства mask-image
В HTML создадим два элемента: div и ссылку:
Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет:
.link < width: 30px; height: 26px; background-color: #000; display: block; mask-image: url("img/youtube.svg"); >.div < height: 55px; width: 62px; background-color: #000; mask-image: url("img/youtube.svg"); >
Пробуем изменить цвет:
Полезные ссылки

Как вставить SVG на сайт.
Анимация SVG.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:

JavaScript: Работа с Массивами
Наличие Динамически Добавленного Элемента
Стилизация Input File
Предзагрузка Картинок - Предварительная Загрузка Изображений на JavaScript
Стилизация Скролла
События Формы

Как поменять цвет svg?

Было бы лучше, если бы вы приложили код файла этой иконки, чтобы на Вашем примере можно было показать решение.
но что делать, если мне нужна она белого цвета
Открыть svg-файл с помощью графического редактора или редактора кода и изменить цвет
Можно как то изменить цвет ?
Можно. В основном, цвет SVG-элементов задаётся через атрибут/свойство "fill" , иногда через атрибут/свойство "stroke". В зависимости от типа фигуры.
Повторюсь, что если приложите код файла иконки, смогу показать решение на Вашем примере.
Update 
Вот Вам код svg-файла с белым цветом значка
А вот он же, но закодированный в Base64 (в котором Вы предоставили пример)
data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=
Читать:
Как быстро объединить ячейки в excel горячие клавиши