← Все новости·2026-08-06·4 мин чтения

Iconify: 250 000+ бесплатных иконок из всех наборов в одном теге

Один script-тег — и агент получает доступ к Font Awesome, Material Design, Phosphor и 200+ другим наборам. Ищи на iconify.design, вставляй имя — готово.

iconsvibesvguidesigngithub

Каждый раз, когда прошу агента добавить иконки — он берёт тот набор, который лучше знает. Иногда норм. Но чаще это не совсем то что я имел в виду, и приходится перестраивать на ходу — а это ломает единообразие. Iconify решает проблему: за одним script-тегом лежит 250 000 иконок из 200+ разных наборов.

Работает просто: добавляешь один скрипт в <head>, потом пишешь `<iconify-icon icon="mdi:home">` там где нужна иконка. Иконки подгружаются из API Iconify по запросу — ничего скачивать, устанавливать или хранить локально не надо. Все 250 000 иконок можно поискать визуально на iconify.design и скопировать имя.

Исходники

iconify/iconify

★ 6 250TypeScript

Открыть на GitHub →

Внутри — всё что обычно ищешь: Font Awesome, Material Design Icons от Google, Phosphor Icons, Feather, Tabler Icons, Heroicons и ещё больше 200 наборов. Если нужна конкретная иконка — определённая стрелка, логотип бренда, значок погоды — она почти наверняка там есть.

Как подключить Iconify к проекту

Добавить скрипт Iconify в <head> HTML

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js"></script>

Использовать любую иконку прямо в HTML

<!-- Имена иконок ищи на iconify.design -->
<iconify-icon icon="mdi:home"></iconify-icon>
<iconify-icon icon="ph:rocket-bold"></iconify-icon>
<iconify-icon icon="fa6-solid:heart"></iconify-icon>
<iconify-icon icon="heroicons:arrow-right-20-solid"></iconify-icon>

Что сказать агенту

Добавь Iconify в проект: вставь script-тег из cdn.jsdelivr.net/npm/iconify-icon@2 в <head>, затем замени заглушки иконок на теги <iconify-icon icon="set:name">. Имена ищи на iconify.design — выбери нужную иконку и скопируй идентификатор.

Наборы иконок внутри Iconify

1Font Awesome 6 — самый распространённый набор, тысячи иконок включая логотипы брендов
2Material Design Icons (MDI) — иконочная система Google, чистая и единообразная в любом размере
3Phosphor Icons — гибкий набор с 6 вариантами толщины для каждой иконки (от thin до fill)
4Feather — минималистичные иконки с лёгким «нарисованным» ощущением, хороши для чистых интерфейсов
5Heroicons — от команды Tailwind CSS, особенно хорошо сочетаются с дизайном на Tailwind
6Tabler Icons — более 5 000 SVG иконок с MIT-лицензией, аккуратные линии и понятное именование

✓Что в итоге

250 000+ иконок из 200+ наборов за одним script-тегом. Ищешь на iconify.design, копируешь имя, говоришь агенту — и любая иконка из любого популярного набора появляется на странице мгновенно. Без файлов, без пакетов, без разнобоя в стилях.

Источник: github.com

Бесплатный курс

Хватит читать про ИИ — начни строить с ним

Бесплатный курс Claude Code: свой первый сайт, инструмент или игра — без программирования. Без апсейлов и кросс-сейлов — здесь нечего купить.

Начать →

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

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

ЕА