Иконки для сайта — скачать бесплатно в SVG и PNG

У каждой есть SVG с currentColor — цвет задаётся из CSS, поэтому тёмная тема и состояние при наведении не требуют новых файлов, — а также PNG до 512 px, готовый React-компонент и код для вставки. Бесплатно, в том числе для коммерческих сайтов.

Какие иконки брать для сайта

Иконки на сайте живут рядом с текстом и элементами управления, поэтому важнее всего единая сетка и толщина линий. Наборы «Интерфейс» (линейные), «Интерфейс Solid» (с заливкой) и «Интерфейс Duotone» нарисованы на одной сетке 24×24 с линией 1,5 px: их можно смешивать — линейные для обычного состояния, залитые для активного пункта меню, двухцветные для акцентов. Для тематических разделов — доставка, оплата, контакты — есть «Покупки», «Финансы», «Связь» и «Карты и навигация» в том же линейном стиле.

Для лендингов и промостраниц, где иконка становится иллюстрацией блока преимуществ, подойдут плоские цветные и 3D-иконки — их вставляют как PNG или WebP размером 128–256 px.

Как вставить SVG-иконку на сайт

Способа три, и у каждого своё место:

• Код прямо в HTML. Скопируйте SVG-код со страницы иконки и вставьте в разметку. Иконка станет частью документа: её можно стилизовать через CSS, анимировать и менять цвет по наведению. Лучший вариант для 5–20 иконок интерфейса.
• Файл через img. Скачайте SVG и подключите как картинку: <img src="/icons/search.svg" width="24" height="24" alt="">. Просто и кэшируется браузером, но перекрасить через CSS уже нельзя — цвет придётся задать в файле, для этого есть перекраска SVG.
• Спрайт. Соберите все иконки сайта в один файл инструментом «SVG-спрайт» и выводите их через <use href="/sprite.svg#search">. Один запрос вместо десятков, цвет по-прежнему через currentColor. Оптимально для больших проектов.

Для React скопируйте иконку сразу как компонент — кнопка есть на каждой странице иконки; для Vue и Svelte подойдёт обычный SVG-код. Перед выкладкой прогоните файлы через оптимизатор SVG: он убирает служебный мусор редакторов и уменьшает вес на 30–60 %.

Размер и вес

Одна линейная иконка в SVG весит 300–800 байт, набор из 30 иконок — меньше одного среднего JPEG. В PNG иконка для места 24 px должна быть 48 px, чтобы оставаться чёткой на экранах с высокой плотностью пикселей; в размере 16 px берите иконки, рассчитанные на мелкий масштаб, — с заливкой и без тонких деталей. Для favicon сайта скачайте ICO или соберите полный комплект — от favicon.ico до иконок для iOS и Android — в генераторе favicon.

Иконки для типовых элементов сайта

Меню и навигация — меню, поиск, главная, стрелка; личный кабинет — пользователь, настройки, выход; магазин — корзина, избранное, оплата, доставка; контакты — телефон, почта, адрес; действия — скачать, галочка, закрыть, добавить. Всё это есть в разделе «Интерфейс» — там же иконки состояний, уведомлений и форм.