Gratis SVG-avatarer og ikoner for UI-design i 2026

Da dette innlegget opprinnelig ble laget i 2008, så designverdenen helt annerledes ut enn i dag. Smashing Magazine publiserte da samlingen “Vector Girl Avatars”, litt lubne figurer distribuert i PSD- og AI-formater som fanget estetikken til Web 2.0-æraen. Den gangen definerte gradienter, skygger og forseggjorte illustrasjoner designtrendene, og hver webmaster kjente rutinen med å laste ned ZIP-pakker med ikoner og beskjære dem manuelt i Photoshop før publisering på nettet.

Sett fra 2026 er den samlingen et stykke designhistorie. Behovet for gode, gratis grafiske ressurser har ikke blitt mindre, men teknologien har endret seg. Skalerbare vektorer (SVG) har erstattet rasterformater, statiske bilder har fått selskap av Lottie-animasjoner, og moderne grensesnitt krever en gjennomtenkt holdning til lisenser, tilgjengelighet og sikkerhet for visuelle ressurser.

Denne guiden beskriver utviklingen av vektorressurser, går gjennom gratis biblioteker som er tilgjengelige i 2026 sammen med lisensene deres, og viser hvordan du tar i bruk vektorgrafikk i webprosjekter og WordPress-nettsteder.

#1. Hvordan gikk ikoner fra pixel art til SVG

#1.1 Hvilke begrensninger hadde bitmap-ikoner

Historien til digitale ikoner henger sammen med de teknologiske begrensningene i hver epoke. I nettets tidlige dager jobbet designere hovedsakelig med bitmap-grafikk, altså bilder satt sammen av faste piksler som mistet kvalitet når de ble skalert utover sine opprinnelige dimensjoner. Denne begrensningen tvang designere til å lage flere versjoner av hvert ikon i ulike størrelser.

Ikondesign på 1990-tallet og tidlig 2000-tall handlet om presisjon på pikselnivå. Designere tegnet ikoner i små størrelser (16x16, 24x24, 32x32 piksler) der hver piksel bar visuell vekt. “Pixel art”-estetikken oppstod ikke som et kunstnerisk valg, men som en praktisk nødvendighet, der designere glattet kanter for hånd for å få lesbare bilder ved begrensede oppløsninger.

Alfa-gjennomsiktighet i PNG-formatet var et stort fremskritt, fordi ikoner kunne legges over ulike bakgrunner uten de taggete kantene som var typiske for GIF sin enbits gjennomsiktighet. Den grunnleggende begrensningen var der fortsatt: å skalere et ikon utover de designede dimensjonene ga synlig pikselering, og det kom stadig flere skjermer med ulik pikseltetthet.

#1.2 Hvorfor ble SVG standarden for ikoner

Skalerbar vektorgrafikk (SVG) løste problemet med bitmaps, fordi formatet beskriver bildet uavhengig av oppløsning. En bitmap definerer bildet som et rutenett av fargede piksler, mens SVG beskriver former, linjer, kurver, fyll og strøk matematisk, slik at de rendres skarpt i enhver skala.

SVG 1.1 er en W3C-anbefaling, mens etterfølgeren SVG 2 fortsatt har status som Candidate Recommendation: W3C publiserte det nyeste snapshotet av spesifikasjonen 6. oktober 2026. Det som drev SVG-bruken i praksis, var innebygd støtte i nettleserne og muligheten til å legge <svg>-elementet rett inn i HTML5. Responsivt webdesign, som har utviklet seg siden rundt 2010, satte ekstra fart på overgangen, fordi designere trengte grafikk som ser skarp ut på skjermer av alle størrelser og pikseltettheter.

SVG har tre tekniske fordeler som forklarer formatets plass i ikondesign. For det første skalerbarhet: det samme ikonet rendres riktig både på en klokke og på en 5K-skjerm. For det andre liten størrelse: forstørrelsesglass-ikonet fra Heroicons (24/outline/magnifying-glass.svg i prosjektets repository) er på 296 byte, og ikonet search.svg fra Lucide på 275 byte (målt 12. oktober 2026). For det tredje styring fra kode: CSS og JavaScript kan endre ethvert element i en vektorgrafikk, noe som gir hover-effekter, animasjoner og styling basert på applikasjonens tilstand.

#1.3 Hva er Lottie-animasjoner

Neste steg etter statisk SVG var animert vektorgrafikk. Lottie er et bibliotek fra Airbnb som ifølge dokumentasjonen til lottie-web leser animasjoner fra Adobe After Effects eksportert til JSON med Bodymovin-pluginen, og rendrer dem native i web- og mobilapplikasjoner.

Lottie-filer er JSON-representasjoner av animasjoner eksportert fra After Effects. De inneholder informasjonen som trengs for rendering: baner, fyll, transformasjoner og nøkkelrammedata. Biblioteket håndterer avspilling, looping, hopp til en valgt ramme og endring av egenskaper fra kode.

For grensesnittdesign betyr dette at lasteanimasjoner, suksessbekreftelser, onboarding-sekvenser og mikrointeraksjoner kan være vektorbaserte og styres med kode i stedet for å bygges inn som GIF eller video.

#2. Hvorfor trenger moderne UI fortsatt vektorgrafikk

#2.1 Vektorgrafikk i responsivt design

Responsivt webdesign endret kravene til grensesnittgrafikk. Da nettsteder begynte å betjene smarttelefoner, nettbrett, bærbare datamaskiner og store skjermer, ble begrensningene til bitmaps stadig mer plagsomme. Ett og samme ikon kan vises i 16 piksler ett sted og 64 piksler et annet sted.

Vektorgrafikk løser dette problemet. Et SVG-ikon definerer utseendet sitt gjennom en matematisk beskrivelse, ikke et pikselrutenett, og rendres derfor i enhver størrelse uten kvalitetstap. Én kildefil erstatter et sett med versjoner i ulike oppløsninger, noe som reduserer både arbeidet for teamet og antallet filer som må lastes ned.

SVG er et tekstbasert format (XML), så serveren kan komprimere det under overføring på samme måte som HTML og CSS, og nettleseren rendrer det uten ekstra plugins.

#2.2 Hvordan gjør SVG-ikoner nettsiden mer tilgjengelig

SVG støtter markup som hjelpeteknologier kan lese. Elementene <title> og <desc> gir et tekstalternativ, og ARIA-attributter gjør det mulig å merke et ikon som meningsbærende eller dekorativt. Detaljer og kodeeksempler finner du i avsnitt 6.3.

Vektorgrafikk fungerer også bedre med sidezoom og høykontrastmoduser. Når brukeren forstørrer teksten, skalerer SVG-ikonet uten artefaktene som oppstår når bitmaps forstørres utover sin native oppløsning.

SVG-egenskaper kan endres i CSS, så et ikon kan reagere på brukerens preferanser, for eksempel på mediespørringene prefers-color-scheme og prefers-contrast, ved å endre farge eller strøktykkelse.

#2.3 SVG-ikoner i et designsystem

Bedriftsapplikasjoner og store nettsteder trenger mange ikoner: handlinger, statusindikatorer, navigasjonselementer og begreper. Å holde visuell konsistens på tvers av hundrevis av ikoner er en utfordring som vektortilnærmingen hjelper med å løse systematisk.

Designsystemer behandler vektorikoner som grunnkomponenter. Når grunnformer, strøktykkelse, hjørneradier og optiske justeringer er parametere for hele systemet, holder nye ikoner seg konsistente med de eksisterende. Det begrenser de små inkonsistensene som oppstår når hver designer tegner ikoner på sin egen måte.

SVG-ikoner fungerer godt med design-tokens: farge, størrelse og strøktykkelse på ikonet kan forvaltes sammen med farger, avstander og typografi. En endring i den sentrale token-definisjonen endrer utseendet på ikonene i hele applikasjonen.

#3. Hvor finne gratis vektor-avatarer og ikoner i 2026

#3.1 Avatargeneratorer for SVG: DiceBear, Humaaans og andre

I stedet for å velge avatarer fra et begrenset bibliotek kan utviklere generere dem programmatisk ut fra en bruker-ID, et navn eller et annet attributt.

DiceBear genererer SVG-avatarer ut fra en inndatastreng (seed), slik at samme bruker alltid får samme avatar. Den enkleste integrasjonen er en URL med identifikatoren som parameter:

<img src="https://api.dicebear.com/10.x/lorelei/svg?seed=mariusz" alt="" width="64" height="64" />

Ifølge dokumentasjonen for DiceBears HTTP-API er gjeldende API-versjon 10.x (versjon 5.x til 8.x er avviklet), grensen er 50 forespørsler per sekund for SVG, og det offentlige API-et er gratis for ikke-kommersiell bruk. For kommersiell bruk eller høyere grenser anbefaler dokumentasjonen å sette opp en egen instans. Koden til DiceBear er MIT-lisensiert, men hver avatarstil har sin egen lisens, beskrevet på DiceBears lisensside: Lorelei er CC0 1.0, Fun Emoji er CC BY 4.0 (krever kreditering), og Avataaars og Bottts har egne vilkår fra opphavspersonene som tillater både personlig og kommersiell bruk.

Humaaans av Pablo Stanley er et modulært illustrasjonssystem: designeren kombinerer hoder, overkropper, ben og bakgrunner til scener og figurer. Prosjektets nettside oppgir CC0-lisens, som tillater kommersiell og personlig bruk, og lenker til en versjon for Sketch, et eksempel i InVision Studio og en samling i tjenesten Blush.

Den modulære tilnærmingen er nyttig for applikasjoner som trenger mange ulike avatarer. I stedet for å velge blant ferdige kombinasjoner kan du generere varianter programmatisk fra ulike komponenter og tilpasse dem merkevarens estetikk.

Andre generatorer som er verdt å kjenne til:

• Boring Avatars: et React-bibliotek (MIT) fra organisasjonen boringdesigners med seks varianter (marble, beam, pixel, sunset, ring, bauhaus); avataren lages fra egenskapen name, som kan være et brukernavn eller en e-postadresse.
• Multiavatar: en generator der utviklerne oppgir 12 230 590 464 mulige avatarer på prosjektets nettside; de fullstendige lisensvilkårene ligger på en egen side i prosjektet.
• Bean Heads (tidligere Big Heads): en React-komponent av Robert Broersma under MIT-lisens for å sette sammen figurer fra egenskaper som hår, øyne og hudfarge.

#3.2 Gratis biblioteker med vektorillustrasjoner

Illustrasjonsbiblioteker leverer grafikk laget for å brukes sammen, med konsistent stil, fargepalett og visuelt språk.

unDraw av Katerina Limpitsouni er en samling illustrasjoner i flat stil som dekker temaer fra forretning til hverdagsaktiviteter. På prosjektets nettside velger du aksentfarge før nedlasting, så illustrasjonen passer merkevarens palett med en gang. unDraw har sin egen lisens, publisert på prosjektets nettside, og den er verdt å lese før bruk i et kundeprosjekt.

I praksis velger du en illustrasjon, setter aksentfargen, laster ned SVG-filen og legger den inn i malen. SVG-koden kan også styles videre med CSS-egenskaper eller inline-attributter.

#3.3 Gratis SVG-ikonbiblioteker

Markedet for ikonbiblioteker i 2026 omfatter både klassiske sett og systemer med mange varianter.

Phosphor Icons er en ikonfamilie i seks vekter: Thin, Light, Regular, Bold, Fill og Duotone, under MIT-lisens. Hvert ikon finnes i alle varianter, så settene passer sammen uten skjær. Phosphor har implementasjoner for React, Vue, Figma og webkomponenter.

Heroicons fra skaperne av Tailwind CSS (Tailwind Labs) finnes i fire varianter: 24x24 outline, 24x24 solid, 20x20 solid og 16x16 solid. Pakkene @heroicons/react og @heroicons/vue gjør ikonene tilgjengelige som komponenter, og prosjektets repository oppgir MIT-lisens. Heroicons passer til prosjekter bygget på Tailwind, men fungerer i ethvert prosjekt.

Feather Icons satser på enkelhet: hvert ikon er tegnet på et 24x24-rutenett, og standard strøktykkelse er 2. Prosjektet er MIT-lisensiert.

Lucide er en fork av Feather Icons som utvikles av fellesskapet, med over 1600 ikoner ifølge prosjektets repository, under ISC-lisens. Lucide har offisielle pakker for React, Vue, Svelte, Angular, Astro og andre miljøer.

Tabler Icons omfatter ifølge prosjektets README 6238 ikoner (5184 med kontur og 1054 fylte, per oktober 2026), på et 24x24-rutenett med 2 px strøk, under MIT-lisens. Konturikonene kan gjøres tynnere eller tykkere ved å endre stroke-width.

Material Symbols fra Google er en variabel ikonfont med fire akser: fyll (0 til 100), vekt (100 til 700), grade (fra -50 til 200) og optisk størrelse (20 til 48 px). Ifølge Googles repository er ikonene utgitt under Apache 2.0-lisensen.

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

#3.4 Lisenser for gratis ikonsett sammenlignet

“Gratis” betyr ikke “uten vilkår”. Forskjellene mellom lisensene gjelder hovedsakelig kreditering og hva som må følge med kopier av filene.

Font Awesome skiller i lisensfilen for Free-versjonen mellom tre lisenser: CC BY 4.0 for ikonene, SIL OFL 1.1 for ikonene pakket som web- og desktopfonter, og MIT for de øvrige filene. Den samme filen ber om at kommentarene med kreditering, som allerede ligger i de nedlastede filene, ikke fjernes.

MIT- og ISC-lisensene krever at opphavsrettsmerknaden og lisensteksten følger med kopier av programvaren. Lucides lisensside nevner ikke noen synlig kreditering på nettsiden; kravet gjelder merknaden i de distribuerte filene. Apache 2.0 inneholder i tillegg en uttrykkelig patentlisens.

#3.5 Ikoner for sosiale medier, flagg og betaling

Utover biblioteker for generell bruk finnes det spesialiserte sett.

Ikoner for sosiale medier inneholder logoene til de store plattformene i vektorformat. De er nyttige i delingsknapper, kontaktseksjoner og bunntekster. Logoen til en plattform forblir varemerket til eieren, så det er lurt å sjekke merkevareretningslinjene til den aktuelle plattformen.

Flaggikoner er flagg for land og regioner i vektorformat, nyttige i språkvelgere, fraktkalkulatorer og landvalg. Settene navngir som regel filene etter landkodene i ISO 3166-1, noe som gjør mappingen enkel.

Ikoner for betalingsmetoder inneholder logoer for betalingskort, digitale lommebøker og lokale betalingsmetoder, brukt i handlekurven i nettbutikker.

#4. Hvordan integrerer du SVG trygt i WordPress

#4.1 Hvorfor WordPress blokkerer SVG som standard

WordPress har ikke SVG på listen over filtyper som er tillatt som standard. Grunnen er teknisk: et PNG-bilde er pikseldata, mens SVG er et XML-dokument som kan inneholde JavaScript, referanser til eksterne ressurser og andre konstruksjoner som nettleseren utfører. En SVG-fil som åpnes direkte i nettleseren, kan kjøre et skript i konteksten til nettstedets domene.

Dette er en risiko for cross-site scripting (XSS). Et skript som kjøres i nettstedets kontekst, kan lese øktdata eller utføre handlinger på vegne av en innlogget administrator. Mer om sikkerhetshensyn i WordPress finner du i en egen guide, og hvis en oppdatering har gått galt, forklarer vi hvordan du gjenoppretter en tidligere versjon av WordPress.

Begrensningen kan omgås trygt hvis hver opplastet fil går gjennom sanitering, og bare betrodde brukere har rett til å laste opp SVG.

#4.2 Hvordan aktivere SVG trygt i WordPress

Safe SVG-pluginen er den enkleste veien. Ifølge pluginens side i WordPress.org-katalogen er 10up utvikleren, den har over én million aktive installasjoner, og saniteringen gjøres av biblioteket svg-sanitizer av Daryll Doyle (enshrined/svg-sanitize). Pluginen fjerner farlig kode ved opplasting, viser forhåndsvisninger av SVG i mediebiblioteket, lar deg begrense SVG-opplasting til utvalgte brukere og kan valgfritt optimalisere filene med SVGO (av som standard).

Oppsettet er enkelt: installer og aktiver pluginen fra WordPress-katalogen, begrens om nødvendig hvem som kan laste opp SVG, og last opp filene via mediebiblioteket. Saniteringen skjer automatisk ved hver opplasting.

SVG Support-pluginen av Benbodhi (side i katalogen) saniterer også opplastede filer og har en avansert modus: klassen style-svg lagt til en bildeblokk rendrer SVG-en inline, slik at den kan styles med CSS.

Manuell sanitering gir utviklere full kontroll. Eksempelet nedenfor viser prinsippet, men regulære uttrykk er ikke en fullverdig XML-parser, så i produksjon er det bedre å bruke biblioteket enshrined/svg-sanitize, det samme som Safe SVG bruker:

<?php
/**
 * Forenklet eksempel på SVG-sanitering.
 * I produksjon: bruk biblioteket enshrined/svg-sanitize.
 */
function wppoland_sanitize_svg($svg_content) {
    // Fjern script-tagger
    $svg_content = preg_replace('/<script[^>]*?>.*?<\/script>/is', '', $svg_content);

    // Fjern hendelseshåndterere
    $svg_content = preg_replace('/\s*on\w+\s*=\s*["\'][^"\']*["\']/is', '', $svg_content);
    $svg_content = preg_replace('/\s*on\w+\s*=\s*[^\s>]+/is', '', $svg_content);

    // Fjern javascript:-adresser
    $svg_content = preg_replace('/href\s*=\s*["\']?\s*javascript:[^"\']*["\']?/is', 'href="#"', $svg_content);

    return $svg_content;
}

#4.3 Hvordan legge inn inline SVG i et WordPress-tema

Inline SVG, altså SVG-kode lagt direkte inn i HTML i stedet for en referanse til en fil, gir stylingmuligheter som eksterne filer ikke har. Hvert element i grafikken er tilgjengelig for CSS og JavaScript, noe som gir hover-effekter, dynamiske fargeendringer og animasjoner.

Grunnleggende integrasjon av inline SVG:

<?php
function wppoland_render_icon($icon_name, $classes = '') {
    $svg_path = get_template_directory() . '/assets/icons/' . sanitize_file_name($icon_name) . '.svg';

    if (file_exists($svg_path)) {
        $svg_content = file_get_contents($svg_path);

        // Fjern width/height-attributter slik at ikonet skalerer med CSS
        $svg_content = preg_replace('/(width|height)=["\'][^"\']*["\']/', '', $svg_content);

        // Legg til viewBox hvis den mangler
        if (strpos($svg_content, 'viewBox') === false) {
            $svg_content = preg_replace('/<svg/', '<svg viewBox="0 0 24 24"', $svg_content, 1);
        }

        // Legg til egne klasser
        if (!empty($classes)) {
            $svg_content = preg_replace('/<svg/', '<svg class="' . esc_attr($classes) . '"', $svg_content, 1);
        }

        return $svg_content;
    }

    return '';
}

CSS-styling for inline SVG:

.icon {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.icon:hover {
    fill: #ff6b6b;
    stroke: #333;
}

/* Eksempel på animert ikon */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.icon.animated:hover {
    animation: iconPulse 0.5s ease-in-out;
}

#4.4 Hvordan optimalisere SVG-filer for bedre ytelse

Optimalisering av SVG-filer betyr mest på sider med mange ikoner. For en bredere gjennomgang av treg WordPress, se hvordan du fikser en treg WordPress-side.

SVGO er ifølge prosjektets dokumentasjon et Node.js-bibliotek og kommandolinjeverktøy for å optimalisere SVG. Det fjerner metadata fra redigeringsprogrammer, kommentarer, skjulte elementer og standard- eller ikke-optimale verdier, når dette kan gjøres uten å endre utseendet. Det er best å kjøre det i byggeprosessen til temaet.

En sprite med <symbol>-elementer samler mange ikoner i én SVG-blokk, og hvert ikon hentes fram med <use>. Banekoden kommer på siden én gang, selv om ikonet vises mange ganger:

<?php
function wppoland_icon_sprite() {
    ?>
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <symbol id="icon-menu" viewBox="0 0 24 24">
            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <!-- Flere ikoner -->
    </svg>
    <?php
}
add_action('wp_body_open', 'wppoland_icon_sprite');

Et ikon fra spriten: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

Lat innlasting gjelder SVG-filer som settes inn med <img>: attributtet loading="lazy" virker for dem på samme måte som for andre bilder. Inline SVG er en del av HTML-en, så der er det ingenting å laste inn latt.

#5. Hvordan animerer du SVG-ikoner i grensesnittet

#5.1 Hvordan animere SVG med CSS

CSS-animasjoner på SVG-elementer krever ikke JavaScript. To vanlige mønstre i grensesnitt er en roterende lasteindikator og et varselikon som hopper:

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon.loading {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon.notification {
    animation: iconBounce 0.6s ease-in-out 2;
}

Disse reglene fungerer med inline SVG og kan reagere på hover, applikasjonstilstand eller klasser som legges til av et skript.

#5.2 Hvordan legge til Lottie-animasjoner på nettsiden

Lottie-animasjoner bygges inn via en spiller som tar seg av rendering og styring av avspillingen.

Grunnleggende Lottie-implementasjon:

<!-- Lottie-spiller i fastlåst versjon (npm: @lottiefiles/lottie-player) -->
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

<!-- Animasjon fra egen server -->
<lottie-player
    src="/animations/loading.json"
    background="transparent"
    speed="1"
    style="width: 200px; height: 200px;"
    loop
    autoplay
></lottie-player>

Spillerversjonen er låst fordi @latest kan endre oppførselen til siden etter en pakkeoppdatering uten at noe i koden er endret. JSON-filen med animasjonen bør helst ligge på din egen server.

Lottie-animasjoner kan bygges inn i WordPress via en shortcode eller Gutenberg-blokker, og i plugin-katalogen finnes det løsninger som legger til en Lottie-blokk med avspillingskontroll.

#5.3 Hvordan påvirker SVG-animasjoner ytelsen

Animert grafikk krever oppmerksomhet, slik at den ikke gjør siden tregere.

Begrens omfanget av animasjonen til de viktige elementene i stedet for hele grafikken. Animer konkrete egenskaper som opacity, transform eller fill, i stedet for egenskaper som utløser ny beregning av layouten.

Bruk transform til bevegelse (translate, scale, rotate). Nettlesere kan animere transform og opacity uten å beregne sidelayouten på nytt, noe som ikke gjelder top, left eller margin.

Respekter spørringen prefers-reduced-motion. Brukere som er følsomme for bevegelse, kan slå på redusert bevegelse i systemet, og siden bør da vise en statisk eller sterkt forenklet versjon:

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

#6. Beste praksis for SVG og vektorikoner

#6.1 Hvordan holde ikonene visuelt konsistente

Gode ikonsystemer holder visuell konsistens gjennom hele biblioteket.

Et felles rutenett sørger for at ikonene tar like mye plass og har lik visuell vekt. Heroicons, Feather, Lucide og Tabler tegner ikonene på et 24x24-rutenett, og Material Symbols har en standard optisk størrelse på 24 px. Når du kombinerer ikoner fra ulike kilder, er et felles rutenett den første forutsetningen for konsistens.

Ensartet strøktykkelse holder linjetykkelsen lik i hele settet. Å blande tynne og tykke strøk i samme grensesnitt ser rotete ut. Når et sett tilbyr flere tykkelser, velg én for hele grensesnittet.

Optiske korreksjoner tilpasser formene til menneskelig persepsjon. En sirkel og et kvadrat med samme mål ser ikke like store ut, derfor stikker sirkelen som regel litt utenfor kvadratets linje. Gjennomarbeidede ikonbiblioteker har disse korreksjonene innebygd.

#6.2 Farger på SVG-ikoner og mørk modus

Ikoner må fungere i ulike fargesammenhenger, fra mørk modus til merkevarestyling.

currentColor gjør at ikonet arver tekstfargen fra beholderen. Sett fill="currentColor" eller stroke="currentColor" i SVG-filen, og styr fargen i CSS:

.icon {
    color: #666;
}

.icon:hover {
    color: #ff6b6b;
}

Egne CSS-egenskaper holder orden på ikonfargene i hele systemet:

:root {
    --icon-primary: #333;
    --icon-secondary: #666;
    --icon-accent: #ff6b6b;
    --icon-disabled: #ccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --icon-primary: #eee;
        --icon-secondary: #aaa;
    }
}

.icon { color: var(--icon-primary); }
.icon.secondary { color: var(--icon-secondary); }
.icon.accent { color: var(--icon-accent); }
.icon.disabled { color: var(--icon-disabled); }

#6.3 Tilgjengelige SVG-ikoner: title, aria-hidden og role=“img”

En skjermleser ser ikke ikonet, så hvert ikon må enten beskrives eller skjules. Valget avhenger av om ikonet bærer informasjon.

Et dekorativt ikon ved siden av tekst som allerede sier det samme, bør forsvinne fra tilgjengelighetstreet. MDN nevner ikoner som et typisk brukstilfelle for aria-hidden="true" og advarer: «Ikke bruk aria-hidden="true" på elementer som kan få fokus» (MDN, aria-hidden, egen oversettelse). Attributtet arves av barna, så det kan ikke settes på forelderen til en knapp eller lenke.

Et meningsbærende ikon lagt inn inline får role="img" og et tilgjengelig navn. MDN anbefaler role="img" på det ytre <svg>-elementet, fordi skjermleseren da behandler grafikken som én helhet i stedet for å lese opp underelementene (MDN, rollen img). Når det står en synlig etikett ved siden av, er det bedre å peke på navnet med aria-labelledby, ellers med aria-label.

Elementet <title> gir grafikken en kort, tilgjengelig beskrivelse som nettlesere vanligvis viser som verktøytips. Av hensyn til kompatibilitet med SVG 1.1 bør det være det første barnet til forelderen sin (MDN, elementet title).

Et ikon som <img> fra en SVG-fil følger de samme reglene som andre bilder. W3C WAI anbefaler et tomt alt=""-attributt for dekorative bilder, fordi noen skjermlesere leser opp filnavnet når alt-attributtet mangler (W3C WAI, dekorative bilder).

<!-- Knapp med bare ikon: navnet på knappen, ikonet skjult -->
<button type="button" aria-label="Søk">
    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#icon-search"></use></svg>
</button>

<!-- Meningsbærende ikon uten synlig tekst -->
<svg role="img" aria-labelledby="status-title" viewBox="0 0 24 24">
    <title id="status-title">Status: aktiv</title>
    <circle cx="12" cy="12" r="8" fill="currentColor"/>
</svg>

<!-- Dekorativt ikon som fil -->
<img src="/icons/star.svg" alt="" width="24" height="24" />

Fokusindikatorer for interaktive ikoner lar tastaturbrukere se hvor de er:

.icon-button:focus-visible {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

Mer om WCAG-kravene for WordPress finner du i guiden til tilgjengelighet i WordPress og WCAG 2.2.

#7. Hvordan feilsøker du vanlige SVG-problemer

#Hvorfor vises SVG-ikoner forvrengt

Problemet skyldes som regel et manglende viewBox-attributt eller en konflikt i sideforholdet. Sørg for at SVG-filene har viewBox, og sett størrelsen i CSS. Ikke skriv inn både width og height fast når ikonet skal skalere.

#Hvorfor vises ikke Lottie-animasjonen

Sjekk at stien til JSON-filen er riktig og at spillerskriptet er lastet. Nettleserkonsollen viser JavaScript-feil eller nettverksfeil (for eksempel 404 eller en forespørsel blokkert av CSP-policyen).

#Hvordan tilpasse SVG-ikoner til mørk modus

Ikoner med farger skrevet fast i SVG-koden tilpasser seg ikke av seg selv. Bruk currentColor i attributtene fill og stroke, og sett fargene i CSS via spørringen prefers-color-scheme eller en temaklasse.

#Hvorfor blokkerer WordPress SVG selv med plugin

Noen hostingoppsett og sikkerhetsplugins har egne begrensninger på filtyper, uavhengig av WordPress-innstillingene. Sjekk begrensningene på servernivå og innstillingene i sikkerhetsplugins, og i Safe SVG også om rollen din har rett til å laste opp SVG.

#8. Hvordan legge inn SVG-ikoner inline ved bygging i Astro

Bruker du en headless-stack (for eksempel Astro eller Next.js) med WordPress som CMS i bakkant, kan dynamiske ikonpakker som lastes inn under kjøring gjøre JavaScript-pakkene på klientsiden større. Hent heller SVG-ikonene og legg dem inn inline i den statiske byggefasen.

Her er et eksempel på en Astro-komponent som leser et ikon statisk under kompileringen:

---
// Icon.astro - A build-time SVG inline fetcher
interface Props {
  name: string;
  className?: string;
}

const { name, className = 'icon-svg' } = Astro.props;

// Read SVG content from a local directory or fetch from API
const svgPath = `src/assets/icons/${name}.svg`;
let svgContent = '';

try {
  const fs = await import('fs/promises');
  const raw = await fs.readFile(svgPath, 'utf8');
  
  // Extract content inside the <svg> wrapper
  svgContent = raw.replace(/<svg[^>]*>|<\/svg>/g, '');
} catch (err) {
  console.error(`Build Error: Could not locate icon: ${name}.svg`);
}
---

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24" 
  class={className} 
  fill="none" 
  stroke="currentColor" 
  stroke-width="2" 
  set:html={svgContent}
/>

Komponenten genererer null JavaScript på klientsiden: vektordataene legges rett inn i HTML-en under den statiske kompileringen.

#Hvordan bygge et SVG-sprite-ark ved bygging

For å slippe å legge inn de samme SVG-banene flere ganger i ett dokument kan du bygge et statisk sprite-ark. Hvert ikon blir et <symbol>, og banekoden kommer på siden én gang selv om ikonet vises mange ganger. Kjør ikonene gjennom SVGO først, som beskrevet i seksjon 4.4:

// Vite/Astro build script snippet
import fs from 'fs/promises';
import path from 'path';

async function buildSvgSprite(iconDir, outputFile) {
  const files = await fs.readdir(iconDir);
  let spriteContent = '<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">\n';

  for (const file of files) {
    if (path.extname(file) === '.svg') {
      const id = path.basename(file, '.svg');
      const content = await fs.readFile(path.join(iconDir, file), 'utf8');
      
      // Extract contents and wrap in <symbol>
      const cleanContent = content
        .replace(/<svg[^>]*>/, `<symbol id="icon-${id}" viewBox="0 0 24 24">`)
        .replace('</svg>', '</symbol>');
      
      spriteContent += cleanContent + '\n';
    }
  }
  
  spriteContent += '</svg>';
  await fs.writeFile(outputFile, spriteContent);
}

Skriv ut den genererte spriten én gang per side (i et WordPress-tema er kroken wp_body_open et godt sted), og vis til hvert ikon med <use>: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

#9. Hvordan generere SVG-avatarer som Base64-data-URI-er

For å slippe å lagre tusenvis av enkeltstående profilbilder til kommentarfelt eller kataloger kan du generere vektoravatarer programmatisk. Returner dem som base64-kodede data-URI-er, så kan du bruke dem direkte i CSS-egenskaper for bakgrunn eller i vanlige src-attributter.

Her er en PHP-implementasjon som genererer geometriske SVG-avatarer og returnerer dem som data-URI-er:

declare(strict_types=1);

namespace WPPoland\UI\Avatars;

/**
 * Generates a base64 encoded SVG Data URI based on a string hash.
 */
function get_avatar_data_uri( string $seed ): string {
    $hash = md5( strtolower( trim( $seed ) ) );
    
    $color_primary   = '#' . substr( $hash, 0, 6 );
    $color_secondary = '#' . substr( $hash, 6, 6 );
    
    $shape_type = hexdec( substr( $hash, 12, 1 ) ) % 4;
    $rotation   = hexdec( substr( $hash, 13, 2 ) );

    $svg = sprintf(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" style="background:%s;">',
        esc_attr( $color_secondary )
    );

    $svg .= sprintf( '<g transform="rotate(%d 50 50)">', $rotation );

    switch ( $shape_type ) {
        case 0:
            $svg .= sprintf( '<circle cx="50" cy="50" r="30" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 1:
            $svg .= sprintf( '<polygon points="50,15 15,80 85,80" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 2:
            $svg .= sprintf( '<polygon points="50,10 90,50 50,90 10,50" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 3:
            $svg .= sprintf( '<rect x="25" y="25" width="50" height="50" rx="10" fill="%s" />', esc_attr( $color_primary ) );
            break;
    }

    $svg .= '</g></svg>';

    return 'data:image/svg+xml;base64,' . base64_encode( $svg );
}

Hjelpefunksjonen gir en skalerbar avatar uten at noen bildefil lagres:

<img src="<?php echo esc_attr( get_avatar_data_uri( '[email protected]' ) ); ?>" alt="User Avatar" />

#10. Sjekkliste for overgangen fra PNG-ikoner til SVG

• Kjør hvert ikon gjennom SVGO (se seksjon 4.4) før det havner i temaet eller i sprite-bygget.
• Server gjentatte ikoner fra én <symbol>-sprite og vis til dem med <use>.
• Bytt ut fastkodede farger med currentColor, og styr farger og mørk modus med egne CSS-egenskaper.
• Gi hvert meningsbærende ikon role="img" og et tilgjengelig navn; skjul dekorative ikoner med aria-hidden="true" (aldri på elementer som kan få fokus) eller alt="" på <img>.
• Tillat SVG-opplasting bare via en sanitizer (Safe SVG eller enshrined/svg-sanitize) og bare for roller du stoler på.
• Sjekk lisensen til hvert sett du legger til, og behold lisensmerknaden eller kommentarene med kreditering i filene du leverer.

#Oppsummering

Figurene fra Smashing Magazines avatarsamling fra 2008 hører til designhistorien, men ideen de stod for, å dele ressurser gratis, er mer utbredt i dag enn den gang. Ikonbiblioteker, avatargeneratorer og illustrasjonssamlinger i 2026 gir prosjekter av alle størrelser tilgang til konsistente visuelle systemer.

En gratis ressurs har fortsatt en lisens. Før du tar den i bruk, sjekk om settet krever kreditering (Font Awesome Free, stilen Fun Emoji i DiceBear), om det holder å beholde lisensfilen (MIT, ISC, Apache 2.0), eller om det ikke krever noe (CC0).

Et godt implementert ikon er beskrevet eller skjult for skjermleseren, arver farge via currentColor, går gjennom sanitering hvis det havner i mediebiblioteket, og gjennom SVGO før det havner i temaet.

[1] W3C-spesifikasjonen SVG 2; https://www.w3.org/TR/SVG2/

[2] MDN Web Docs, SVG; https://developer.mozilla.org/en-US/docs/Web/SVG

[3] lottie-web (Airbnb); https://github.com/airbnb/lottie-web

[4] DiceBear, HTTP-API og lisenser; https://www.dicebear.com/licenses/

[5] Humaaans; https://www.humaaans.com/

[6] unDraw; https://undraw.co/

[7] WordPress-pluginen Safe SVG; https://wordpress.org/plugins/safe-svg/

[8] Font Awesome Free, lisensfil; https://github.com/FortAwesome/Font-Awesome/blob/7.x/LICENSE.txt

[9] W3C WAI, dekorative bilder; https://www.w3.org/WAI/tutorials/images/decorative/

Safe SVG og et ryddig ikonsett hindrer både at markup-en svulmer opp og at opplastinger blir et sikkerhetshull. Skal grafikken settes inn i et tema uten at ytelsen ryker, hjelper vi med frontend og WordPress-utvikling.