Иконки на Тильде: свой набор SVG вместо стандартных

Тильда иконка в блоках выбирается из встроенного каталога: несколько сотен готовых пиктограмм на любой блок с полем «Иконка». Для сайта с фирменным стилем этого обычно мало: у клиента есть гайдлайн, готовый набор пиктограмм из Figma или логотип-паттерн, и вставлять вместо них дефолтную стрелку или галочку из каталога Тильды не вариант. Разбираю, где на Тильде можно поставить собственную SVG-иконку штатными средствами, как подготовить файл, чтобы он не размылся и не потерял управляемость по цвету, и в какой момент проще отдать это разработчику.

Зачем менять стандартные иконки Тильды на свои SVG

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

Вторая причина чисто техническая. SVG - векторный формат, он одинаково чётко выглядит и на обычном экране, и на ретине, весит меньше растровой картинки сопоставимого качества и позволяет менять цвет через CSS одним правилом вместо того, чтобы хранить в медиатеке отдельный PNG под каждый цвет и под hover-состояние.

Где в Тильде можно поставить свою иконку

Поле «Иконка» встречается в большинстве блоков, где есть повторяющиеся элементы с картинкой и подписью: «Иконки и текст», «Шаги», карточки услуг, некоторые варианты меню и форм. При клике по такому полю открывается каталог готовых пиктограмм, но рядом с ним обычно есть кнопка загрузки собственного изображения, то есть штатная возможность заменить встроенную иконку на свою уже есть, каталог не единственный источник картинки для этого поля.

Если нужен более гибкий контроль, а не просто картинка вместо картинки, есть ещё два штатных пути: элемент «Код» в Zero Block или блок T123 с HTML-версткой на всю секцию, куда можно вставить инлайн-SVG и стилизовать его через классы, и отдельное поле «Иконка сайта» в настройках SEO, отвечающее за favicon во вкладке браузера, оно никак не связано с иконками внутри блоков.

Как подготовить SVG для Тильды

Перед загрузкой файла в Тильду стоит привести его в порядок, иначе вылезут проблемы с размером и цветом уже после публикации.

• Используйте viewBox вместо жёстко прописанных width и height на корневом теге <svg> - тогда иконка будет масштабироваться под контейнер блока, а не растягиваться с искажением пропорций.
• Прогоните файл через SVGO или встроенный оптимизатор в Figma при экспорте: экспорт из Illustrator и Sketch часто тянет за собой лишние группы, id и метаданные редактора, из-за которых файл весит в разы больше нужного.
• Для одноцветных иконок замените жёстко заданный fill="#000000" на fill="currentColor", если планируете менять цвет через CSS, а не через отдельные файлы под каждый цвет.
• Держите иконку на квадратном канвасе без лишних отступов внутри - так она ровно ляжет в сетку блока рядом с остальными.
• Не встраивайте в SVG растровые изображения через <image> - тогда файл теряет смысл как вектор и выглядит так же размыто, как обычный PNG.

Три способа заменить иконки в Тильде на свои

Способ 1. Загрузка своего файла в поле иконки блока

Самый быстрый вариант для карточек услуг, шагов или преимуществ. В настройках блока кликаете по полю «Иконка», вместо выбора картинки из каталога нажимаете загрузку своего файла и подгружаете SVG или PNG. Из ограничений: цвет уже загруженной иконки через настройки блока не меняется, если файл не подготовлен с currentColor и не встроен инлайн, - для растровых файлов и для SVG, вставленных через обычное поле-картинку, придётся заранее подготовить отдельные версии под обычное состояние и под hover, если он нужен.

Способ 2. Инлайн-SVG через HTML-блок или элемент «Код» в Zero Block

Этот путь даёт полный контроль над цветом, hover-эффектами и адаптивностью. Вставляете код иконки прямо в разметку:

<a href="#" class="icon-custom">
  <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
    <path d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
  </svg>
</a>

Цвет и переход при наведении задаются классом в настройках сайта или прямо в элементе «Код»:

.icon-custom {
  color: #1a1a1a;
  transition: color .2s ease;
}
.icon-custom:hover {
  color: #ff5a1f;
}

Если одна и та же иконка повторяется на десятках карточек, css-правило для класса удобнее один раз добавить в настройках сайта, в разделе со вставкой кода в head, а не дублировать стиль в каждом отдельном элементе «Код».

Способ 3. Своя иконка сайта в настройках SEO

Это отдельная история от иконок внутри блоков - речь про значок во вкладке браузера и при сохранении сайта в закладки. Он задаётся в настройках сайта, в разделе SEO, полем «Иконка сайта»: загружаете квадратное изображение, а Тильда сама подгоняет его под нужные размеры для разных устройств.

Типичные проблемы с SVG-иконками на Тильде

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

Когда стоит заказать доработку иконок разработчику

Часть задач руками через интерфейс Тильды решается быстро: заменить иконку в паре карточек, поправить размер, перекрасить один элемент. Такая точечная правка обычно укладывается в стоимость простого кастомного скрипта для Tilda, от 3 000 ₽.

Отдельная история - когда иконок много, они генерируются из фида товаров или CRM, у каждой должно быть несколько состояний (обычное, hover, disabled, активное в фильтре), и всё это нужно синхронизировать с остальной вёрсткой блока без ручного дублирования кода на каждой странице. В таких случаях быстрее и надёжнее сразу заказать услуги по кастомной доработке Тильды, где иконки, стили и логика собираются в одном месте, а не размазаны по десяткам элементов «Код».

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Можно ли вообще использовать свои SVG вместо стандартных иконок Тильды?

Да. В большинстве блоков с полем «Иконка» рядом с каталогом есть кнопка загрузки собственного файла, а для полного контроля над цветом и hover-эффектами код иконки можно вставить напрямую через HTML-блок или элемент «Код» в Zero Block.

Как поменять цвет SVG-иконки на Тильде через CSS?

Надёжно это работает только для инлайн-SVG, вставленного через код: в самом файле цвет заливки задаётся как fill="currentColor", а управляется свойством color в CSS-правиле для класса-обёртки. Для иконки, загруженной как обычная картинка в поле блока, цвет через настройки блока не меняется - под другой цвет нужен отдельный файл.

Почему загруженная SVG-иконка выглядит размытой или вообще не показывается?

Чаще всего дело в жёстко прописанных width и height в файле без viewBox, из-за чего браузер масштабирует картинку некорректно, либо в том, что вместо вектора случайно загрузили растровый PNG небольшого размера. Реже помогает банальная очистка кэша браузера после замены файла в медиатеке.

Где взять качественные SVG-иконки для сайта на Тильде?

Для типовых пиктограмм подойдут открытые библиотеки вроде Feather Icons, Phosphor Icons или Material Symbols - они уже оптимизированы и легко перекрашиваются через currentColor. Если нужен набор под конкретный фирменный стиль, такие иконки обычно рисует дизайнер под гайдлайн бренда, а не собираются из готовых библиотек.