En håndtegnet pil gjør noe med et grensesnitt som ingen geometrisk peker fra et standard UI-kit kan: den tilfører karakter. Den forteller brukeren «et menneske jobbet her, ikke et samlebånd». Men å tegne fire dusin piler i vektor, finpusse hver pennkurve i Figma eller Illustrator, er en halvannen times oppgave som en designer med deadline rett og slett ikke har.

Heldigvis gjorde designeren Denes fra Let's WP en gang dette arbeidet for oss. Han satte sammen et sett med 44 håndtegnede SVG-piler i en enhetlig, konsis stil, ikke knyttet til noe bestemt designsystem, uten snirkler, uten unødvendig tyngde. Settet er gratis for kommersiell og personlig bruk: hent det og lim det inn i layouten din, endre farge og tykkelse, skaler uten kvalitetstap.

Nedenfor finner du hva arkivet inneholder, hvor og hvordan du bruker disse pilene, hvilke verktøy du kan bruke for tilpasning, og hvor du finner lignende sett hvis 44 varianter ikke er nok.

💡 Rask oversikt:

• Last ned ZIP-arkivet med 44 SVG-piler fra Let's WP-siden (eller et speil)
• Åpne filen i Figma, Inkscape eller Illustrator og juster streken slik at den matcher paletten din
• Sett inn i en layout, presentasjon eller et innlegg, skalering er fritt, uten tap av skarphet
• Bruk i kommersielle prosjekter uten kreditering

Hva settet inneholder

Arkivet inneholder 44 separate SVG-filer, hver med sin egen kurvekarakter og spisstype. Her er hva du finner etter utpakking av zip-filen:

• Rette piler mot høyre og venstre, klassiske pekere med ulike spissformer (skarpe, avrundede, doble). Grunnverktøy for å lenke blokker på en landingsside og i en presentasjon.
• Bue og kurvede, for å ramme inn grupper av elementer, visuell aksent på et skjermområde, og angi ikke-lineære forbindelser i diagrammer.
• Stiplede og skraverte, ideelle for trinnvise instruksjoner, brukerflyt og flytdiagrammer. Stiplet leses som «sti», skravering som «alternativ rute».
• Tynne linjer med pen penn og fete streker, de første er gode for minimalistisk UI og skisser, de andre fungerer som en uttrykksfull aksent på en promoside.
• Slyngede snirkler og dekorative elementer, til overskrifter, seksjonsdelere og styling av innlegg i sosiale medier.

Alle filer er i SVG. Dette betyr at streken ikke er utvidet til kurver, du kan endre tykkelsen (stroke-width) og fargen (stroke) både i et grafikkredigeringsprogram og direkte i kode. Ved enhver skalering tapes ikke kvalitet.

Settet distribueres fritt: kommersiell bruk er tillatt på kundesider, i presentasjoner og på trykk. Kreditering er ikke påkrevd, men velkommen. Forfatteren, Denes, er designer og skaper av Let's WP-bloggen.

Hvor håndtegnede piler er nyttige

Den håndskrevne stilen løser én spesifikk oppgave: den myker opp den geometriske rigiditeten i et grensesnitt. Der en standard Material Design-pil ser for steril og ansiktsløs ut, tilfører en håndtegnet en «menneskelig» touch. Her er fem typiske scenarioer.

Landingssider og promosider. En pil retter blikket mot en CTA-knapp, lenker «problem → løsning»-blokken, aksentuerer tilbudet. Håndskrevet stil reduserer visuell templatfølelse, siden ser mindre samlebåndsprodusert ut, og inspirerer derfor mer tillit.

Presentasjoner og pitch-decks. Vektoren settes inn i Google Slides, PowerPoint og Keynote uten tap av skarphet. Piler lenker blokker på et lysbilde, viser sekvens eller hierarki, det blir ryddig og distraherer ikke fra essensen.

Diagrammer og infografikk. Stiplede og skraverte varianter, et ferdig visuelt språk for flytdiagrammer, tankekart og brukerflyt. Leseren forstår retning uten ytterligere forklaringer.

Styling av innlegg i sosiale medier. Pilsnirkler fungerer som delere og aksenter i Instagram-karuseller, Twitter-headere og artikkelomslag. De tilfører dynamikk til et flatt bilde.

UI-design og skisser. Ved prototyping hjelper håndtegnede pekere med å indikere interaksjon: hvor man skal klikke, hva som fører hvor, hvordan skjermer henger sammen. Stilen er bevisst «skissepreget», klienten ser struktur, ikke endelig design.

Hvordan redigere SVG-piler

Settet leveres i SVG, så ethvert vektorredigeringsprogram er tilgjengelig. Tre alternativer, i økende kompleksitet.

Figma, gratis, nettleser. Dra SVG-filen til lerretet, pilen vises som et vektorobjekt. Velg den og endre Stroke (tykkelse og omrissfarge) i høyre panel. Skalering er fri. Ideelt hvis du allerede jobber i Figma med en layout og ikke vil bytte mellom verktøy.

Inkscape, gratis, desktop. Kraftig open-source SVG-redigerer. Åpne filen, trykk Ctrl+Shift+F, «Fyll og strek»-panelet. Her er tilgjengelig: fyll- og strekfarge, strekstil (heltrukket, stiplet, strek-prikk), start- og sluttlinjemarkører. Inkscape støtter batchprosessering via CLI, praktisk hvis du trenger å omfarge alle 44 filer samtidig i bedriftsfarger.

Adobe Illustrator, betalt, desktop. Profesjonelt verktøy. Importer SVG, del opp gruppe om nødvendig og jobb med Stroke- og Appearance-paletten. Gradientstreker, pensler og effekter er tilgjengelig, men for enkle piler er dette vanligvis overdrevent.

Rask fargeendring via kode

Hvis du trenger å bygge inn en pil direkte i markup som inline SVG, endres farge med ett attributt:

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>

Erstatt #FF6B35 med din farge, og pilen vil passe til enhver palett.

Video: SVG-grunnleggende for nybegynnere

Hvis du aldri har jobbet med vektorgrafikk, start med denne veiledningen. Forfatteren forklarer tydelig: hva SVG er, hvordan du oppretter og redigerer vektorformer, hvordan du bruker stiler og animasjon.

Lignende gratis sett med vektorpiler

44 piler, en god start, men noen ganger trenger et prosjekt variasjon. Her er fem verifiserte kilder med kvalitets håndtegnede piler i SVG.

• Hand Drawn Arrows på SVG Repo, en samling på 200+ SVG-piler i forskjellige stiler: fra minimalistisk til dekorativ. Alle under MIT-lisens, kan brukes i kommersielle prosjekter uten begrensninger. Søk etter «hand drawn arrows» på svgrepo.com.

• Arrow Icons fra Flaticon, mer enn 1 800 pilikoner i SVG og PNG. Håndtegnede, omriss-, flate og gradientvarianter er tilgjengelige. Gratis med kreditering, eller ved abonnement uten: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows på Vecteezy, titusenvis av vektorpiler fra forskjellige forfattere. Filtrer etter lisens: velg «Free» og se om et bestemt sett krever kreditering: vecteezy.com.

• Arrow Sketch på Freepik, enorm samling av håndtegnede piler i vektor og PNG. Gratis med kreditering (lenke til Freepik), premiumsett tilgjengelig uten kreditering: freepik.com.

• Speil av settet fra Bypeople, hvis hovedkilden (Let's WP) er utilgjengelig, kan de samme 44 pilene hentes via Bypeople: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Ofte stilte spørsmål

Kan disse pilene brukes i kommersielle prosjekter?

Ja. Settet fra Let's WP distribueres under en fri lisens: kommersiell og personlig bruk er tillatt, inkludert kundesider, presentasjoner, trykk og digitale produkter. Kreditering er ikke påkrevd. Piler er en vektorgrafisk ressurs, ikke programkode: du kan sette dem inn i en layout, redigere farge og strektykkelse, men ikke videreselge som et separat pilesett.

Hvilket format er filene i og hvordan åpner jeg dem?

Format, SVG (Scalable Vector Graphics). Åpnes med ethvert vektorredigeringsprogram: Figma (nettleser, gratis), Inkscape (desktop, gratis), Adobe Illustrator (desktop, betalt), Vectornator (iPad), CorelDRAW. SVG kan også åpnes som en tekstfil i et hvilket som helst koderedigeringsprogram og redigere markup direkte. For rask visning uten redigeringsprogram, dra SVG-filen inn i et nettleservindu, den vil gjengis som et vanlig bilde.

Hvorfor er håndtegnede piler bedre enn vanlige geometriske?

En håndtegnet pil tilfører «menneskelighet» til et grensesnitt. Geometrisk fra et standard UI-kit sier «dette er et grensesnitt», mens håndtegnet sier «bak dette grensesnittet er det et menneske». I markedsføringslandingssider, presentasjoner og undervisningsmateriell øker dette engasjementet: det er noe for øyet å feste seg ved. Fra et tilgjengelighetsståsted er det ingen forskjell, begge ignoreres like mye av skjermlesere uten aria-label, som du legger til selv.

Hva gjør jeg hvis den originale Let's WP-siden er utilgjengelig?

Den originale siden letswp.io er nå tilgjengelig via letswp.justifiedgrid.com. Settet finnes også på aggregatorplattformer: Bypeople og Armory (visualsoldiers.com). Hvis ingen speil fungerer, bruk alternativer fra listen over: SVG Repo og Flaticon gir til sammen mer enn 2 000 håndtegnede piler.

Egner disse pilene seg for trykk?

Ja. SVG, et vektorformat, skalerer uten kvalitetstap til enhver oppløsning: fra et lite ikon til en bredformatbanner. Før du sender til trykkeri, sørg for at fargemodellen er konvertert til CMYK (i Figma og Inkscape gjøres dette via eksport til PDF med påfølgende konvertering). En strektykkelse på 1-2 px på skjerm blir hårfin ved trykk, øk stroke-width til 3-5 px.

Er det begrensninger på å modifisere selve pilene?

Ingen. SVG-filene i settet er ikke «bakt», streken er ikke utvidet til kurver. Du endrer fritt farge, tykkelse, strekstil (heltrukket, stiplet), legger til fyll og gradienter. Den eneste lisensbegrensningen: du kan ikke videreselge det redigerte settet som et separat kloneprodukt.

Å ta eller ikke ta: endelig oppsummering av Let's WP-piler

Hvis du setter opp en landingsside, setter sammen en presentasjon eller styler et innlegg, dekker 44 piler fra Denes de fleste typiske scenarioer. Den håndskrevne stilen er universell: den kommer ikke i konflikt med Material Design, minimalisme eller brutalisme.

For raske oppgaver, ta og sett inn som de er. For tilpasset design, endre farge og strektykkelse på et minutt i Figma eller Inkscape. Og hvis 44 varianter ikke var nok, vil listen over alternativer over gi deg et par tusen flere piler.

Last ned, eksperimenter og gjør grensesnitt mer levende.