Бесплатные наборы SVG-иконок для vibe-coded проектов

В любом vibes-проекте понадобятся иконки. Кнопки, навигация, индикаторы, соцсети — без них никуда. Даже не сосчитать, сколько раз я говорил «добавь иконку поиска в шапку» — и в ответ агент начинал генерировать какой-то случайный inline SVG-path по памяти. Всегда неправильный, часто очень неправильный, а иногда формально правильный, но явно сделанный человеком, который ни разу браузер в глаза не видел.

Я держу небольшую коллекцию репозиториев с иконками, которую копирую и вставляю в контекст каждого проекта. Мой агент читает README и сам разбирается с названием пакета и стилем импорта — и каждый раз всё получается. В этих четырёх наборах богатый выбор: от простых обводочных иконок до логотипов брендов и дизайн-систем на 6000+ иконок.

Этот набор вы знаете. Больше 2000 иконок в бесплатном плане — тут найдётся почти всё, что нужно для стандартных элементов интерфейса: стрелки, соцсети, покупки, коммуникации, типы файлов. Есть стили solid, regular и brand. Npm-пакет включает иконки в виде SVG-спрайтов и веб-шрифта, но мой агент предпочитает именно npm-пакет, потому что он позволяет импортировать отдельные иконки.

Форк Feather Icons, который разросся в настоящего монстра. Больше 1600 иконок, все ровно 24×24 пикселя, с обводкой 2px. Стайлгайд поразительно цельный. Каждая иконка идеально вписывается в остальные. Если хотите, чтобы интерфейс выглядел отполированным, а не сшитым из кусков, Lucide — ваш выбор по умолчанию. Отличная поддержка React, есть плагины для Figma и VS Code. Посмотреть все иконки можно здесь: lucide.dev/icons.

Больше 6000 иконок, все под лицензией MIT, все идеальные 24×24 пикселя. Коллекция большая, но всё смотрится очень слаженно. Одинаковая толщина обводки, одинаковый радиус скругления, единый стиль. Посмотреть все иконки можно здесь: tabler.io/icons. Фильтруйте по категориям и жмите, чтобы скопировать SVG или строку импорта для React. В репозитории также есть файл Figma — на случай, если агенту понадобится ещё и подизайнить.

Это не UI-иконки, это логотипы брендов. Больше 3400 SVG-логотипов технологических продуктов, соцсетей, инструментов для разработчиков и так далее. По сути, любая компания, на которую вам может понадобиться сослаться. Каждая иконка приведена к единому path с официальным цветом бренда. Идеально подходит для футеров, описания стека технологий, соцсетей или любого места, где нужен раздел вроде «сделано с помощью X». Лицензия CC0, так что об этом можно даже не думать.

1Как добавить иконки в проект

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

npm install lucide-react

npm install @tabler/icons-react

npm install @fortawesome/fontawesome-free

<img src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/github.svg" width="32" />

2Лицензии: можно ли использовать в коммерческих проектах

Все четыре набора бесплатны для коммерческого использования. Lucide — под лицензией ISC, Tabler — под MIT, Font Awesome Free — под MIT + Creative Commons (указывать авторство не нужно), а Simple Icons для SVG-файлов лицензирован под CC0 (сами логотипы брендов — товарные знаки соответствующих компаний, но файлы иконок находятся в общественном достоянии). Если планируете что-то продавать, стоит всё же заглянуть в файлы LICENSE каждого репозитория.