En handritad pil gör något med ett gränssnitt som ingen geometrisk pekare från ett standard UI-kit kan: den tillför karaktär. Den säger till användaren "en person har jobbat här, inte ett löpande band." Men att rita fyrtiofyra pilar i vektor, finslipa varje pennkurva i Figma eller Illustrator, är en timme och en halv lång uppgift som en designer med deadline helt enkelt inte har tid med.

Som tur är har designern Denes från Let's WP redan gjort det jobbet åt oss. Han satte ihop en uppsättning med 44 handritade SVG-pilar i en enhetlig, sober stil, inte knuten till något specifikt designsystem, utan utsmyckningar, utan onödig tyngd. Uppsättningen är gratis för kommersiellt och personligt bruk: ladda ner den och klistra in i din layout, ändra färg och tjocklek, skala utan kvalitetsförlust.

Nedan följer vad som finns i arkivet, var och hur du använder dessa pilar, vilka verktyg du kan använda för anpassning och var du hittar liknande uppsättningar om 44 varianter känns otillräckligt.

💡 Snabb översikt:

• Ladda ner ZIP-arkivet med 44 SVG-pilar från Let's WP-sajten (eller en spegel)
• Öppna filen i Figma, Inkscape eller Illustrator och justera linjen så att den matchar din palett
• Infoga i en layout, presentation eller ett inlägg, skalning är fri, utan att skärpan försämras
• Använd i kommersiella projekt utan krav på attribution

Vad som finns i uppsättningen

Arkivet innehåller 44 separata SVG-filer, var och en med sin egen kurvkaraktär och spetstyp. Här är vad du hittar efter att ha packat upp zip-filen:

• Raka pilar åt höger och vänster, klassiska pekare med olika spetsformer (vassa, rundade, dubbla). Grundläggande verktyg för att länka block på en landningssida och i en presentation.
• Bågformade och kurvade, för att ringa in elementgrupper, visuell accent på ett skärmområde och indikera icke-linjära kopplingar i diagram.
• Streckade och skrafferade, idealiska för steg-för-steg-instruktioner, användarflöden och flödesscheman. Streckad läses som "väg", skraffering som "alternativ rutt."
• Tunna linjer med prydlig penna och feta drag, de första är bra för minimalistiskt UI och wireframes, de andra fungerar som en uttrycksfull accent på en kampanjsida.
• Slingrande snirklar och dekorativa element, för rubriker, sektionsavdelare och styling av inlägg i sociala medier.

Alla filer är i SVG. Det betyder att linjen inte är expanderad till kurvor, du kan ändra tjockleken (stroke-width) och färgen (stroke) både i ett grafikprogram och direkt i kod. Vid all skalning förloras ingen kvalitet.

Uppsättningen distribueras fritt: kommersiell användning är tillåten på kundsajter, i presentationer och tryck. Attribution krävs inte, men uppskattas. Upphovsmannen, Denes, är designer och skapare av bloggen Let's WP.

Var handritade pilar är användbara

Den handskrivna stilen löser en specifik uppgift: den mjukar upp den geometriska stelheten i ett gränssnitt. Där en standardpil från Material Design ser för steril och opersonlig ut, tillför en handritad en "mänsklig" touch. Här är fem typiska scenarier.

Landningssidor och kampanjsidor. En pil riktar blicken mot en CTA-knapp, länkar ihop blocket "problem → lösning", accentuerar erbjudandet. Handskriven stil minskar visuell mallkänsla, sidan ser mindre löpandebandstillverkad ut och inger därför mer förtroende.

Presentationer och pitchdeck. Vektorn infogas i Google Slides, PowerPoint och Keynote utan att skärpan försämras. Pilar länkar block på en bild, visar sekvens eller hierarki, det blir rent och distraherar inte från sakfrågan.

Diagram och infografik. Streckade och skrafferade varianter, ett färdigt visuellt språk för flödesscheman, tankekartor och användarflöden. Läsaren förstår riktning utan ytterligare förklaringar.

Styling av inlägg i sociala medier. Pilsnirkar fungerar som avdelare och accenter i Instagram-karuseller, Twitter-headers och artikelomslag. De tillför dynamik till en platt bild.

UI-design och wireframes. Vid prototypande hjälper handritade pekare till att indikera interaktion: var man klickar, vad som leder vart, hur skärmar hänger ihop. Stilen är medvetet "skissartad", kunden ser struktur, inte slutgiltig design.

Hur du redigerar SVG-pilar

Uppsättningen levereras i SVG, så alla vektorgrafikredigerare är tillgängliga. Tre alternativ, i stigande komplexitet.

Figma, gratis, webbläsare. Dra SVG-filen till arbetsytan, pilen visas som ett vektorobjekt. Markera den och ändra Stroke (tjocklek och konturfärg) i den högra panelen. Skalning är fri. Idealiskt om du redan arbetar i Figma med en layout och inte vill växla mellan verktyg.

Inkscape, gratis, skrivbord. Kraftfull SVG-redigerare med öppen källkod. Öppna filen, tryck Ctrl+Shift+F, panelen "Fyllning och kontur". Här finns: fyllnings- och konturfärg, konturstil (solid, streckad, streck-prickad), start- och slutmarkörer för linjer. Inkscape stöder batchbearbetning via CLI, praktiskt om du behöver färga om alla 44 filer på en gång i företagsfärger.

Adobe Illustrator, betald, skrivbord. Professionellt verktyg. Importera SVG, dela upp grupper vid behov och arbeta med paletterna Stroke och Appearance. Gradientkonturer, penslar och effekter är tillgängliga, men för enkla pilar är detta oftast överdrivet.

Snabbt färgbyte via kod

Om du behöver bädda in en pil direkt i märkspråket som inline SVG, ändras färgen med ett attribut:

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>

Ersätt #FF6B35 med din färg, så passar pilen vilken palett som helst.

Video: SVG-grunder för nybörjare

Om du aldrig har arbetat med vektorgrafik, börja med denna handledning. Författaren förklarar tydligt: vad SVG är, hur man skapar och redigerar vektorformer, hur man applicerar stilar och animering.

Liknande gratisuppsättningar med vektorpilar

44 pilar, en bra start, men ibland behöver ett projekt variation. Här är fem verifierade källor med kvalitativa handritade pilar i SVG.

• Hand Drawn Arrows på SVG Repo, en samling med 200+ SVG-pilar i olika stilar: från minimalistiska till dekorativa. Alla under MIT-licens, kan användas i kommersiella projekt utan begränsningar. Sök efter "hand drawn arrows" på svgrepo.com.

• Arrow Icons från Flaticon, mer än 1 800 pilikoner i SVG och PNG. Handritade, outline-, platta och gradientvarianter finns tillgängliga. Gratis med attribution, eller via prenumeration utan: flaticon.com/free-icons/hand-drawn-arrow.

• Hand Drawn Arrows på Vecteezy, tiotusentals vektorpilar från olika upphovsmän. Filtrera efter licens: välj "Free" och se om en specifik uppsättning kräver attribution: vecteezy.com.

• Arrow Sketch på Freepik, enorm samling handritade pilar i vektor och PNG. Gratis med attribution (länk till Freepik), premiumuppsättningar tillgängliga utan attribution: freepik.com.

• Spegel av uppsättningen från Bypeople, om huvudkällan (Let's WP) är otillgänglig, kan samma 44 pilar hämtas via Bypeople: bypeople.com/hand-drawn-svg-arrows/.

⁉️🤔 Vanliga frågor

Kan dessa pilar användas i kommersiella projekt?

Ja. Uppsättningen från Let's WP distribueras under en fri licens: kommersiell och personlig användning är tillåten, inklusive kundsajter, presentationer, tryck och digitala produkter. Attribution krävs inte. Pilarna är en vektorgrafikresurs, inte programkod: du kan infoga dem i en layout, redigera färg och linjetjocklek, men inte sälja vidare som en separat piluppsättning.

Vilket format har filerna och hur öppnar man dem?

Format, SVG (Scalable Vector Graphics). Öppnas med vilken vektorredigerare som helst: Figma (webbläsare, gratis), Inkscape (skrivbord, gratis), Adobe Illustrator (skrivbord, betald), Vectornator (iPad), CorelDRAW. SVG kan också öppnas som en textfil i valfri kodredigerare och redigera märkspråket direkt. För snabb visning utan redigerare, dra SVG-filen till ett webbläsarfönster, den renderas som en vanlig bild.

Varför är handritade pilar bättre än vanliga geometriska?

En handritad pil tillför "mänsklighet" till ett gränssnitt. Geometrisk från ett standard UI-kit säger "detta är ett gränssnitt", medan handritad säger "bakom detta gränssnitt finns en person." På marknadsföringslandningssidor, i presentationer och utbildningsmaterial ökar detta engagemang: det finns något för ögat att fästa vid. Ur tillgänglighetssynpunkt är det ingen skillnad, båda ignoreras lika mycket av skärmläsare utan aria-label, som du lägger till själv.

Vad gör man om den ursprungliga Let's WP-sajten är otillgänglig?

Den ursprungliga sajten letswp.io är nu tillgänglig via letswp.justifiedgrid.com. Uppsättningen finns också på aggregatorplattformar: Bypeople och Armory (visualsoldiers.com). Om ingen spegel fungerar, använd alternativ från listan ovan: SVG Repo och Flaticon tillhandahåller tillsammans mer än 2 000 handritade pilar.

Lämpar sig dessa pilar för tryck?

Ja. SVG, ett vektorformat, skalas utan kvalitetsförlust till vilken upplösning som helst: från en liten ikon till en storbildsbanderoll. Innan du skickar till tryckeri, se till att färgmodellen är konverterad till CMYK (i Figma och Inkscape görs detta via export till PDF med efterföljande konvertering). En linjetjocklek på 1-2 px på skärm blir hårfin i tryck, öka stroke-width till 3-5 px.

Finns det begränsningar för att modifiera själva pilarna?

Inga. SVG-filerna i uppsättningen är inte "bakade", linjen är inte expanderad till kurvor. Du ändrar fritt färg, tjocklek, konturstil (solid, streckad), lägger till fyllning och gradienter. Den enda licensbegränsningen: du kan inte sälja vidare den redigerade uppsättningen som en separat klonprodukt.

Att ta eller inte ta: slutlig sammanställning om Let's WP-pilarna

Om du layoutar en landningssida, sätter ihop en presentation eller stylar ett inlägg täcker 44 pilar från Denes de flesta typiska scenarier. Den handskrivna stilen är universell: den krockar inte med Material Design, minimalism eller brutalism.

För snabba uppgifter, ta och infoga som de är. För anpassad design, ändra färg och linjetjocklek på en minut i Figma eller Inkscape. Och om 44 varianter inte räckte, ger listan med alternativ ovan dig ett par tusen pilar till.

Ladda ner, experimentera och gör gränssnitt mer levande.