Векторные иконки SVG — скачать бесплатно

Файл весит несколько килобайт, а цвет монохромных иконок задаётся из CSS — так удобнее всего вставлять иконки на сайт. Все 2D-иконки каталога доступны в SVG: скачайте файл, скопируйте код или готовый React-компонент прямо со страницы иконки, а несколько иконок соберите в один спрайт инструментом.

Что такое SVG-иконка

SVG — текстовый XML-файл, в котором рисунок описан координатами линий и фигур. Браузер отрисовывает его заново при каждом масштабе, поэтому иконка одинаково чёткая в 16 px на старом мониторе и в 96 px на смартфоне. Файл можно поправить в текстовом редакторе и вставить прямо в разметку.

Исходники в каталоге аккуратные: сетка 24×24 у монохромных стилей, 64×64 у плоских и изометрических, 16×16 у пиксельных. Лишние атрибуты удалены оптимизатором, а безопасность кода проверяется автоматически перед публикацией.

Когда выбирать SVG

SVG — основной формат для веб-разработки и дизайна интерфейсов:

• вёрстка сайтов и веб-приложений, где иконки меняют цвет при наведении и в тёмной теме;
• компоненты React и других фреймворков;
• макеты в Figma и других графических редакторах — вектор правится как обычная фигура;
• печать любого размера, от визитки до выставочного стенда.

Для вёрстки чаще всего нужны иконки для интерфейса сайта, стрелки и шевроны, значки почты и связи для контактов, замки и щиты для форм входа и пиктограммы техники для страниц о продукте. Базу для интерфейса даёт набор «Интерфейс UI», навигацию — набор «Стрелки», и оба скачиваются архивом ZIP.

SVG, PNG и иконочный шрифт

Вектор легче растра и гибче: один файл заменяет восемь размеров PNG, а цвет меняется одной строкой CSS. Но почта, часть офисных программ и сервисов принимают только растровые картинки — там нужен PNG с прозрачным фоном. Объёмная графика тоже не векторная: 3D-иконки выдаются в PNG и WebP.

Иконочный шрифт когда-то решал ту же задачу, но уступает SVG: он сглаживается как текст, держит только один цвет, а при сбое загрузки вместо иконок видны пустые квадраты. Сегодня он нужен в основном старым проектам.

Способы подключить SVG

Практические советы

• Цвет через CSS. У монохромных стилей — линейного, залитого, двухцветного и рисованного — обводка и заливка используют currentColor. Задайте color у родителя, и иконка перекрасится вместе с текстом.
• Не удаляйте viewBox. Размер задавайте через width и height или в em, чтобы иконка вставала вровень с текстом; без viewBox масштабирование ломается.
• Доступность. Декоративной иконке внутри кнопки с подписью добавьте aria-hidden="true". Самостоятельной иконке нужны role="img" и aria-label или вложенный элемент title.
• Производительность. Одинаковые иконки, вставленные кодом десятки раз, раздувают HTML. Соберите их в SVG-спрайт — браузер загрузит файл один раз и закэширует. После ручной правки прогоните код через оптимизатор SVG: он покажет экономию в байтах.