Рисованная от руки стрелка делает с интерфейсом то, чего не умеет ни один геометрический указатель из стандартного UI-кита: добавляет характер. Она говорит пользователю «здесь работал человек, а не конвейер». Но рисовать четыре десятка стрелок в векторе, вылизывая каждый изгиб пера в Figma или Illustrator, занятие на час-полтора, которого у дизайнера в дедлайне просто нет.

К счастью, дизайнер Денеш (Denes) из Let's WP в своё время сделал эту работу за нас. Он собрал набор из 44 рисованных SVG-стрелок в едином, лаконичном стиле, без привязки к конкретной дизайн-системе, без вычурности, без лишнего веса. Набор бесплатен для коммерческого и личного использования: бери и вставляй в макет, меняй цвет и толщину, масштабируй без потери качества.

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

💡 Быстрый обзор:

• Скачайте ZIP-архив с 44 SVG-стрелками с сайта Let's WP (или зеркала)
• Откройте файл в Figma, Inkscape или Illustrator и настройте обводку под свою палитру
• Вставьте в макет, презентацию или пост, масштабирование свободное, без потери чёткости
• Используйте в коммерческих проектах без атрибуции

Что внутри набора

Архив содержит 44 отдельных SVG-файла, каждый со своим характером изгиба и типом наконечника. Вот что вы найдёте, распаковав zip:

• Прямые стрелки вправо и влево, классические указатели с разной формой наконечника (острая, скруглённая, двойная). Базовый инструмент для связи блоков на лендинге и в презентации.
• Дуговые и изогнутые, для обводки групп элементов, визуального акцента на области экрана и указания нелинейных связей в схемах.
• Пунктирные и штриховые, идеальны для пошаговых инструкций, user flow и блок-схем. Пунктир читается как «путь», штриховка, как «альтернативный маршрут».
• Тонкие линии с аккуратным пером и жирные мазки, первые хороши для минималистичных UI и вайрфреймов, вторые работают как выразительный акцент на промо-странице.
• Петляющие росчерки и декоративные элементы, для хидеров, разделителей секций и оформления постов в соцсетях.

Все файлы в SVG. Это значит, что обводка не развёрнута в кривые, вы можете менять толщину (stroke-width) и цвет (stroke) как в графическом редакторе, так и прямо в коде. При любом масштабировании качество не теряется.

Набор распространяется свободно: разрешено коммерческое использование на сайтах клиентов, в презентациях и полиграфии. Атрибуция не требуется, но приветствуется. Автор, Денеш, дизайнер и создатель блога Let's WP.

Где пригодятся рисованные стрелки

Рукописный стиль решает одну конкретную задачу: смягчает геометрическую жёсткость интерфейса. Там, где стандартная Material Design-стрелка выглядит слишком стерильно и безлико, рисованная добавляет «человеческое» касание. Вот пять типовых сценариев.

Лендинги и промо-страницы. Стрелка направляет взгляд к CTA-кнопке, связывает блок «проблема → решение», акцентирует оффер. Рукописный стиль снижает визуальный шаблонизм, страница выглядит менее конвейерной, а значит, вызывает больше доверия.

Презентации и питч-деки. Вектор вставляется в Google Slides, PowerPoint и Keynote без потери чёткости. Стрелками связывают блоки на слайде, показывают последовательность или иерархию, получается чисто и не отвлекает от сути.

Схемы и инфографика. Пунктирные и штриховые варианты, готовый визуальный язык для блок-схем, mind maps и user flow. Читатель понимает направление без дополнительных пояснений.

Оформление постов в соцсетях. Стрелки-росчерки работают как разделители и акценты в каруселях Instagram, шапках Twitter и обложках статей. Добавляют динамики плоской картинке.

UI-дизайн и вайрфреймы. При прототипировании рисованные указатели помогают обозначить взаимодействие: куда нажать, что куда ведёт, как связаны экраны. Стиль намеренно «черновой», заказчик видит структуру, а не финальный дизайн.

Как редактировать SVG-стрелки

Набор поставляется в SVG, поэтому доступен любой редактор векторной графики. Три варианта, по нарастанию сложности.

Figma, бесплатно, браузер. Перетащите SVG-файл на холст, стрелка появится как векторный объект. Выделите её и меняйте Stroke (толщина и цвет обводки) в правой панели. Масштабирование свободное. Идеально, если вы уже работаете в Figma над макетом и не хотите переключаться между инструментами.

Inkscape, бесплатно, десктоп. Мощный SVG-редактор с открытым кодом. Откройте файл, нажмите Ctrl+Shift+F, панель «Заливка и обводка». Здесь доступны: цвет заливки и обводки, стиль штриха (сплошной, пунктир, штрихпунктир), маркеры начала и конца линии. Inkscape поддерживает пакетную обработку через CLI, удобно, если нужно перекрасить сразу все 44 файла в корпоративные цвета.

Adobe Illustrator, платно, десктоп. Профессиональный инструмент. Импортируйте SVG, разгруппируйте при необходимости и работайте с палитрой Stroke и Appearance. Доступны градиентные обводки, кисти и эффекты, но для простых стрелок это, как правило, избыточно.

Быстрая смена цвета через код

Если нужно встроить стрелку прямо в вёрстку как инлайн-SVG, цвет меняется одним атрибутом:

1
<svg width="100" height="40" viewBox="0 0 100 40">
2
  <path d="M10,20 L80,20 L70,10 M80,20 L70,30"
3
        stroke="#FF6B35" stroke-width="2" fill="none"/>
4
</svg>

Замените #FF6B35 на свой цвет, и стрелка впишется в любую палитру.

Видео: основы SVG для начинающих

Если вы ни разу не работали с векторной графикой, начните с этого туториала. Автор наглядно объясняет: что такое SVG, как создавать и редактировать векторные фигуры, как применять стили и анимацию.

Похожие бесплатные наборы векторных стрелок

44 стрелки, хороший старт, но иногда проекту нужно разнообразие. Вот пять проверенных источников с качественными рисованными стрелками в SVG.

• Hand Drawn Arrows на SVG Repo, коллекция из 200+ SVG-стрелок в разных стилях: от минималистичных до декоративных. Все под MIT-лицензией, можно использовать в коммерческих проектах без ограничений. Ищите по запросу «hand drawn arrows» на svgrepo.com.

• Arrow Icons от Flaticon, более 1 800 иконок-стрелок в SVG и PNG. Доступны рисованные, контурные, flat и градиентные варианты. Бесплатно с атрибуцией, либо по подписке без неё: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows на Vecteezy, десятки тысяч векторных стрелок от разных авторов. Фильтр по лицензии: выбирайте «Free» и смотрите, требует ли конкретный набор атрибуции: vecteezy.com.

• Arrow Sketch на Freepik, огромная коллекция рисованных стрелок в векторе и PNG. Бесплатно с атрибуцией (ссылка на Freepik), доступны премиум-наборы без атрибуции: freepik.com.

• Зеркало набора от Bypeople, если основной источник (Let's WP) недоступен, те же 44 стрелки можно забрать через Bypeople: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Частые вопросы

Можно ли использовать эти стрелки в коммерческих проектах?

Да. Набор от Let's WP распространяется по свободной лицензии: разрешено коммерческое и личное использование, включая сайты клиентов, презентации, полиграфию и цифровые продукты. Атрибуция не требуется. Стрелки, это векторный графический ресурс, а не программный код: вы можете вставлять их в макет, редактировать цвет и толщину обводки, но не перепродавать как отдельный набор стрелок.

В каком формате файлы и чем их открыть?

Формат, SVG (Scalable Vector Graphics). Открывается любым векторным редактором: Figma (браузер, бесплатно), Inkscape (десктоп, бесплатно), Adobe Illustrator (десктоп, платно), Vectornator (iPad), CorelDRAW. SVG также можно открыть как текстовый файл в любом редакторе кода и редактировать разметку напрямую. Для быстрого просмотра без редактора перетащите SVG-файл в окно браузера, он отрендерится как обычное изображение.

Чем рисованные стрелки лучше обычных геометрических?

Рисованная стрелка добавляет интерфейсу «человечности». Геометрическая из стандартного UI-кита сообщает «это интерфейс», а рисованная, «за этим интерфейсом стоит человек». В маркетинговых лендингах, презентациях и образовательных материалах это повышает вовлечённость: глазу есть за что зацепиться. С точки зрения доступности разницы нет, обе одинаково игнорируются скринридерами без aria-label, который вы добавляете самостоятельно.

Что делать, если оригинальный сайт Let's WP недоступен?

Оригинальный сайт letswp.io теперь доступен через letswp.justifiedgrid.com. Набор также есть на площадках-агрегаторах: Bypeople и Armory (visualsoldiers.com). Если ни одно зеркало не работает, воспользуйтесь альтернативами из списка выше: SVG Repo и Flaticon суммарно дают более 2 000 рисованных стрелок.

Подходят ли эти стрелки для печати?

Да. SVG, векторный формат, он масштабируется без потери качества на любое разрешение: от мелкой иконки до широкоформатного баннера. Перед отправкой в типографию убедитесь, что цветовая модель переведена в CMYK (в Figma и Inkscape это делается через экспорт в PDF с последующей конвертацией). Толщина обводки в 1-2 px на экране превращается в волосную линию при печати, увеличьте stroke-width до 3-5 px.

Есть ли ограничения на изменение самих стрелок?

Никаких. SVG-файлы в наборе не «запечены», обводка не развёрнута в кривые. Вы свободно меняете цвет, толщину, стиль штриха (сплошной, пунктирный), добавляете заливку и градиенты. Единственное ограничение лицензии: нельзя перепродавать отредактированный набор как отдельный продукт-клон.

Брать или не брать: итоговый расклад по стрелкам Let's WP

Если вы верстаете лендинг, собираете презентацию или оформляете пост, 44 стрелки от Денеша закрывают большинство типовых сценариев. Рукописный стиль универсален: он не конфликтует ни с Material Design, ни с минимализмом, ни с брутализмом.

Для быстрых задач, берите и вставляйте как есть. Для кастомного дизайна, меняйте цвет и толщину обводки за минуту в Figma или Inkscape. А если 44 вариантов не хватило, список альтернатив выше даст вам ещё пару тысяч стрелок.

Скачивайте, экспериментируйте и делайте интерфейсы живее.