Стилизуем svg

 О том, как создать svg-спрайт шла речь в предыдушей теме. Но когда понадобится стилизовать иконку, может появиться проблема: размеры иконки меняются без проблем, а цвет - нет. Цвет иконки определяет свойство  fill:#ffb600; 

.icon {
  width: 15px;
  height: 16px;
  fill: #ffb600;
}
 
Если иконка имеет свой собственный цвет (например, экспортирована из графического редактора), он имеет приоритет перед цветом, задаваемым в css.

Решение будет следующим:
1. Применить svg patch

svg path {
    fill: inherit;
} 
 
 2. Стилизовать не svg а use

<svg>
    <use class="icon" xlink:href="#icon-icon-feature-2">
</svg>

use.icon {
      width: 3em;
      height: 3em;
      fill: red;
}

Демо
Источник