Что лучше использовать: шрифт SVG или спрайт?

Для иконок: спрайт SVG.

Преимущества спрайта SVG над шрифтом SVG:

• Доступность: Иконки, отрисованные через <svg>, лучше распознаются скринридерами.
• Стилизация: Проще стилизовать отдельные части иконки (например, разные цвета в одном символе).
• Выравнивание: Менее подвержены проблемам с базовой линией текста и выравниванием.
• Отказоустойчивость: Не зависят от загрузки шрифта; если SVG-файл недоступен, иконки просто не отобразятся, не портя текст.
• Производительность: Спрайт может быть кеширован браузером.
• Отсутствие проблем с лигатурами: Не конфликтует с обычным текстом.

Шрифты SVG были популярны, но сейчас устарели для иконок. Они имели плохую поддержку анимации и стилизации по сравнению с <svg>. Для текста по-прежнему используются обычные веб-шрифты (WOFF, WOFF2).

<!-- Пример использования спрайта SVG -->
<svg aria-hidden="true">
  <use href="#icon-home"></use>
</svg>