v1.2 · 21 иконка · Иконочный шрифт

Иконки российских сервисов в шрифте

Как Font Awesome, только для российских платформ. Подключите одну строку CSS и используйте иконки VK, Яндекса, Авито, Ozon, Rutube и других через <span>-теги.

Смотреть все иконки Скачать шрифт
<link rel="stylesheet" href="ruicons.css">
21
Иконок в наборе
13
Платформ и сервисов
8
Цветных вариантов
CSS
Без JavaScript
Иконки

Все 21 иконка набора

Нажмите на иконку, чтобы скопировать HTML-код. Цветные варианты используют встроенные цвета бренда через font-palette.

Новое в v1.2 — 4 новые иконки
Яндекс Еда NEW
Яндекс Видео NEW
Яндекс Диск NEW
Яндекс Маркет NEW
Алиса
\f000 · icon-alisa
📋 Копировать HTML
Авито
\f001 · icon-avito
📋 Копировать HTML
Авито
\f002 · icon-avito-cvet
🎨 Цветной
📋 Копировать HTML
Дзен
\f003 · icon-dzen
📋 Копировать HTML
Max
\f004 · icon-max
📋 Копировать HTML
Одноклассники
\f005 · icon-odnoklas
📋 Копировать HTML
Ozon
\f006 · icon-ozon
📋 Копировать HTML
Ozon
\f007 · icon-ozon-cvet
🎨 Цветной
📋 Копировать HTML
Rutube
\f008 · icon-rutube
📋 Копировать HTML
Rutube
\f009 · icon-rutube-cvet
🎨 Цветной
📋 Копировать HTML
ВКонтакте
\f00a · icon-vk
📋 Копировать HTML
VK Видео
\f00b · icon-vkvideo
📋 Копировать HTML
VK Видео
\f00c · icon-vkvideo-cvet
🎨 Цветной
📋 Копировать HTML
Wildberries
\f00d · icon-wb
📋 Копировать HTML
Wildberries
\f00e · icon-wb-cvet
🎨 Цветной
📋 Копировать HTML
Яндекс
\f00f · icon-ya
📋 Копировать HTML
Яндекс Браузер
\f010 · icon-yab
📋 Копировать HTML
Яндекс Еда
\f011 · icon-eda-cvet
🎨 ЦветнойNEW
📋 Копировать HTML
Яндекс Видео
\f012 · icon-yavideo-cvet
🎨 ЦветнойNEW
📋 Копировать HTML
Яндекс Диск
\f013 · icon-yadisk
NEW
📋 Копировать HTML
Яндекс Маркет
\f014 · icon-yamarket-cvet
🎨 ЦветнойNEW
📋 Копировать 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 "./fonts/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
\f011  icon-eda-cvet        new
\f012  icon-yavideo-cvet   new
\f013  icon-yadisk         new
\f014  icon-yamarket-cvet  new
Установка

Установка за 3 шага

Скачайте архив — внутри готовые файлы шрифта и CSS. Добавьте их в проект и подключите одной строкой.

Скачать ruicons-1.2.zip

В архиве: ruicons.woff2 · ruicons.woff · ruicons.ttf · ruicons.otf · ruicons.css

1

Распакуйте архив и скопируйте файлы в проект

Поместите файлы шрифта и CSS в удобную папку, например fonts/ruicons/

your-project/
├── fonts/
│   └── ruicons/
│       ├── ruicons.css
│       ├── ruicons.woff2
│       ├── ruicons.woff
│       ├── ruicons.ttf
│       └── ruicons.otf
└── index.html
2

Подключите CSS в HTML-файле

Добавьте ссылку на ruicons.css внутри <head> вашей страницы:

<head>
  <!-- Ваши другие стили -->
  <link rel="stylesheet" href="fonts/ruicons/ruicons.css">
</head>

Или импортируйте в вашем CSS-файле:

@import "fonts/ruicons/ruicons.css";
3

Используйте иконки в HTML

Добавьте класс ri к тегу <span> и вставьте нужный символ. Для цветных иконок добавьте класс palette0:

<!-- Монохромная иконка -->
<span class="ri"></span>  <!-- VK -->

<!-- Цветная иконка -->
<span class="ri palette0"></span>  <!-- Авито цвет -->

<!-- Размер через CSS -->
<span class="ri" style="font-size: 32px"></span>  <!-- Яндекс -->