Spring til indhold
Hvad skal vi kigge på?

Optimering af ikoner: Brug ikoner rigtigt og forbedr din hjemmesides hastighed

99 ud af 100 hjemmesider bruger ikoner, men mange sætter dem ind på en måde, der gør siden langsommere. Bruger du ikonerne forkert, bliver siden langsommere.

Kim TetzlaffKim TetzlaffProgrammør siden 19958 min læsning
Ikoner uden ventetid: en tung kasse med en hel ikonfont, hvorfra kun tre ikoner bruges, indlejret som SVG direkte i et HTML-dokument

Her gennemgår jeg, hvordan du bruger ikoner uden at gøre siden langsom.

Ikoner er vigtige – men brug dem rigtigt

Ikoner er på næsten alle hjemmesider i dag, men mange henter tunge ikonbiblioteker, der gør siden langsom. Problemet opstår ofte, når der loades store ikonfonte som FontAwesome, hvor kun en brøkdel af ikonerne faktisk bruges, mens resten blot tager unødig plads og tid. Hvis du vil beholde ikonerne på din hjemmeside uden at det går ud over hastigheden, skal du se på, hvordan de bliver sat ind.

De mest almindelige fejl ved brug af ikoner

  1. Ikoner loades, men bruges ikke: Mange hjemmesideejere er ikke opmærksomme på, hvilke ikoner der faktisk er installeret og loades. Det betyder, at ikoner, som aldrig vises på siden, stadig bliver indlæst, hvilket unødvendigt øger sidens vægt.
  2. Forkert indlæsning af ikoner: Det er ofte nemmere at indsætte et helt ikonbibliotek fremfor kun de nødvendige ikoner. Dette resulterer i, at der indlæses unødvendige CSS-filer og fonte, hvilket forsinker sidens rendering.
  3. Manglende optimering for over- og under-folden: Ofte tages der ikke hensyn til, om ikonerne vises over eller under folden, hvilket kan resultere i, at ikonerne indlæses på en ineffektiv måde.

Hvordan optimerer du brugen af ikoner?

Der er mange måder at optimere brugen af de ikoner som du benytter i dag. Fremgangsmåden kommer dog an på hvad du gør i dag, og hvilke ikonbiblioteker du bruger. Men i forhold til hastighedsoptimering af din hjemmeside, er dette et vigtigt område at tage hånd om.

Identificer de brugte ikoner

Start med at kortlægge, hvilke ikoner der faktisk bruges på din hjemmeside. Du kan bruge værktøjer som Chrome Coverage (via Chrome DevTools). Dette værktøj viser, hvor meget af din CSS-fil der faktisk bruges. Denne metode er især god når de ikoner du bruger kommer fra fx FontAwesome eller lign. bibliotek. Her er et eksempel på, hvordan du kan bruge det:

Trin:

  • Åbn Chrome DevTools (F12 eller højreklik → “Inspect”).
  • Gå til fanen “Coverage” under “More Tools.”
  • Genindlæs siden, og Chrome vil vise dig en rapport, hvor du kan se, hvor meget af din CSS (inklusive ikon-CSS) der bliver brugt.
  • Find CSS-filen, der indeholder ikonerne, og noter, hvilke ikoner der rent faktisk bruges.

Indsæt ikoner som inline SVG’er

Hvis dine ikoner vises over folden, bør du indsætte dem direkte i HTML’en som inline SVG’er. Det sikrer, at ikonerne kan vises med det samme uden at vente på indlæsning af eksterne filer.

Eksempel: I stedet for at indlæse et ikon som en font via CSS, kan du indsætte SVG-koden direkte i din HTML:

MARKUP
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3z"/>
</svg>

Dette ikon er en simpel hus-form og vil blive indlæst direkte, når HTML’en er hentet, uden forsinkelse. Originalikonet er bare et helt almindeligt hus, men som du kan se, kan man style det med CSS og få det til at være mere end bare det. Stadig i samme gode kvalitet, og vektorformat.

Lazy-load ikoner under folden

For ikoner, der vises under folden, kan du bruge lazy-loading for at forbedre hastigheden yderligere. I WordPress kan du aktivere lazy loading ved at bruge plugins som WP Rocket. Alternativt kan du manuelt tilføje lazy load på dine SVG-ikoner.

Eksempel med WP Rocket: Når WP Rocket er installeret og konfigureret til lazy-loading, skal du blot sørge for, at dine SVG-ikoner indsættes som billedfiler (f.eks. via <img>-tag), og WP Rocket vil automatisk sørge for, at de ikke bliver indlæst, før de er synlige.

MARKUP
<img class="lazyload" data-src="path-to-your-icon.svg" alt="Ikonbeskrivelse">

Her vil ikonet først blive indlæst, når brugeren når til det på siden.

Minimer brugen af ikonfonte

Hvis du bruger FontAwesome eller et lignende ikonbibliotek, kan du oprette en tilpasset version, der kun indeholder de ikoner, du faktisk bruger. Dette kan du gøre på FontAwesomes officielle hjemmeside, hvor du kan vælge specifikke ikoner og downloade en tilpasset CSS-fil. Dette kan du dog kun hvis du betaler for at bruge FontAwesome. Benytter du derimod deres gratis udgave, så skal du lave noget arbejde selv.

Her skal du blandt andet identificere de ikoner der bruges, og lave en helt ny CSS kode som du enten laver som en ny ekstern CSS fil, eller indlejrer imellem head taggene, på hjemmesiden. Den sidste er selvfølgelig bedst, især hvis der er tale om ikoner over folden.

Eksempel: Hvis du kun bruger et par ikoner fra FontAwesome, kan du generere en minimal version af CSS-filen og derefter deaktivere den oprindelige CSS-fil.

PHP
add_action( 'wp_enqueue_scripts', 'tetzlaff_theme_dequeue_style', 100); 
function tetzlaff_theme_dequeue_style() {
   wp_deregister_style('font-awesome');
}

Dette stykke kode fjerner FontAwesome CSS fra indlæsningen, og du kan i stedet inkludere din tilpassede version. Det kan ske at navnet på den ikke er “font-awesome” men noget andet. Du kan oftest se hvad den hedder, ved at finde det ID der er tilknyttet CSS filen i HTML koden.

Preload kritiske ikoner

For ikoner, som er kritiske for din sides layout (f.eks. et logo eller navigationsikoner), kan du bruge preload i din HTML, så disse ikoner prioriteres under indlæsningen.

Eksempel:

MARKUP
<link rel="preload" href="path-to-your-critical-icon.svg" as="image">

Så henter browseren ikonet tidligt, og det bliver vist hurtigere.

Alternativ løsning: Optimeret CSS-metode

Hvis det ikke er muligt at implementere SVG-ikoner, eller hvis du foretrækker en nemmere løsning, kan du kopiere den nødvendige CSS-kode direkte til din sides <head>-tags, og selvfølgelig sætte det ind i <style>-tag. Og derefter deaktivere den eksterne ikon-CSS. Selvom denne løsning ikke er lige så effektiv som inline SVG’er, kan det stadig reducere indlæsningstiden ved at fjerne unødvendig CSS og CSS kald.

De mest brugte ikonbiblioteker og deres formater

FontAwesome

  • Beskrivelse: Et af de mest populære ikonbiblioteker, som tilbyder et stort udvalg af ikoner i forskellige stilarter (solid, regular, brands). FontAwesome er nemt at gå til og kan bruges til det meste.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Over 8 milliarder downloads via CDN og npm, brugt på millioner af hjemmesider verden over.
  • Website: fontawesome.com

Material Icons (Google Material Design)

  • Beskrivelse: En del af Googles Material Design-system, som bruges bredt i Android-apps, Google-tjenester og moderne webprojekter, der følger Material Design-retningslinjerne.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Millioner af downloads via Google CDN og npm, udbredt på både websites og mobile platforme.
  • Website: material.io/icons

Ionicons

  • Beskrivelse: Ionicons blev oprindeligt udviklet til Ionic-frameworket, men bruges nu også i mange andre web- og mobilprojekter. Det er kendt for sin moderne og minimalistiske stil.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Millioner af downloads på npm og bruges på tusindvis af hjemmesider, især i mobile-first applikationer.
  • Website: ionicons.com

Bootstrap Icons

  • Beskrivelse: Udviklet af Bootstrap-teamet så de passer direkte ind i Bootstrap, men kan også bruges i andre projekter. Det er kendt for sin fleksibilitet og simple design.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Millioner af downloads og anvendt på millioner af hjemmesider, især i forbindelse med Bootstrap-projekter.
  • Website: icons.getbootstrap.com

Feather Icons

  • Beskrivelse: Feather Icons er et minimalistisk ikonbibliotek med en enkel linjestil, der er populært, fordi filerne er små.
  • Formater: SVG
  • Brugstal: Flere hundrede tusinde downloads på npm, populært blandt udviklere af moderne, minimalistiske webapplikationer.
  • Website: feathericons.com

Heroicons

  • Beskrivelse: Heroicons blev udviklet specifikt til at arbejde sammen med Tailwind CSS og tilbyder både kontur- og fyldte ikoner, der er nemme at integrere i moderne design.
  • Formater: SVG
  • Brugstal: Titusindvis af downloads og udbredt blandt Tailwind CSS-brugere.
  • Website: heroicons.com

Zondicons

  • Beskrivelse: Zondicons er et mindre, men veldesignet ikonbibliotek, som ofte bruges sammen med Tailwind CSS. Det tilbyder simple og rene ikoner.
  • Formater: SVG
  • Brugstal: Det er mindre udbredt end de store biblioteker, men populært i nicheprojekter og Tailwind CSS-baserede applikationer.
  • Website: zondicons.com

Eva Icons

  • Beskrivelse: Eva Icons er et open-source ikonbibliotek med over 480 ikoner, som er velegnet til både web- og mobilapplikationer på grund af sit konsistente og moderne design.
  • Formater: SVG, Webfont (ikonfont)
  • Brugstal: Eva Icons har titusindvis af downloads på GitHub og npm, ofte brugt i moderne applikationer.
  • Website: akveo.github.io/eva-icons

Octicons (GitHub Icons)

  • Beskrivelse: Octicons er GitHubs eget ikonbibliotek og bruges ofte til at give GitHub-projekter og webapps et konsistent, rent design. Det bruges også i forskellige udviklingsværktøjer.
  • Formater: SVG, Webfont (ikonfont)
  • Brugstal: Bruges i millioner af GitHub repositories og udviklingsværktøjer, der integrerer med GitHub.
  • Website: primer.style/octicons

Entypo

  • Beskrivelse: Et open-source ikonbibliotek med over 400 ikoner, kendt for sit lette og pixel-perfect design. Det bruges ofte i forskellige typer projekter, der har brug for enkle ikoner.
  • Formater: SVG, Webfont (ikonfont), PNG (via eksport)
  • Brugstal: Flere hundrede tusinde downloads på npm og andre distributionsplatforme, populært blandt udviklere, der ønsker små og præcise ikoner.
  • Website: entypo.com

Afsluttende ord om ikoner og optimering

Ved at optimere brugen af ikoner på din hjemmeside kan du forbedre både hastigheden og brugeroplevelsen. Start med at kortlægge, hvilke ikoner du bruger, og fjern alt unødvendigt. Indsæt kritiske ikoner som inline SVG’er og lazy-load dem der er indsat i img-tag, og er under folden. På den måde kan du beholde det visuelle udtryk, som ikoner giver, uden at det går ud over performance.

God arbejdslyst 🙂

Kim Tetzlaff
Skrevet af

Kim Tetzlaff

Programmør og webudvikler · Kim Tetzlaff ApS

  • Koder siden 1995
  • HTML siden 1996
  • WordPress siden 2007
  • Oplægsholder, WordCamp Denmark 2013
Hvem
Skrevet af mig, der laver arbejdet: hastighedsoptimering, teknisk SEO og udvikling for egne kunder.
Hvordan
Bygger på målinger af rigtige hjemmesider med PageSpeed Insights, GTmetrix og mine egne testværktøjer. Udgivet 7. december 2020, senest opdateret 31. oktober 2026.
Hvorfor
Skrevet så du selv kan finde ud af, hvor din side taber tid, og hvad der er værd at rette først.
Kilder i artiklen
Mere om mig Spørgsmål til artiklen? Skriv til mig
Læs videre

Relaterede artikler

Næste skridt

Er din side for langsom?

Få en gratis hastighedsanalyse. Jeg måler, hvor siden taber tid, og hvad der giver mest effekt først. No Cure No Pay.

Kim TetzlaffKim TetzlaffDen, der laver arbejdet
Test din hastighed Om hastighedsoptimering