Намальована від руки стрілка робить з інтерфейсом те, чого не вміє жоден геометричний вказівник зі стандартного 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 варіантів не вистачило, список альтернатив вище дасть вам ще пару тисяч стрілок.

Завантажуйте, експериментуйте та робіть інтерфейси живішими.