Иконки с icons8.com

Илья Кондитеров — Mon, 14 Mar 2016 10:56:49 +0300

Открываем нужную иконку (https://icons8.com/web-app/529/contacts), выбираем нужный цвет.
Смотрим код элемента (в нашем случае иконки).
Копируем тег svg, например:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50">
<path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 42.875 8.625 A 1.0001 1.0001 0 0 0 42.78125 8.65625 A 1.0001 1.0001 0 0 0 42.15625 9.125 L 21.71875 40.8125 L 7.65625 28.125 A 1.0001 1.0001 0 1 0 6.34375 29.59375 L 21.25 43.09375 A 1.0001 1.0001 0 0 0 22.75 42.875 L 43.84375 10.1875 A 1.0001 1.0001 0 0 0 42.875 8.625 z" color="#000" overflow="visible" enable-background="accumulate" font-family="Bitstream Vera Sans"></path>
</svg>

Вставляем в файл test.svg
Файл test.svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg width="256px" height="256px" viewBox="0 0 50 50">
<path d="M30.933,32.528c-0.146-1.612-0.09-2.737-0.09-4.21c0.73-0.383,2.038-2.825,2.259-4.888c0.574-0.047,1.479-0.607,1.744-2.818 c0.143-1.187-0.425-1.855-0.771-2.065c0.934-2.809,2.874-11.499-3.588-12.397c-0.665-1.168-2.368-1.759-4.581-1.759 c-8.854,0.163-9.922,6.686-7.981,14.156c-0.345,0.21-0.913,0.878-0.771,2.065c0.266,2.211,1.17,2.771,1.744,2.818 c0.22,2.062,1.58,4.505,2.312,4.888c0,1.473,0.055,2.598-0.091,4.21C19.367,37.238,7.546,35.916,7,45h38 C44.455,35.916,32.685,37.238,30.933,32.528z"></path>
</svg>

Получаем векторную иконку.

Для цветных это работает точно так-же.

Блог: заметки с тегом иконки

Иконки с icons8.com