Od ręki narysowana strzałka robi z interfejsem coś, czego nie potrafi żaden geometryczny wskaźnik ze standardowego UI-kitu: dodaje charakteru. Mówi użytkownikowi: „tu pracował człowiek, a nie taśma produkcyjna". Ale rysowanie czterdziestu strzałek w wektorze, z dopieszczaniem każdego zagięcia pióra w Figmie czy Illustratorze, to zajęcie na godzinę, półtorej, na które projektant pod presją deadline’u po prostu nie ma czasu.

Na szczęście projektant Denes z Let's WP zrobił kiedyś tę pracę za nas. Zebrał zestaw 44 ręcznie rysowanych strzałek SVG w jednym, zwięzłym stylu, bez powiązania z konkretnym systemem projektowym, bez dziwaczności, bez zbędnego balastu. Zestaw jest darmowy do użytku komercyjnego i osobistego: bierz i wstawiaj do makiety, zmieniaj kolor i grubość, skaluj bez utraty jakości.

Poniżej: co jest w archiwum, gdzie i jak stosować te strzałki, jakimi narzędziami je dostosowywać oraz skąd wziąć podobne zestawy, gdyby 44 wariantów okazało się za mało.

💡 Szybki przegląd:

• Pobierz archiwum ZIP z 44 strzałkami SVG ze strony Let's WP (lub z kopii lustrzanej)
• Otwórz plik w Figmie, Inkscape lub Illustratorze i dostosuj obrys do swojej palety
• Wstaw do makiety, prezentacji lub posta, skalowanie dowolne, bez utraty ostrości
• Używaj w projektach komercyjnych bez konieczności podawania atrybucji

Co jest w zestawie

Archiwum zawiera 44 osobne pliki SVG, każdy z własnym charakterem wygięcia i typem grotu. Oto, co Pan/Pani znajdzie po rozpakowaniu zipa:

• Proste strzałki w prawo i w lewo, klasyczne wskaźniki o różnym kształcie grotu (ostry, zaokrąglony, podwójny). Podstawowe narzędzie do łączenia bloków na landingu i w prezentacji.
• Łukowe i wygięte, do obrysowywania grup elementów, wizualnego akcentowania obszaru ekranu i oznaczania nieliniowych powiązań na schematach.
• Przerywane i kreskowane, idealne do instrukcji krok po kroku, ścieżek użytkownika (user flow) i schematów blokowych. Linia przerywana odczytywana jest jako „ścieżka", kreskowanie jako „trasa alternatywna".
• Cienkie linie z precyzyjnym piórem i grube pociągnięcia, te pierwsze są dobre do minimalistycznych UI i wireframe’ów, te drugie działają jako wyrazisty akcent na stronie promocyjnej.
• Zawijasy i elementy dekoracyjne, do nagłówków, separatorów sekcji i oprawy postów w mediach społecznościowych.

Wszystkie pliki są w SVG. Oznacza to, że obrys nie jest rozwinięty w krzywe, może Pan/Pani zmieniać grubość (stroke-width) i kolor (stroke) zarówno w edytorze graficznym, jak i bezpośrednio w kodzie. Przy każdym skalowaniu jakość nie ulega pogorszeniu.

Zestaw jest rozpowszechniany swobodnie: dozwolone jest użycie komercyjne na stronach klientów, w prezentacjach i poligrafii. Atrybucja nie jest wymagana, ale mile widziana. Autor: Denes, projektant i twórca bloga Let's WP.

Gdzie przydadzą się ręcznie rysowane strzałki

Ręcznie rysowany styl rozwiązuje jedno konkretne zadanie: łagodzi geometryczną sztywność interfejsu. Tam, gdzie standardowa strzałka Material Design wygląda zbyt sterylnie i bezosobowo, rysowana dodaje „ludzkiego" dotyku. Oto pięć typowych scenariuszy.

Landingi i strony promocyjne. Strzałka kieruje wzrok do przycisku CTA, łączy blok „problem → rozwiązanie", akcentuje ofertę. Ręcznie rysowany styl zmniejsza wizualną sztampowość, strona wygląda mniej taśmowo, a zatem budzi większe zaufanie.

Prezentacje i pitch decki. Wektor wstawia się do Google Slides, PowerPointa i Keynote bez utraty ostrości. Strzałkami łączy się bloki na slajdzie, pokazuje kolejność lub hierarchię, wychodzi czysto i nie odwraca uwagi od sedna.

Schematy i infografiki. Warianty przerywane i kreskowane to gotowy wizualny język do schematów blokowych, map myśli i ścieżek użytkownika. Czytelnik rozumie kierunek bez dodatkowych wyjaśnień.

Oprawa postów w mediach społecznościowych. Strzałki-zawijasy działają jako separatory i akcenty w karuzelach na Instagramie, nagłówkach na Twitterze i okładkach artykułów. Dodają dynamiki płaskiemu obrazkowi.

UI-design i wireframe’y. Podczas prototypowania ręcznie rysowane wskaźniki pomagają oznaczyć interakcję: gdzie kliknąć, co dokąd prowadzi, jak powiązane są ekrany. Styl jest celowo „szkicowy", klient widzi strukturę, a nie finalny projekt.

Jak edytować strzałki SVG

Zestaw dostarczany jest w SVG, więc dostępny jest każdy edytor grafiki wektorowej. Trzy opcje, według rosnącego stopnia trudności.

Figma, bezpłatnie, przeglądarka. Przeciągnij plik SVG na obszar roboczy, strzałka pojawi się jako obiekt wektorowy. Zaznacz ją i zmieniaj Stroke (grubość i kolor obrysu) w panelu po prawej stronie. Skalowanie dowolne. Idealne, jeśli pracuje Pan/Pani już w Figmie nad makietą i nie chce przełączać się między narzędziami.

Inkscape, bezpłatnie, desktop. Potężny edytor SVG o otwartym kodzie źródłowym. Otwórz plik, naciśnij Ctrl+Shift+F, panel „Wypełnienie i obrys". Dostępne są tutaj: kolor wypełnienia i obrysu, styl kreski (ciągła, przerywana, kreska-kropka), znaczniki początku i końca linii. Inkscape obsługuje przetwarzanie wsadowe przez CLI, wygodne, jeśli trzeba przemalować wszystkie 44 pliki naraz na kolory firmowe.

Adobe Illustrator, płatnie, desktop. Profesjonalne narzędzie. Importuj SVG, w razie potrzeby rozgrupuj i pracuj z paletą Stroke i Appearance. Dostępne są obrysy gradientowe, pędzle i efekty, ale dla prostych strzałek jest to z reguły nadmiarowe.

Szybka zmiana koloru przez kod

Jeśli trzeba osadzić strzałkę bezpośrednio w kodzie strony jako inline SVG, kolor zmienia się jednym atrybutem:

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>

Proszę zastąpić #FF6B35 swoim kolorem, a strzałka wpasuje się w każdą paletę.

Wideo: podstawy SVG dla początkujących

Jeśli nigdy nie pracował/a Pan/Pani z grafiką wektorową, proszę zacząć od tego tutoriala. Autor w przystępny sposób wyjaśnia: czym jest SVG, jak tworzyć i edytować figury wektorowe, jak stosować style i animację.

Podobne darmowe zestawy strzałek wektorowych

44 strzałki to dobry start, ale czasem projekt potrzebuje różnorodności. Oto pięć sprawdzonych źródeł z wysokiej jakości ręcznie rysowanymi strzałkami w SVG.

• Hand Drawn Arrows na SVG Repo, kolekcja ponad 200 strzałek SVG w różnych stylach: od minimalistycznych po dekoracyjne. Wszystkie na licencji MIT, można używać w projektach komercyjnych bez ograniczeń. Proszę szukać pod hasłem „hand drawn arrows" na svgrepo.com.

• Arrow Icons od Flaticon, ponad 1800 ikon strzałek w SVG i PNG. Dostępne są warianty rysowane, konturowe, flat i gradientowe. Bezpłatnie z atrybucją lub w subskrypcji bez niej: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows na Vecteezy, dziesiątki tysięcy strzałek wektorowych od różnych autorów. Proszę filtrować według licencji: wybrać „Free" i sprawdzić, czy konkretny zestaw wymaga atrybucji: vecteezy.com.

• Arrow Sketch na Freepik, ogromna kolekcja rysowanych strzałek w wektorze i PNG. Bezpłatnie z atrybucją (link do Freepik), dostępne są zestawy premium bez atrybucji: freepik.com.

• Kopia lustrzana zestawu od Bypeople, jeśli główne źródło (Let's WP) jest niedostępne, te same 44 strzałki można pobrać przez Bypeople: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Często zadawane pytania

Czy można używać tych strzałek w projektach komercyjnych?

Tak. Zestaw od Let's WP jest rozpowszechniany na wolnej licencji: dozwolone jest użycie komercyjne i osobiste, w tym na stronach klientów, w prezentacjach, poligrafii i produktach cyfrowych. Atrybucja nie jest wymagana. Strzałki to wektorowy zasób graficzny, a nie kod programistyczny: może je Pan/Pani wstawiać do makiety, edytować kolor i grubość obrysu, ale nie odsprzedawać jako osobny zestaw strzałek.

W jakim formacie są pliki i czym je otworzyć?

Format to SVG (Scalable Vector Graphics). Otwiera się go każdym edytorem wektorowym: Figma (przeglądarka, bezpłatnie), Inkscape (desktop, bezpłatnie), Adobe Illustrator (desktop, płatnie), Vectornator (iPad), CorelDRAW. SVG można też otworzyć jako plik tekstowy w dowolnym edytorze kodu i edytować znaczniki bezpośrednio. Do szybkiego podglądu bez edytora proszę przeciągnąć plik SVG do okna przeglądarki, wyrenderuje się jak zwykły obrazek.

Czym ręcznie rysowane strzałki są lepsze od zwykłych geometrycznych?

Ręcznie rysowana strzałka dodaje interfejsowi „ludzkiego pierwiastka". Geometryczna ze standardowego UI-kitu komunikuje „to jest interfejs", a rysowana: „za tym interfejsem stoi człowiek". W marketingowych landingach, prezentacjach i materiałach edukacyjnych zwiększa to zaangażowanie: oko ma się czego uchwycić. Z punktu widzenia dostępności nie ma różnicy, obie są tak samo ignorowane przez czytniki ekranu bez aria-label, który dodaje się samodzielnie.

Co zrobić, jeśli oryginalna strona Let's WP jest niedostępna?

Oryginalna strona letswp.io jest teraz dostępna przez letswp.justifiedgrid.com. Zestaw jest też na platformach-agregatorach: Bypeople i Armory (visualsoldiers.com). Jeśli żadna kopia lustrzana nie działa, proszę skorzystać z alternatyw z listy powyżej: SVG Repo i Flaticon dają łącznie ponad 2000 ręcznie rysowanych strzałek.

Czy te strzałki nadają się do druku?

Tak. SVG to format wektorowy, skaluje się bez utraty jakości do dowolnej rozdzielczości: od małej ikony po baner wielkoformatowy. Przed wysłaniem do drukarni proszę upewnić się, że model kolorów został przekonwertowany na CMYK (w Figmie i Inkscape robi się to przez eksport do PDF z późniejszą konwersją). Grubość obrysu 1-2 px na ekranie zamienia się w druku we włoskowatą linię, proszę zwiększyć stroke-width do 3-5 px.

Czy są ograniczenia w modyfikowaniu samych strzałek?

Żadnych. Pliki SVG w zestawie nie są „zapieczone", obrys nie jest rozwinięty w krzywe. Swobodnie zmienia Pan/Pani kolor, grubość, styl kreski (ciągła, przerywana), dodaje wypełnienie i gradienty. Jedyne ograniczenie licencji: nie można odsprzedawać zmodyfikowanego zestawu jako osobnego produktu-klonu.

Brać czy nie brać: podsumowanie dotyczące strzałek Let's WP

Jeśli składa Pan/Pani landing, przygotowuje prezentację lub oprawia post, 44 strzałki od Denesa pokrywają większość typowych scenariuszy. Ręcznie rysowany styl jest uniwersalny: nie koliduje ani z Material Design, ani z minimalizmem, ani z brutalizmem.

Do szybkich zadań proszę brać i wstawiać jak jest. Do niestandardowego designu proszę zmienić kolor i grubość obrysu w minutę w Figmie czy Inkscape. A jeśli 44 wariantów nie wystarczyło, lista alternatyw powyżej da Panu/Pani jeszcze kilka tysięcy strzałek.

Proszę pobierać, eksperymentować i czynić interfejsy żywszymi.