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

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

Как это работает? Вы подключаете тег script в свой проект, а затем можете использовать <iconify-icon icon="mdi:home"> в тех местах, где нужна иконка. Иконка будет динамически загружаться через API Iconify, так что вам не придётся ни скачивать иконки, ни устанавливать пакеты — вообще ничего. Все иконки можно найти визуально на iconify.design, так что всё, что нужно сделать — это скопировать название иконки.

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

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

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

<!-- Имена иконок ищи на 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 — выбери нужную иконку и скопируй идентификатор.

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