Есть отдельные svg файлы (иконки), необходимо стилями подключить эти иконки в нужное место html используя css.
Вы можете пройти, например, на: https://icomoon.io/
И выбрать необходимые иконки. Скачав svg спрайт и css.
Подключать методом:
<svg class="icon">
<use xlink:href="путь до svg файла/icon.svg#icon-one"></use>
</svg>
Это указывает на саму иконку в файле:
#icon-one
Пример
<symbol id="icon-one" viewBox="0 0 32 32">
<title>pen</title>
<path d="M31.818 9.122l-8.939-8.939c-0.292-0.292-0.676-0.226-0.855 0.146l-1.199 2.497 8.35 8.35 2.497-1.199c0.372-0.178 0.438-0.563 0.146-0.855z"></path>
<path d="M19.231 4.231l-8.231 0.686c-0.547 0.068-1.002 0.184-1.159 0.899-0 0.001-0 0.001-0.001 0.002-2.232 10.721-9.84 21.183-9.84 21.183l1.793 1.793 8.5-8.5c-0.187-0.392-0.293-0.83-0.293-1.293 0-1.657 1.343-3 3-3s3 1.343 3 3-1.343 3-3 3c-0.463 0-0.902-0.105-1.293-0.293l-8.5 8.5 1.793 1.793c0 0 10.462-7.608 21.183-9.84 0.001-0 0.001-0 0.002-0.001 0.714-0.157 0.831-0.612 0.898-1.159l0.686-8.231-8.538-8.539z"></path>
</symbol>
Вы можете посмотреть этот пример подключения.
Или использовать различные варианты вставок:
Можно использовать тег img:
<img src="icon.svg" alt="icon">
Можно использовать элемент object:
<object data="image.svg" type="image/svg+xml" />
или iframe:
<iframe src="image.svg"></iframe>
5 симпатий
Мне нравится Linearicons набор svg. Не только стилем, но и понятным отображением, как подключить:
Linearicons
https://linearicons.com/free
Free v1.0.0 (170 icons)
Нажимаем на иконку и открывается окно. Там есть все. Просто и понятно.
В платном варианте (59 долларов) 1001 иконок.
Подключается, как там описано или, как в предыдущем примере, например:
<svg class="icon">
<use xlink:href="путь до svg файла/icon.svg#icon-one"></use>
</svg>
6 симпатий