Знакомьтесь: Heroicons — бесплатные SVG-иконки от команды Tailwind CSS.
Heroicons — набор красиво сделанных иконок от создателей Tailwind CSS. Вы можете зайти на heroicons.com и скопировать SVG-код любой нужной иконки без установки. Подходит для любого веб-приложения.
Часто в приложениях, написанных в вайб-кодинге, мы видим стадию, когда всё выглядит просто как каркас с текстовыми подписями на кнопках. Потому что идеи обычно хорошие, а вот с иконками разобраться сложно. Либо приходится просить агента что-то нарисовать, и получается криво, либо тратишь слишком много времени на поиск подходящей библиотеки.
Heroicons создаёт команда Tailwind CSS. Это те же люди, что сделали utility-first CSS-фреймворк, который используется почти в каждом веб-приложении. Эти иконки — SVG, сделанные вручную. Есть два стиля — outline и solid. Оба доступны бесплатно по лицензии MIT. Больше ничего.
Исходники
tailwindlabs/heroicons
★ 23 792JavaScript
Заглянуть можно на их сайт — heroicons.com. На сайте можно посмотреть все иконки, найти нужную через поиск, и как только нашли то, что искали. Кликните по SVG-иконке — код скопируется в буфер обмена. Вот и всё. Дальше можно отправить его агенту так: «Используй этот SVG как иконку в кнопке поиска в шапке». Агент сразу поймёт и вставит иконку куда нужно.
Как пользоваться Heroicons без установки
Как написано у них в readme: «Быстрее всего использовать эти иконки — просто скопировать исходник нужной иконки с heroicons.com и вставить его прямо в HTML». Ничего не нужно ни через npm, ни через пакеты, ни даже через сборку. Просто скопируйте SVG-код и вставьте его туда, где нужно. Масштабировать иконку можно через CSS, как любой другой элемент.
«Зайди на heroicons.com и найди контурную версию иконки поиска. Скопируй SVG и добавь слева в поле поиска. Размер: 20px, цвет: текущий цвет текста». Или проще: «Используй Heroicons для всех иконок в этом приложении. Бери контурный стиль».
Бесплатные SVG-иконки для коммерческих проектов
Все Heroicons распространяются по лицензии MIT, а значит их можно использовать в личных проектах, проектах для клиентов, при продаже своего продукта — практически где угодно. Платить ничего не нужно, упоминать их тоже не обязательно. Причина в том, что эти иконки — базовые формы, не похожие ни на один логотип бренда. Так что проблем с авторскими правами быть не может.
Как подключить все иконки сразу
Если вы делаете крупное приложение и хотите, чтобы все решения по иконкам принимал агент, можно склонировать репозиторий. Иконки хранятся как SVG-файлы и организованы по стилям и размерам. Ваш агент может брать их из папки и сразу вставлять иконки по имени. Структура папок такая: `optimized/24/outline/` и `optimized/24/solid/` для иконок размером 24px.
git clone https://github.com/tailwindlabs/heroicons.git # контурные иконки: heroicons/optimized/24/outline/ # закрашенные: heroicons/optimized/24/solid/
Аккуратная коллекция бесплатных SVG-иконок от команды Tailwind. Смотришь и копируешь на heroicons.com — ничего устанавливать не надо. Или клонируешь и указываешь агенту папку. MIT-лицензия, два визуальных стиля, чистые геометрические формы любого размера. Агент уже знает эту коллекцию по имени — можно просто сказать «поставь heroicon на эту кнопку» и он разберётся сам.
Источник: github.com
Бесплатный курс
Хватит читать про ИИ — начни строить с ним
Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.
Начать →▌ Гайды по теме
Автор
Евгений Арсентьев
PhD · CEO, digital health
Статьи · Свежие статьи