Этот метод не требует подключения сторонних библиотек, шрифтов или скриптов․ Иконки встраиваются прямо в код страницы в формате SVG (Base64) или как инлайн-SVG․ Это гарантирует минимальное влияние на скорость загрузки (PageSpeed)․

Используем семантический список <ul> с классами для стилизации:

<ul class="h__social">
 <li><a href="" class="whatsapp" aria-label="WhatsApp"></a></li>
 <li><a href="" class="telegram" aria-label="Telegram"></a></li>
 <li><a href="" class="vk" aria-label="ВКонтакте"></a></li>
 <li><a href="" class="youtube" aria-label="YouTube"></a></li>
 <li><a href="" class="ok" aria-label="Одноклассники"></a></li>
 <li><a href="" class="zen" aria-label="Дзен"></a></li>
 <li><a href="*" class="rss" aria-label="RSS"></a></li>
</ul>

CSS-стили (Flexbox + Base64 SVG)

Ниже приведен базовый CSS․ Обратите внимание: свойство background-image содержит закодированные SVG-иконки․ В реальном проекте рекомендуется вынести SVG в отдельные файлы или использовать CSS-переменные для цветов․

․h__social {
 margin-top: 6px;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 list-style: none;
 justify-content: flex-start; /* или center /
 gap: 12px; / отступ между иконками */
 padding: 0;
}

․h__social li a {
 display: block;
 width: 32px;
 height: 32px;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 transition: opacity 0․3s, transform 0․3s;
}

․h__social li a:hover {
 opacity: 0․7;
 transform: scale(1․1);
}

/* Примеры фонов через Base64 (укорочено для примера) */
․whatsapp { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzI1RDM2NiIgZD0iTTE3LjQ3MiAxOS40NzJjLS4zNjQtLjA5Ni0xLjYzMS0uNjQzLTIuMzktMS4zOTEtLjc2LS43NDctMS4yNDItMS41NjMtMS40NDQtMS43OTQuMTk5LS4yMzMuMzctLjQ2Ni41MjQtLjY0My4xNTQtLjE3Ni4yMDgtLjM0NC4xNzYtLjUyNC0uMDMxLS4xNzYtLjA4NS0uMzQ0LS4xMzktLjUyNC0uNTQzLTEuNzktMS40NjQtMy4xNDYtMy40NzMtMy45MTMtLjM4Ny0uMzg3LS43NzQtLjc3NC0xLjE2MS0xLjE2MS0uMzg3LS4zODctLjc3NC0uNzczLTEuMTYxLTEuMTYxLS43NzQtLjc3NC0xLjU0OC0xLjU0OC0yLjMyOC0yLjMyOHoiLz48L3N2Zz4="); }
․telegram { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzAwODhDQyIgZD0iTTEyIDJDNi40NzcgMiAyIDYuNDc3IDIgMTJzNC40NzcgMTAgMTAgMTAgMTAtNC40NzcgMTAtMTBTMTcuNTIzIDIgMTIgMnp2MjBsOC01LjMzM0wxMiAyMlYyem0tMSAxN2wtNS0xLjMzM0w3IDE2LjY2N1Y5LjMzM0wxOSAxM2wtNyA0LjY2N1YxOXoiLz48L3N2Zz4="); }
․vk { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzQ2ODBDRCIgZD0iTTEyIDJDNi40NzcgMiAyIDYuNDc3IDIgMTJzNC40NzcgMTAgMTAgMTAgMTAtNC40NzcgMTAtMTBTMTcuNTIzIDIgMTIgMnp2MjBsOC01LjMzM0wxMiAyMlYyem0tMSAxN2wtNS0xLjMzM0w3IDE2LjY2N1Y5LjMzM0wxOSAxM2wtNyA0LjY2N1YxOXoiLz48L3N2Zz4="); }
/* ․․․ аналогично для youtube, ok, zen, rss ․․․ */

Совет: Для продакшена лучше использовать SVG-спрайты (тег <symbol> и <use>)․ Это позволяет менять цвет иконок через CSS (fill: currentColor) без перекодировки в Base64․

Способ 2: Иконочные шрифты (Font Awesome, Boxicons, Iconify)

Популярный, но немного устаревающий подход․ Подключается один файл шрифта, а иконки вставляются через теги <i> или <span> с классами․

Пример с Font Awesome 6 (через CDN)

<!-- В <head> -->
<link rel="stylesheet" href="https://cdnjs․cloudflare․com/ajax/libs/font-awesome/6․5․1/css/all․min․css" integrity="" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- В теле страницы -->
<div class="social-icons">
 <a href="" class="social-link" aria-label="Telegram" target="_blank" rel="noopener">
 <i class="fa-brands fa-telegram"></i>
 </a>
 <a href="" class="social-link" aria-label="VK" target="_blank" rel="noopener">
 <i class="fa-brands fa-vk"></i>
 </a>
 <a href="" class="social-link" aria-label="YouTube" target="_blank" rel="noopener">
 <i class="fa-brands fa-youtube"></i>
 </a>
</div>

Минусы метода:

• Загружается весь файл шрифта (100+ КБ), даже если используете 3-4 иконки․
• Сложнее кастомизировать уникальные формы (например, брендовые иконки российских соцсетей: Дзен, РуТуб, Яндекс)․
• Могут конфликтовать с другими шрифтами․

Способ 3: Готовые виджеты и конструкторы (Без кода)

Идеально для CMS (WordPress, Bitrix, Modx) и конструкторов (Tilda, Wix, Рег․Сайт, 1C-UMI, Nicepage, Vigbo)․

Основные сервисы и инструменты:

1. Плагины для WordPress: Social Icons Widget by WPZOOM, Simple Social Icons, Elementor (виджет Social Icons)․ Устанавливаются через админку: Плагины → Добавить новый → Поиск → Установить → Активировать․ Далее перетаскиваете виджет в сайдбар или футер․
2. Конструкторы сайтов (Tilda, Wix, Рег․Сайт): Используйте встроенные блоки «Соцсети» или «Меню»․ В Рег․Сайте есть удобный модуль: Элементы → Соцсети → Перетащить на страницу → Указать ссылки․
3. Специализированные сервисы виджетов: Elfsight, Getsitecontrol, ShareThis․ Позволяют настроить дизайн (круглые/квадратные, цвет, анимацию) и получить готовый JS-код для вставки․

<div id="social-widget-container"></div>
<script src="https://cdn․example-widget․com/social․js" data-id="*" async></script>

Способ 4: Кнопки «Поделиться» (Share Buttons)

Отличаются от простых ссылок на профили: они позволяют посетителю поделиться текущей страницей в своей ленте․

• Яндекс․Поделиться (share․yandex․ru): Настройте внешний вид, выберите сети (ВК, Telegram, Одноклассники, WhatsApp, Viber, Почта), скопируйте код․
• Pluso / Share42 / AddThis: Альтернативы с разным набором сетей и счетчиками кликов․

Важно: Для работы счетчиков и корректного репоста на странице должны быть настроены Open Graph теги (og:title, og:description, og:image, og:url)․

Способ 5: Инлайн SVG (Inline SVG), Современный стандарт

Пример реализации через SVG-спрайт (Symbol Sprite)

В начале <body> (скрытый контейнер):

<svg style="display: none;" aria-hidden="true">
 <symbol id="icon-telegram" viewBox="0 0 24 24">
 <path fill="currentColor" d="M12 2C6․477 2 2 6․477 2 12s4․477 10 10 10 10-4․477 10-10S17․523 2 12 2zm5․171 15․804l-4․822-1․402c-․363-․106-․594-․399-․594-․752v-3․903c0-․353;231-․646․594-․752l4․822-1․402c․593-․172 1․115․315 1․007․906l-․416 2․276c-․07․383-․39․684-․794․684h-2․39v3․903c0 ․353-․231․646-․594․752l-2․178․634c-․593․172-1․115-․315-1․007-․906l․416-2․276c․07-․383․39-․684․794-․684h2․39v-3․903c0-․353․231-․646․594-․752l2․178-․634c․593-․172 1․115․315 1․007․906l-․416 2․276c․07;383․39․684․794․684h2․39c․404 0 ․724․301․794․684l-․416 2․276c-․108․591-․626 1․078-1․007․906z"/>
 </symbol>
 <symbol id="icon-vk" viewBox="0 0 24 24">․․․</symbol>
 <symbol id="icon-youtube" viewBox="0 0 24 24">․․․</symbol>
</svg>

В месте вывода иконок:

<ul class="social-list">
 <li>
 <a href="" class="social-link" aria-label="Telegram" target="_blank" rel="noopener">
 <svg class="social-icon"><use xlink:href="#icon-telegram"></use></svg>
 </a>
 </li>
 <li>
 <a href="" class="social-link" aria-label="VK" target="_blank" rel="noopener">
 <svg class="social-icon"><use xlink:href="#icon-vk"></use></svg>
 </a>
 </li>
</ul>

CSS для стилизации:

․social-list {
 display: flex;
 gap: 16px;
 list-style: none;
 padding: 0;
}
;social-link {
 display: flex;
 color: #333; /* Цвет иконки наследуется от color /
 transition: color 0․3s, transform 0․3s;
}
․social-link:hover {
 color: #0088cc; / Брендовый цвет Telegram при наведении */
 transform: translateY(-2px);
}
․social-icon {
 width: 24px;
 height: 24px;
 flex-shrink: 0;
}

Где найти качественные исходники иконок (2026)

Не рисуйте иконки сами и не качайте с картинок в Google (низкое качество, авторские права)․ Используйте официальные бренд-буки или проверенные библиотеки:

Чек-лист: Ошибки, которых стоит избегать

1. Отсутствие aria-label или title․ Скринридеры прочитают просто «Ссылка»․ Всегда подписывайте: aria-label="Наш Telegram"․
2. Ссылки без target="_blank" rel="noopener noreferrer"․ Открывайте соцсети в новой вкладке, не уводите пользователя с сайта․
3. Использование PNG/JPG․ На ретине они размыты; Только SVG или иконочные шрифты․
4. Небрендовые цвета․ Иконка Telegram должна быть синей (#0088cc), VK — синей (#4680CD), YouTube — красной (#FF0000)․ Серые иконки снижают CTR․
5. Слишком мелкие тап-таргеты․ Минимальная область клика 44×44 px (рекомендация Google/Apple)․ Иконка 24px + padding 10px․
6. Битые ссылки․ Регулярно проверяйте, что профили существуют и ссылки ведут именно на ваш профиль, а не на главную соцсети․

Специфика популярных CMS и конструкторов

WordPress (Gutenberg / Block Editor)

• Стандартный блок: «Иконки социальных сетей» (Social Icons)․
• Плагины: Social Media Share Buttons & Social Sharing Icons (для шаринга), Menu Social Icons (для меню)․

Bitrix (1С-Битрикс)

• Компонент: «Социальные сервисы: значки» (socialservices․icons)․
• Настройка в ․parameters․php компонента или через визуальный редактор․

Tilda Publishing

• Блок ME601 «Социальные сети» (Меню) или блоки из категории «Социальные»․
• В настройках блока просто вставляете ссылки — иконки подтягиваются автоматически․

Рег․Сайт (Reg․ru)

• В редакторе: кнопка «Элементы» → «Соцсети»․ Перетаскиваете на страницу, кликаете по элементу → «Настройки» → вписываете URL профилей․

1C-UMI

• Модуль «Социальные сети» в панели управления․ Указываете ссылки, выбираете набор иконок, вставляете макрос %social_icons% в шаблон․

Главное правило: иконки должны быть векторными, доступными (a11y) и вести на реальные профили․ Регулярно аудитируйте футер и хедер — битая ссылка на несуществующий Instagram (заблокирован в РФ) или заброшенный паблик ВК вредит репутации больше, чем отсутствие иконки․

Статья актуализирована на ․ Примеры кода адаптированы под современные стандарты верстки․