SVG-изображения можно вставлять непосредственно в html код, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения непосредственно в html-разметку. Хотя на самом деле есть еще один способ. И он удобный. Одна из самых сильных сторон технологии SVG - возможность манипулировать стилями изображений через css. Это особенно важно для иконок, которые обязательно захочется подсветить на hover  без использования дополнительных изображений. Чтобы иметь возможность перекрашивать SVG через css, необходимо либо вставить SVG непосредственно в html, то есть «заинлайнить» их, либо использовать отдельный файл, символьный спрайт. Спрайт также должен быть вставлен в DOM. Ни одна другая техника не позволяет получить доступ к SVG из css. Рассмотрим эти техники подробнее. Вставка SVG непосредственно в html это одновременно и самая простая и самая мощная с точки зрения кастомизации и манипуляции изображением техника. Такое изображение можно стилизовать через css, менять практически любое свойство и атрибут, даже анимировать его отдельные части. Но здесь есть ряд существенных ограничений: Если изображение большое, вся страница будет загружаться дольше Использование этой техники в js-фреймворках, даже с такими крайне мощными инструментами, как SVGR, сильно увеличивает размер js-бандла. Теряется контроль над загрузкой SVG, они перестают быть внешними изображениями. Вы не можете отдельно их хранить и кешировать, пренебречь их загрузкой на плохих соединениях и т.д. Другой способ встраивания SVG, который позволяет стилизовать изображения через css, предполагает использование спрайта, состоящего из элементов <symbol>.  Контент изображения хранится в отдельном скрытом файле и подключается в нужное место на странице через тег <use>. А если вы, как и Microsoft, не поддерживаете IE11, спрайт символов можно загружать по HTTP. К сожаление, использовать такой подход напрямую, то есть загрузить по HTTP содержимое отдельного SVG-изображения не получится, нужен именно спрайт. Вот так работать не будет: К изображениям, подключенным через спрайт, можно получить доступ через css , правда, есть ограничения. Стилям не «пробиться» через shadow-boundary, границу, за которой начинается shadow-DOM и которая описывается тегом <use>. Хорошие новости в том, что каскад продолжает работать, можно менять атрибуты fill и использовать currentColor в любом свойстве. Для большинства кейсов с иконками этого более чем достаточно: Спрайты удобны, но у них немало своих проблем, главная из которых - они плохо расширяемы. В конечном итоге спрайты разрастаются до огромных размеров и целиком подключаются на страницы ради использования одной-двух иконок. Здесь не обойтись без компромисса. Нужно решение, которое загрузит на страницу только необходимые SVG-изображения, не будет рендерить их через javascript и позволит стилизовать их через css. Таким решением может быть браузерный fetch! Нам нужен инструмент, который  Загрузит SVG-изображения в браузере через fetch и закеширует их Добавит их в символьный спрайт Предоставит API для использования загруженных изображений в произвольном участке страницы через тег <use>. Первым о таком решении задумался Chris Coyier еще в 2015 году, но оно так и не было оформлено и ждало своего дня. Сегодня этот день настал. Реализация называется Handy SVG, исходники и документация доступны на github, пакет публикуется в npm. Вам достаточно установить его: И использовать в React: Или в любом другом проекте с ванильным javascript: Никаких проблем со стилизацией не возникнет: На страницу будут загружаться только необходимые изображения, вы сможете их закешировать, а в SPA-приложениях запросы конечно же не будут отправляться дважды. Ваш спрайт не будет разрастаться и вы вообще не будете задумываться о его существовании. Конечно это решение имеет ряд ограничений. Например, почти невозможно избавиться от FONI (Flash of No Icons), состояния загрузки, при котором на странице отсутствуют иконки. Тем не менее, из всех возможных способов работы с SVG-изображениями в вебе, этот представляется наиболее удобным. Пул-реквесты приветствуются и я буду рад любому фидбеку.