Представляем Ionicons! 1300 бесплатных иконок для любого сайта. Никакой настройки не требуется.

Время от времени, когда собираешь вайб, доходишь до момента, когда всё работает, но выглядит «уродливо». Обычные кнопки без иконок, неотличимые друг от друга пункты меню или непонятные призывы к действию. Я уже просил своих агентов решить эти проблемы раньше, и обычно они ставят npm-пакет, который тащит за собой целый набор компонентов только ради одной простой лупы.

Ionicons — это коллекция из 1300 иконок для веб-приложений, созданная командой Ionic Framework. Они бывают трёх видов: заливка, контур и острые края, что позволяет выбрать, как выделить те или иные элементы. Внедряются они через веб-компоненты, а значит нужно просто подключить два скрипта внизу вашего html-файла, а дальше можно обращаться к иконкам как к любому другому html-элементу. Вот и всё! Ничего устанавливать не нужно, никаких npm-пакетов скачивать не нужно, никакой сборки не нужно.

Здесь есть стандартный набор иконок для элементов интерфейса, медиа, покупок и соцсетей. Также найдутся иконки для путешествий, общения, доступности и логотипов брендов. Эти иконки распространяются по лицензии MIT, так что они бесплатны как для личного, так и для коммерческого использования и не требуют указания авторства. Изначально эти веб-компоненты разрабатывались для мобильного фреймворка Ionic, но использовать их можно в любом проекте, независимо от стека (HTML, React, Vue и так далее).

1Как добавить Ionicons на сайт

Скопируйте и вставьте следующие две строчки в ваш HTML-файл прямо перед тегом </body>. Вот и всё! Каждая иконка будет загружаться лениво, как маленький SVG, и даже не пойдёт в сеть, пока пользователь не долистает до неё.

<script type="module" src="https://esm.sh/ionicons@latest/loader"></script>
<script nomodule src="https://esm.sh/ionicons@latest/loader"></script>

Используйте любую иконку с помощью тега <ion-icon></ion-icon>. Посмотрите список всех 1300 доступных иконок на ionicons.com. Просто кликните на любую иконку, чтобы скопировать её название.

<ion-icon name="heart"></ion-icon>
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart-sharp"></ion-icon>

Меняйте цвет и размер любой иконки с помощью простого CSS. Разработчики рекомендуют использовать значения, кратные 8, например 16, 32, 64, чтобы иконки выглядели чётко на всех устройствах.