Remix Icon: 3200+ бесплатных SVG-иконок для сайта

В моих проектах иконки для страницы встречаются часто, и обычно получается одно из двух: агент подбирает что-то случайное, что не вписывается в общий стиль, или я трачу время на поиск отдельных SVG-файлов, которые хотя бы похожи друг на друга.

Я пользуюсь одной коллекцией, к которой возвращаюсь регулярно. В ней больше 3200 нейтральных иконок в SVG-формате, все сделаны на одной сетке 24 на 24 пикселя, бесплатно и для коммерческих проектов.

Авторы описывают коллекцию как систему нейтральных символов с открытым кодом для дизайнеров и разработчиков. На практике это означает, что все иконки выглядят как единый комплект — потому что созданы по одним и тем же правилам. Каждая нарисована в двух вариантах: контурная и залитая. Просматривать и скачивать отдельные иконки можно на remixicon.com без установки чего-либо.

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

Самый простой способ получить все иконки на странице — добавить одну строку в секцию head вашего HTML-файла. После этого любая иконка появляется простым классом на элементе.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />

Имя класса строится по шаблону: ri-, затем название иконки, затем -line для контурной или -fill для залитой версии. Точные названия всех иконок есть на remixicon.com с поиском.

<i class="ri-search-line"></i>      <!-- поиск, контурная -->
<i class="ri-user-fill"></i>        <!-- профиль, залитая -->
<i class="ri-settings-3-line"></i>  <!-- настройки, контурная -->

В моей практике я даю агенту одну инструкцию на всё сразу. Например, говорю так: «Подключи набор иконок Remix Icon через CDN и поставь иконки на страницу. Для строки поиска используй ri-search-line, для профиля в шапке — ri-user-3-line, для настроек — ri-settings-3-line.» Агент читает структуру имён из CSS-файла и расставляет всё правильно.

2Бесплатные SVG-иконки для коммерческих проектов: что говорит лицензия

Авторы прямо указывают, что все иконки бесплатны для личных и коммерческих проектов. Упомянуть коллекцию в своём продукте — это то, что авторы было бы рады видеть, но они также пишут, что это не обязательно. Сейчас коллекция находится на версии 4.9.0 и активно поддерживается.