← Все новости·2026-09-10·3 мин чтения

Heroicons: бесплатные SVG-иконки от авторов Tailwind CSS

Heroicons — бесплатная коллекция SVG-иконок от команды Tailwind CSS. Зайди на heroicons.com, скопируй код любой иконки, вставь в проект — ничего устанавливать не нужно. Работает в любом веб-проекте.

iconssvguidesignvibetailwind

Большинство вайб-проектов проходят такую фазу: на каждой кнопке написан текст, и всё выглядит как прототип. Не потому что идея плохая — просто с иконками всегда возникает какая-то возня. Или говоришь агенту нарисовать (и он рисует немного не то), или долго ищешь библиотеку которая подойдёт.

Heroicons — коллекция от команды Tailwind CSS. Те самые люди, которые сделали CSS-фреймворк, которым пользуется большинство современных веб-проектов. Иконки нарисованы вручную, доступны в двух стилях: контурные и закрашенные. Бесплатно, MIT-лицензия, атрибуция не нужна.

Исходники

tailwindlabs/heroicons

★ 23 792JavaScript

Открыть на GitHub →

Для этого есть сайт: 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: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.

Начать →

▌ Гайды по теме

▸Нарисуй и построй: навык /design в Claude Code

ЕА