Иконки
Все 17 иконок набора
Нажмите на иконку, чтобы скопировать HTML-код. Цветные варианты используют встроенные цвета бренда через font-palette.
Алиса
· icon-alisa
📋 Копировать HTML
Авито
· icon-avito
📋 Копировать HTML
Авито
· icon-avito-cvet
🎨 Цветной
📋 Копировать HTML
Дзен
· icon-dzen
📋 Копировать HTML
Max
· icon-max
📋 Копировать HTML
Одноклассники
· icon-odnoklas
📋 Копировать HTML
Ozon
· icon-ozon
📋 Копировать HTML
Ozon
· icon-ozon-cvet
🎨 Цветной
📋 Копировать HTML
Rutube
· icon-rutube
📋 Копировать HTML
Rutube
· icon-rutube-cvet
🎨 Цветной
📋 Копировать HTML
ВКонтакте
· icon-vk
📋 Копировать HTML
VK Видео
· icon-vkvideo
📋 Копировать HTML
VK Видео
· icon-vkvideo-cvet
🎨 Цветной
📋 Копировать HTML
Wildberries
· icon-wb
📋 Копировать HTML
Wildberries
· icon-wb-cvet
🎨 Цветной
📋 Копировать HTML
Яндекс
· icon-ya
📋 Копировать HTML
Яндекс Браузер
· icon-yab
📋 Копировать HTML
Размеры
Масштабирование через font-size
Иконки масштабируются как обычный текст. Задавайте размер через font-size в CSS.
14px
20px
32px
48px
72px
100px
Документация
Как использовать
RU Icons работает точно так же, как Font Awesome. Подключите CSS и добавляйте иконки через <span>-теги.
Базовое использование
<!-- Монохромная --> <span class="ri"></span> <!-- Цветная (font-palette) --> <span class="ri palette0"></span> <!-- Рядом с текстом --> <button> <span class="ri"></span> Открыть Авито </button>
Размер и цвет
/* Через font-size */ .icon-big { font-size: 2rem; } /* Монохромный цвет */ .icon-red { color: #fc3c00; /* Яндекс */ } /* Своя палитра */ @font-palette-values --my { font-family: "ruicons"; base-palette: 0; override-colors: 0 #f00; }
React / Vue
// Импорт CSS import "ruicons/ruicons.css"; // React JSX function ShareVK() { return ( <a href="#"> <span className="ri palette0" style={{fontSize:'24px'}} ></span> Поделиться VK </a> ); }
Таблица иконок
/* Коды Unicode */ \f000 icon-alisa \f001 icon-avito \f002 icon-avito-cvet \f003 icon-dzen \f004 icon-max \f005 icon-odnoklas \f006 icon-ozon \f007 icon-ozon-cvet \f008 icon-rutube \f009 icon-rutube-cvet \f00a icon-vk \f00b icon-vkvideo \f00c icon-vkvideo-cvet \f00d icon-wb \f00e icon-wb-cvet \f00f icon-ya \f010 icon-yab
Установка
Начните за 30 секунд
Подключите шрифт одним из трёх способов и сразу используйте иконки.
1
CDN — самый быстрый способ
<link rel="stylesheet" href="https://cdn.ruicons.ru/1.0/ruicons.min.css">
2
npm / yarn
# npm npm install ruicons # yarn yarn add ruicons
3
Скачать ZIP-архив
TTF, WOFF, WOFF2, OTF и CSS в одном файле — разместите на своём сервере.