SVG-изображения utilities

<img src="assets/fa5/brands/html5.svg" width="50" alt=""> 
<img src="assets/fa5/brands/css3-alt.svg" width="50" alt=""> 
<img src="assets/fa5/brands/sass.svg" width="50" alt=""> 
<img src="assets/fa5/brands/js.svg" width="50" alt=""> 
<img src="assets/fa5/brands/php.svg" width="100" alt=""> 
<img src="assets/fa5/brands/git.svg" width="50" alt=""> 
<img src="assets/fa5/brands/gulp.svg" width="50" alt=""> 
<img src="assets/fa5/brands/github.svg" width="50" alt=""> 
<img src="assets/fa5/brands/google.svg" width="50" alt="">

SVG (инверсия)

<img class="filter-invert" src="assets/fa5/brands/html5.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/css3-alt.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/sass.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/js.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/php.svg" width="100" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/git.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/gulp.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/github.svg" width="50" alt=""> 
<img class="filter-invert" src="assets/fa5/brands/google.svg" width="50" alt="">

SVG (цвет)

Для закраски svg-изображения используйте css-фильтры. См. генератор filter.

<img style="filter: invert(63%) sepia(99%) saturate(654%) hue-rotate(350deg) brightness(91%) contrast(92%);" src="assets/fa5/brands/html5.svg" width="50" alt=""> 

<img style="filter: invert(73%) sepia(76%) saturate(4239%) hue-rotate(72deg) brightness(92%) contrast(91%);" src="assets/fa5/brands/css3-alt.svg" width="50" alt="">

SVG в кнопках

<button class="button button1"><img class="filter-invert mar10-r" src="assets/fa5/brands/css3-alt.svg" width="16" alt="">Кнопка</button> 
 
<button class="button button2"><img class="filter-invert mar10-r" src="assets/fa5/brands/html5.svg" width="16" alt="">Кнопка</button> 

<button class="button bg-green600 t-white hover-bg-green700 rounded20"><img class="filter-invert mar10-r" src="assets/fa5/brands/html5.svg" width="16" alt="">Кнопка</button> 

<button class="button bg-gray200 t-gray800 hover-bg-gray300 hover-bor-gray400"><img class="mar10-r" src="assets/fa5/brands/html5.svg" width="16" alt="">Кнопка</button>

SVG (как тэг)

 <div class="w50px">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
        <path fill="#E09917" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/>
    </svg>
</div>