Изменить цвет SVG - изображения

Если бы автор вопроса привел код иконки svg, то ответ был бы более предметный и короткий. Но наверное полезно дать ответ и на более широкий круг вопросов стилизации иконок.
Есть очень полезная статья Styling SVG Content with CSS перевод,- оригинал

Для решения вашей задачи, полезен раздел статьи - Каскадирование стилей

Из этого раздела можно сделать вывод, что наивысшим приоритетом обладает внутренние стили svg.

<path style="fill:red; stroke:blue;" d="M100,100 ... />"

Чтобы устранить доминирование приоритета внутренних стилей svg необходимо:

1. Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили - fill, stroke

2. Добавить во внешней таблице стилей path{ fill:inherit; stroke:inherit; }

3. Стилизацию иконок уже делать в таблице стилей на уровне классов иконок

4. В шапку файлов *.svg иконок добавить строчку, указывающую на внешнюю таблицу стилей

   <?xml-stylesheet type="text/css" href="style.css"?>

5. Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome

Ответ #2

Для быстрого решения проблем со стилизацией иконок.
Данная техника подойдет, если нужно быстро добавить иконки в свой проект, которые можно раскрасить в любой цвет из внешнего файла CSS.
Причём иконки высокого качества, практически полный набор на все случаи.
Иконки адаптивны и не теряют качества при масштабировании, так как это иконки SVG из которых состоит символьный шрифт - Google Material Icons

Подключение шрифта:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Выбирать иконки по названиям можно здесь

Выбираем нужную иконку с именем - favorite

Подключение иконки к HTML странице:

<i class="material-icons red">favorite</i>, где

material-icons - общий класс для всех иконок
red - дополнительный класс, задающий цвет окраски иконки

Ниже пример с тремя одинаковыми иконками, которые раскрашены в разные цвета Добавлена анимация увеличения иконок при hover.

.material-icons { 
transform: scale(2); 
} 
i { 
  margin: 100px 50px 50px 80px; 
  transition: transform 1s ease-in-out; 
} 
i:hover { 
  transform: scale(10); 
} 
 
.red{color:red} 
.green{color:yellowgreen} 
.blue{color: dodgerblue}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
      rel="stylesheet">         
<i class="material-icons red">favorite</i> 
<i class="material-icons green">favorite</i>  
<i class="material-icons blue">favorite</i>

Размер иконок также можно менять, здесь удвоенный исходный размер:

.material-icons {
transform: scale(2);
}