Gratis ikoner till din webbsida – bästa källorna

Snygga ikoner gör en webbplats tydligare och mer professionell. De hjälper besökaren att snabbt hitta rätt, lyfter designen och kan ersätta text där en liten symbol säger mer. Lyckligtvis finns det gott om gratis ikoner att välja bland. Men ”gratis” betyder inte alltid helt fritt fram, så det är viktigt att också förstå licenserna. Här går vi igenom de bästa källorna och hur du använder ikonerna rätt.

Ikonteckensnitt och SVG-bibliotek

För dig som bygger eller anpassar en webbplats är så kallade ikonbibliotek ofta det smidigaste. De levereras som ikonteckensnitt eller SVG-filer som du enkelt kan lägga in i koden och styla med CSS. Många är dessutom öppen källkod och helt fria att använda, även kommersiellt.

• Font Awesome: Det klassiska och mest använda biblioteket, med ett stort gratisutbud (plus en betald Pro-version). Enkelt att lägga in och ofta redan inbyggt i WordPress-teman.
• Bootstrap Icons: Ett gratis och öppet (MIT-licens) bibliotek med rena, tydliga ikoner. Fungerar utmärkt även utan ramverket Bootstrap.
• Feather och Lucide: Minimalistiska, snygga SVG-ikoner. Lucide är en populär vidareutveckling av Feather.
• Google Material Symbols: Googles omfattande ikonuppsättning, gratis och flexibel, med stöd för olika vikter och stilar.
• Heroicons och Tabler Icons: Två moderna, fria bibliotek med stora, konsekventa ikonset, uppskattade av utvecklare.

Ikonbibliotek att ladda ner

Vill du hellre söka och ladda ner enskilda ikoner som bilder finns stora bibliotek för det. Här är utbudet enormt, men notera att gratisnivån ofta kräver att du anger källa (attribution).

• Flaticon: Ett av de största biblioteken med miljontals ikoner i olika stilar. Gratis med attribution, eller utan krav med ett premiumkonto.
• Icons8: Stort utbud i enhetliga stilar, gratis med attribution samt betald plan.
• The Noun Project: Enorm samling ikoner, med attribution i gratisversionen.
• SVG Repo och Iconfinder: Bra ställen att hitta fria SVG-ikoner, med filter för licens.

SVG, PNG eller ikonteckensnitt?

Ikoner finns i olika format, och vilket du väljer spelar roll:

• SVG är i dag det bästa valet för webben. Formatet är vektorbaserat, vilket betyder att ikonen är knivskarp i alla storlekar, tar liten plats och enkelt kan färgsättas med CSS.
• Ikonteckensnitt (som Font Awesome) är smidiga eftersom du lägger in hela biblioteket en gång och sedan anropar ikoner med en klass. Praktiskt, men lite mindre flexibelt än ren SVG.
• PNG fungerar, men är en bild med fast upplösning som kan bli suddig om den förstoras. Undvik för skarpa gränssnitt om du kan.

Behöver du hjälp med bildformat i övrigt har vi en guide om att förminska för stora bilder.

Licenser – läs det finstilta

Det här är den viktigaste delen. Att en ikon är gratis att ladda ner betyder inte att du får använda den precis hur som helst. Innan du använder en ikon, särskilt på en kommersiell webbplats, kontrollera villkoren:

• Öppen källkod (MIT, Apache med flera): Set som Bootstrap Icons, Feather, Material Symbols och Tabler är oftast helt fria att använda, även kommersiellt, utan krav på attribution.
• Gratis med attribution: Tjänster som Flaticon, Icons8 och The Noun Project kräver i gratisversionen att du anger källa, till exempel en länk i sidfoten. Sköter du inte det bryter du mot licensen.
• Premium/betald: Ofta krävs ett konto för att slippa attribution eller för att låsa upp fler ikoner.

Är du osäker, välj ett öppen källkod-bibliotek, så slipper du fundera. Vill du bygga en helt gratis och prydlig sajt är ikoner för övrigt bara en pusselbit; vi har till exempel en guide om att skaffa gratis SSL med Cloudflare.

Så använder du ikonerna

Hur du lägger in ikonerna beror på din plattform:

• WordPress: Många teman och sidbyggare, som Elementor, har Font Awesome inbyggt, så du kan välja ikoner direkt i redigeraren. Annars finns plugins som lägger till ikonbibliotek.
• Egen kod: Med ett ikonteckensnitt inkluderar du bibliotekets CSS och anropar en ikon med rätt klass. Med SVG klistrar du in koden direkt i sidan eller länkar till filen.

Tips för snygga ikoner

• Håll dig till ett set: Blanda inte ikoner från olika bibliotek, då stilen spretar. Välj ett set och håll dig till det.
• Var konsekvent i storlek och färg: Enhetliga ikoner ser mer professionella ut.
• Tänk på tillgänglighet: Ge ikoner som förmedlar information en beskrivande text (till exempel alt-text eller aria-label), så att skärmläsare förstår dem.
• Överdriv inte: Ikoner ska förtydliga, inte skräpa ner. Använd dem där de gör verklig nytta.

Vanliga frågor (FAQ)

Var hittar jag gratis ikoner till min webbplats?

Bra källor är öppen källkod-bibliotek som Font Awesome, Bootstrap Icons och Google Material Symbols, samt nedladdningstjänster som Flaticon och Icons8. De sistnämnda kräver ofta attribution i gratisversionen.

Är gratis ikoner verkligen gratis att använda kommersiellt?

Inte alltid. Öppen källkod-set är oftast fria även kommersiellt, medan tjänster som Flaticon kräver att du anger källa eller köper en licens. Läs alltid villkoren.

Vilket format är bäst för ikoner på webben?

SVG. Formatet är skalbart, skarpt i alla storlekar, litet i filstorlek och enkelt att färgsätta med CSS. Ikonteckensnitt är också smidigt, medan PNG kan bli suddigt vid förstoring.

Vad betyder attribution?

Att du måste ange varifrån ikonen kommer, oftast med en länk till upphovspersonen eller tjänsten. Det är ett vanligt krav för gratis ikoner och står i licensvillkoren.

Kan jag använda ikoner i WordPress utan att koda?

Ja. Många teman och sidbyggare, som Elementor, har inbyggda ikonbibliotek. Du kan också installera ett plugin som lägger till fler ikoner.

Hur många ikonstilar bör jag använda?

Helst bara en. Genom att hålla dig till ett enda ikonset får du en enhetlig och professionell design, i stället för en spretig blandning.

Sammanfattning

Det finns gott om gratis ikoner till din webbplats, från smidiga öppen källkod-bibliotek som Font Awesome och Bootstrap Icons till stora nedladdningstjänster som Flaticon. Välj gärna SVG för skarpa, skalbara ikoner, håll dig till ett enda set för en enhetlig design, och läs alltid licensen, särskilt kravet på attribution, innan du använder ikonerna kommersiellt. Då får du en snyggare sajt utan att riskera att bryta mot villkoren.