Синий (Приложение)
Официальный значок (иконка) ВКонтакте (VK).
Логотип VK — скачать SVG, PNG, вектор
Официальные логотипы ВКонтакте (VK) (VK) в различных форматах. Доступны белый, чёрный (монохромный) и цветной варианты. Все логотипы на прозрачном фоне.
Белый (В квадрате)
Основной логотип на прозрачном фоне для тёмных фонов.
Чёрный (В квадрате)
Монохромный чёрный логотип для светлых фонов.
Логотип с надписью (синий)
Полный логотип ВКонтакте с текстовой частью.
Логотип с надписью (белый)
Полный логотип с текстовой частью для темных фонов.
Логотип с надписью (чёрный)
Монохромный полный логотип для светлых фонов.
💡 Совет: Для использования на сайте рекомендуем SVG-формат — он масштабируется без потери качества и весит меньше PNG.
Иконки и логотипы VK — все размеры
Официальные иконки и значки ВКонтакте (VK). Выберите нужный стиль и скачайте в подходящем размере (PNG или WebP).
🔗 Favicon для вашего сайта: Скачайте официальный значок VK в удобном для вас формате.
<link rel="icon" href="/brand-assets/vk/icons/VK.svg" type="image/svg+xml"> Фирменные цвета ВКонтакте (VK) — HEX, RGB коды
Полная палитра фирменных цветов ВКонтакте (VK) с кодами HEX и RGB для копирования. Кликните на код или имя переменной для копирования.
Базовый синий VK
--vk-blue #0077FF
rgb(0, 119, 255)
hsl(212, 100%, 50%)
cmyk(100%, 53%, 0%, 0%)
Основной цвет бренда ВКонтакте. Используется для логотипов, кнопок и активных элементов.
Белый VK
--vk-white #FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)
cmyk(0%, 0%, 0%, 0%)
Основной цвет фона и светлых элементов.
Черный VK
--vk-black #000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)
cmyk(0%, 0%, 0%, 100%)
Цвет для основного текста и строгих элементов.
Серый фон VK
--vk-gray-light #EBEDF0
rgb(235, 237, 240)
hsl(216, 14%, 93%)
cmyk(2%, 1%, 0%, 6%)
Светлый фон для карточек и вторичных блоков.
Шрифт и типографика ВКонтакте (VK)
VK использует системный шрифт для нативного отображения на всех платформах. Это обеспечивает максимальную скорость загрузки и привычный вид для пользователей.
Крупный заголовок (Display)
VK мессенджер
Заголовок второго уровня (H2)
Заголовок второго уровня
Подзаголовок (Body Large)
Подзаголовок / Body Large
Обычный текст (Body Medium)
Обычный текст — Aa Бб Вв Гг 0123456789
Мелкий текст (Caption)
Мелкий текст / Caption
Размеры типографики (Design Tokens)
Кликните на значение размера (rem или px), чтобы скопировать CSS-код значения.
| Токен | Размер (rem) | Размер (px) | Пример |
|---|---|---|---|
--height-display | 2rem | 32px | Аа |
--height-headline-large | 1.75rem | 28px | Аа |
--height-headline-medium | 1.5rem | 24px | Аа |
--height-title-large | 1.25rem | 20px | Аа |
--height-body-large | 1.25rem | 20px | Аа |
--height-body-medium | 1.25rem | 20px | Аа |
--height-body-small | 1rem | 16px | Аа |
--height-label-large | 0.875rem | 14px | Аа |
UI Kit ВКонтакте (VK) — компоненты дизайн-системы
Официальные UI-компоненты из библиотеки @vkhub/vk-ui. Установите пакет через npm и используйте в React-проектах. Интерактивная документация: vkcom.github.io/VKUI
Установка VK UI
npm install @vkhub/vk-ui Быстрый старт
import '@vkhub/vk-ui/dist/styles.css';
import { MaxUI, Panel, Button } from "@vkhub/vk-ui";
const App = () => (
<MaxUI>
<Panel centeredX centeredY>
<Button>Hello world!</Button>
</Panel>
</MaxUI>
);Button (Кнопка)
Основной компонент кнопки. Поддерживает акцентный (синий) и нейтральный (темный) стили.
Шрифт в Figma: VK Sans Display (14px, SemiBold 600)
Скругление (Corner Radius): 12px
Внутренние отступы: 10px 20px
Высота (Height): 40px
Цвета в Figma: Blue (#0077FF), Dark (#000000)
Input (Поле ввода)
Текстовое поле ввода со встроенными состояниями фокуса и плейсхолдером.
Шрифт в Figma: VK Sans Text (14px, Regular 400)
Скругление (Corner Radius): 12px
Внутренние отступы: 12px 16px
Высота (Height): 44px
Граница (Stroke): 1px solid (#EDEEF2)
Switch (Переключатель)
Тумблер для включения/выключения настроек.
Размеры рамки в Figma: 52px × 32px (Скругление
Размеры ползунка: 28px × 28px (Скругление
Цвет (Active): #007AFF
Цвет (Inactive): #CCCCCC
Avatar (Аватар)
Аватар пользователя или группы круглой формы с фоллбэком на инициалы.
А
М
Г
Форма в Figma: Круг (Скругление 100%)
Стандартные размеры: 24px, 32px, 48px, 64px, 96px
Фон: Сплошной синий #0077FF
Шрифт: Bold (700)
Spinner (Загрузка)
Круговой индикатор процесса загрузки.
Размеры в Figma: 18px (Small), 28px (Medium), 40px (Large)
Толщина линии: 2px / 3px / 4px
Цвет: #007AFF (Accent Blue)
Counter (Счётчик)
Бейдж с количеством непрочитанных уведомлений.
5 99 1000+
Высота в Figma: 20px (Скругление
Фон: #FF3347 (Accent Red)
Шрифт: VK Sans Text (11px, Bold 700, Color
Внутренние отступы: 0px 6px
SearchInput (Поиск)
Поле ввода для поиска с иконкой лупы.
Скругление (Corner Radius): 12px
Высота: 40px
Внутренние отступы: 10px 14px
Фон в Figma: #EDEEF2 (Surface Ground)
Иконка: 16px (Цвет
IconButton (Иконка-кнопка)
Круглая кнопка, содержащая только иконку.
Форма в Figma: Круг (Скругление 100%)
Размер кнопки: 40px × 40px
Размер иконки: 20px
Фон по умолчанию: #EDEEF2 (или прозрачный)
Дизайн-токены и CSS-переменные VK
CSS-переменные из официальной дизайн-системы VK UI. Используйте их для создания приложений с аутентичным стилем VK.
Цветовые переменные (светлая тема)
:root {
--accent-themed: rgb(0 122 255);
--accent-red: rgb(255 48 60);
--accent-secondary: rgb(12 13 14 / 0.52);
--background-accent-positive: rgb(26 190 67);
--background-accent-attention-primary: rgb(255 147 21);
--background-accent-neutral: rgb(13 13 13);
--background-surface-primary: rgb(255 255 255);
--background-surface-secondary: rgb(240 240 240);
--background-surface-ground: rgb(237 238 242);
--background-surface-card: rgb(255 255 255);
--background-overlay: rgb(12 13 14 / 0.32);
} Градиенты
:root {
} Семейство шрифтов
:root {
--font: system-ui, -apple-system,
BlinkMacSystemFont, "Roboto",
"Apple Color Emoji", "Helvetica Neue",
sans-serif;
}Полный исходный код: github.com/VKCOM/VKUI/styles
Правила использования логотипа VK
При использовании фирменного стиля VK в сторонних проектах соблюдайте следующие рекомендации.
✅ Можно
- Использовать официальные файлы логотипа
- Размещать на контрастном фоне
- Сохранять пропорции при масштабировании
- Использовать в информационных и справочных материалах
- Указывать ссылку на официальный сайт max.ru
❌ Нельзя
- Изменять цвета, пропорции или форму логотипа
- Добавлять эффекты (тень, свечение, наклон)
- Использовать логотип как часть другого бренда
- Размещать на низкоконтрастном или пёстром фоне
- Использовать в коммерческих целях без разрешения VK
Часто задаваемые вопросы о брендбуке VK
Где скачать логотип ВКонтакте (VK) в SVG?
Скачать векторный логотип VK в формате SVG можно прямо на этой странице в разделе «Логотипы». Доступны белая, чёрная и цветная (иконка) версии.
Какой фирменный цвет ВКонтакте (VK) и его HEX код?
Основной акцентный цвет VK — синий #007AFF (RGB: 0, 122, 255). Красный акцент — #FF3347. Полная палитра с кодами доступна в разделе «Фирменные цвета» выше.
Как скопировать HEX код цвета VK?
Нажмите на карточку цвета или кнопку «Копировать» рядом с нужным HEX кодом. Код будет скопирован в буфер обмена автоматически.
Можно ли использовать логотип VK на своём сайте?
Логотип VK является зарегистрированным товарным знаком VK. Использование допускается для информационных и справочных целей с указанием правообладателя. Для коммерческого использования требуется разрешение.
На какую букву похож логотип ВКонтакте (VK)?
Логотип VK представляет собой стилизованный речевой пузырь (speech bubble) с характерным хвостиком. По форме он напоминает латинские буквы V и K.
Где взять UI Kit ВКонтакте (VK) для разработки?
Официальный UI Kit доступен на GitHub: github.com/VKCOM/VKUI. Установка: npm install @vkhub/vk-ui. Документация и примеры на vkcom.github.io/VKUI.
Какой шрифт используется в мессенджере VK?
VK использует системный шрифт: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif. Это обеспечивает нативный вид на всех платформах.
Что означает логотип ВКонтакте (VK)?
Логотип VK — это стилизованный речевой пузырь с плавными контурами, символизирующий общение и коммуникацию. Синий цвет отражает доверие, технологичность и современный подход к коммуникации.