Kostenlose Vektor-Avatare und Icons im UI-Design, Geschichte und Heute

Als dieser Beitrag 2008 zum ersten Mal erschien, sah die Welt des digitalen Designs ganz anders aus als heute. Smashing Magazine hatte gerade die Sammlung “Vector Girl Avatars” veröffentlicht: rundliche, leicht pummelige Figuren im PSD- und AI-Format, ganz in der Ästhetik der Web-2.0-Ära. Verläufe, Schatten und aufwendige Illustrationen bestimmten damals die Designtrends, und jeder Webmaster kannte die Routine: ZIP-Pakete mit Icons herunterladen und sie in Photoshop von Hand für das Web zuschneiden.

Aus der Sicht von 2026 ist dieses Set ein Stück Designgeschichte. Der Bedarf an guten, kostenlosen Grafik-Ressourcen ist nicht kleiner geworden, geändert hat sich die Technik. Skalierbare Vektoren (SVG) haben Rasterformate abgelöst, Lottie-Animationen ergänzen statische Bilder, und moderne Interfaces verlangen einen durchdachten Umgang mit Lizenzen, Barrierefreiheit und der Sicherheit visueller Ressourcen.

Dieser Leitfaden beschreibt, wie sich Vektor-Ressourcen entwickelt haben, stellt die 2026 verfügbaren kostenlosen Bibliotheken samt ihren Lizenzen vor und zeigt, wie Sie Vektorgrafik in Webprojekten und WordPress-Websites einsetzen.

#1. Wie digitale Icons vom Pixel Art zu SVG kamen

#1.1 Welche Grenzen Bitmap-Icons hatten

Die Geschichte digitaler Icons hängt eng mit den technischen Grenzen der jeweiligen Epoche zusammen. In den frühen Jahren des Internets arbeiteten Designer vor allem mit Bitmap-Grafiken, also Bildern aus festen Pixeln, die beim Skalieren über ihre Originalgröße hinaus an Qualität verloren. Deshalb mussten Gestalter jedes Icon in mehreren Größen vorbereiten.

Icon-Design in den 90er-Jahren und Anfang der 2000er drehte sich um Präzision auf Pixelebene. Icons wurden in kleinen Formaten gezeichnet (16x16, 24x24, 32x32 Pixel), in denen jedes einzelne Pixel optisch zählte. Die Pixel-Art-Ästhetik entstand nicht als künstlerische Entscheidung, sondern aus praktischer Notwendigkeit: Designer glätteten Kanten von Hand, damit die Bilder bei geringer Auflösung lesbar blieben.

Die Alpha-Transparenz im PNG-Format war ein großer Fortschritt, denn Icons fügten sich damit ohne die ausgefransten Kanten in unterschiedliche Hintergründe ein, die bei der 1-Bit-Transparenz von GIF typisch waren. Das Grundproblem blieb jedoch: Wer ein Icon über die vorgesehenen Maße hinaus skalierte, sah Pixel, und Bildschirme mit unterschiedlicher Pixeldichte wurden immer zahlreicher.

#1.2 Warum SVG zum Standard für Icons wurde

Scalable Vector Graphics (SVG) lösten das Bitmap-Problem, weil sie ein Bild unabhängig von der Auflösung beschreiben. Eine Bitmap definiert ein Bild als Raster farbiger Pixel, SVG beschreibt Formen, Linien, Kurven, Füllungen und Konturen mathematisch, sodass sie in jeder Größe scharf dargestellt werden.

SVG 1.1 ist eine W3C-Empfehlung, sein Nachfolger SVG 2 hat weiterhin den Status Candidate Recommendation: Den neuesten Snapshot dieser Spezifikation hat das W3C am 6. Oktober 2026 veröffentlicht. In der Praxis wurde SVG durch die native Unterstützung in Browsern und die Möglichkeit verbreitet, das <svg>-Element direkt in HTML5 einzubetten. Responsive Webdesign, das sich etwa ab 2010 entwickelte, beschleunigte den Wandel zusätzlich, denn Designer suchten Grafiken, die auf Bildschirmen jeder Größe und Pixeldichte scharf aussehen.

SVG hat drei technische Vorteile, die seine Stellung im Icon-Design erklären. Erstens die Skalierbarkeit: Dasselbe Icon wird auf einer Smartwatch ebenso sauber dargestellt wie auf einem 5K-Monitor. Zweitens die geringe Dateigröße: Das Lupen-Icon aus Heroicons (24/outline/magnifying-glass.svg im Repository des Projekts) hat 296 Bytes, das Icon search.svg aus Lucide 275 Bytes (gemessen am 12. Oktober 2026). Drittens die Steuerung per Code: CSS und JavaScript können jedes Element einer Vektorgrafik verändern, was Hover-Effekte, Animationen und eine vom Anwendungszustand abhängige Gestaltung ermöglicht.

#1.3 Was Lottie-Animationen sind

Der nächste Schritt nach statischem SVG war animierte Vektorgrafik. Lottie ist eine Bibliothek von Airbnb, die laut der Dokumentation des Projekts lottie-web Animationen aus Adobe After Effects liest, die mit dem Plugin Bodymovin als JSON exportiert wurden, und sie nativ in Web- und Mobil-Apps rendert.

Lottie-Dateien sind JSON-Darstellungen von Animationen aus After Effects. Sie enthalten alles, was zum Rendern nötig ist: Pfade, Füllungen, Transformationen und Keyframe-Daten. Die Bibliothek unterstützt Abspielen, Schleifen, das Springen zu einem bestimmten Frame und das Ändern von Eigenschaften per Code.

Für das Interface-Design bedeutet das: Ladeanimationen, Erfolgsbestätigungen, Onboarding-Sequenzen und Mikrointeraktionen können vektorbasiert und per Code steuerbar sein, statt als GIF oder Video eingebettet zu werden.

#2. Warum Vektorgrafiken im UI weiterhin unverzichtbar sind

#2.1 Vektorgrafik im responsiven Design

Responsive Webdesign hat die Anforderungen an Interface-Grafiken verändert. Seit Websites Smartphones, Tablets, Laptops und große Monitore bedienen, fallen die Grenzen von Bitmaps immer stärker ins Gewicht. Ein einzelnes Icon erscheint an einer Stelle mit 16 Pixeln und an einer anderen mit 64 Pixeln.

Vektorgrafik löst dieses Problem. Ein SVG-Icon legt sein Aussehen über eine mathematische Beschreibung fest, nicht über ein Pixelraster, und wird daher in jeder Größe ohne Qualitätsverlust dargestellt. Eine einzige Quelldatei ersetzt einen Satz von Varianten in verschiedenen Auflösungen, was sowohl die Arbeit im Team als auch die Zahl der herunterzuladenden Dateien verringert.

SVG ist ein Textformat (XML). Der Server kann es deshalb bei der Übertragung genauso komprimieren wie HTML und CSS, und der Browser stellt es ohne zusätzliche Plugins dar.

#2.2 Wie SVG-Icons die Barrierefreiheit verbessern

SVG unterstützt Auszeichnungen, die assistive Technologien auslesen können. Die Elemente <title> und <desc> liefern eine Textalternative, und mit ARIA-Attributen lässt sich ein Icon als bedeutungstragend oder dekorativ kennzeichnen. Details und Codebeispiele finden Sie in Abschnitt 6.3.

Vektorgrafik kommt außerdem besser mit Seitenzoom und Hochkontrastmodi zurecht. Vergrößert ein Nutzer den Text, skaliert ein SVG-Icon ohne die Artefakte, die beim Vergrößern von Bitmaps über ihre native Auflösung hinaus entstehen.

Da sich SVG-Eigenschaften per CSS ändern lassen, kann ein Icon auf Nutzerpräferenzen reagieren, etwa auf die Media Queries prefers-color-scheme und prefers-contrast, und dabei Farbe oder Konturstärke anpassen.

#2.3 SVG-Icons im Designsystem

Unternehmensanwendungen und umfangreiche Websites brauchen viele Icons: für Aktionen, Statusanzeigen, Navigationselemente und Begriffe. Über Hunderte von Icons hinweg ein einheitliches Bild zu wahren, ist eine Aufgabe, die der Vektor-Ansatz systematisch lösen hilft.

Designsysteme behandeln Vektor-Icons als Grundbausteine. Wenn Grundformen, Konturstärken, Eckradien und optische Korrekturen Parameter des gesamten Systems sind, bleiben neue Icons mit den bestehenden konsistent. Das verhindert die kleinen Unstimmigkeiten, die entstehen, wenn jeder Designer Icons auf seine eigene Art zeichnet.

SVG-Icons arbeiten gut mit Design Tokens zusammen: Farbe, Größe und Konturstärke eines Icons lassen sich gemeinsam mit Farben, Abständen und Typografie verwalten. Ändert sich die zentrale Definition eines Tokens, ändert sich das Aussehen der Icons in der gesamten Anwendung.

#3. Wo Sie 2026 kostenlose Vektor-Avatare und Icons finden

#3.1 SVG-Avatar-Generatoren: DiceBear, Humaaans und weitere

Statt Avatare aus einer begrenzten Bibliothek auszuwählen, können Entwickler sie programmatisch aus einer Nutzer-ID, einem Namen oder einem anderen Attribut erzeugen.

DiceBear erzeugt SVG-Avatare aus einer Eingabezeichenkette (Seed), sodass derselbe Nutzer immer denselben Avatar erhält. Die einfachste Integration ist eine URL mit der Kennung als Parameter:

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

Laut der Dokumentation der HTTP API von DiceBear ist die aktuelle API-Version 10.x (die Versionen 5.x bis 8.x sind veraltet), das Limit liegt bei 50 Anfragen pro Sekunde für SVG, und die öffentliche API ist für nicht kommerzielle Zwecke kostenlos. Für kommerzielle Nutzung oder höhere Limits empfiehlt die Dokumentation eine eigene Instanz. Der Code von DiceBear steht unter der MIT-Lizenz, jeder Avatar-Stil hat aber seine eigene Lizenz, beschrieben auf der Lizenzseite von DiceBear: Lorelei steht unter CC0 1.0, Fun Emoji unter CC BY 4.0 (Namensnennung erforderlich), Avataaars und Bottts haben eigene Bedingungen ihrer Urheber, die private und kommerzielle Nutzung erlauben.

Humaaans von Pablo Stanley ist ein modulares Illustrationssystem: Sie kombinieren Köpfe, Oberkörper, Beine und Hintergründe zu Szenen und Figuren. Die Projektseite nennt die Lizenz CC0, die kommerzielle und private Nutzung erlaubt, und verweist auf eine Version für Sketch, ein Beispiel in InVision Studio sowie eine Sammlung auf Blush.

Der modulare Ansatz hilft Anwendungen, die viele unterschiedliche Avatare brauchen. Statt aus fertigen Kombinationen zu wählen, lassen sich Varianten aus verschiedenen Bausteinen programmatisch erzeugen und an die Ästhetik der Marke anpassen.

Weitere Generatoren, die Sie kennen sollten:

• Boring Avatars: eine React-Bibliothek (MIT) der Organisation boringdesigners mit sechs Varianten (marble, beam, pixel, sunset, ring, bauhaus); der Avatar entsteht aus der Eigenschaft name, etwa einem Nutzernamen oder einer E-Mail-Adresse.
• Multiavatar: ein Generator, dessen Autoren auf der Projektseite 12.230.590.464 mögliche Avatare angeben; die vollständigen Lizenzbedingungen stehen auf einer eigenen Seite des Projekts.
• Bean Heads (früher Big Heads): eine React-Komponente von Robert Broersma unter MIT-Lizenz, mit der Sie Figuren aus Eigenschaften wie Haaren, Augen und Hautfarbe zusammensetzen.

#3.2 Kostenlose Bibliotheken für Vektor-Illustrationen

Illustrationsbibliotheken liefern Grafiken, die für den gemeinsamen Einsatz gestaltet sind, mit einheitlichem Stil, einer Palette und einer gemeinsamen Bildsprache.

unDraw von Katerina Limpitsouni ist eine Sammlung von Illustrationen im Flat-Stil, die Themen von Business bis Alltag abdeckt. Auf der Projektseite legen Sie die Akzentfarbe vor dem Download fest, sodass die Illustration sofort zur Markenpalette passt. unDraw hat eine eigene Lizenz, die auf der Projektseite veröffentlicht ist; lesen Sie sie, bevor Sie die Grafiken in einem Kundenprojekt einsetzen.

In der Praxis wählen Sie eine Illustration, stellen die Akzentfarbe ein, laden das SVG herunter und binden es ins Template ein. Den SVG-Code können Sie anschließend über CSS-Eigenschaften oder Inline-Attribute weiter gestalten.

#3.3 Kostenlose SVG-Icon-Bibliotheken

Der Markt für Icon-Bibliotheken umfasst 2026 sowohl klassische Sets als auch Systeme mit vielen Varianten.

Phosphor Icons ist eine Icon-Familie in sechs Strichstärken: Thin, Light, Regular, Bold, Fill und Duotone, unter MIT-Lizenz. Jedes Icon existiert in allen Varianten, die Sets lassen sich also ohne Brüche kombinieren. Phosphor bietet Implementierungen für React, Vue, Figma und Web Components.

Heroicons von den Machern von Tailwind CSS (Tailwind Labs) gibt es in vier Varianten: 24x24 outline, 24x24 solid, 20x20 solid und 16x16 solid. Die Pakete @heroicons/react und @heroicons/vue stellen die Icons als Komponenten bereit, das Repository des Projekts nennt die MIT-Lizenz. Heroicons passt zu Projekten auf Basis von Tailwind, funktioniert aber in jedem Projekt.

Feather Icons setzt auf Einfachheit: Jedes Icon ist auf einem 24x24-Raster gezeichnet, die Standard-Konturstärke beträgt 2. Das Projekt steht unter MIT-Lizenz.

Lucide ist ein von der Community weiterentwickelter Fork von Feather Icons mit laut Repository des Projekts über 1600 Icons, unter ISC-Lizenz. Lucide hat offizielle Pakete für React, Vue, Svelte, Angular, Astro und weitere Umgebungen.

Tabler Icons umfasst laut README des Projekts 6238 Icons (5184 Outline- und 1054 gefüllte Icons, Stand Oktober 2026), auf einem 24x24-Raster mit 2 px Kontur, unter MIT-Lizenz. Outline-Icons lassen sich über stroke-width feiner oder kräftiger darstellen.

Material Symbols von Google ist eine variable Icon-Schrift mit vier Achsen: Füllung (0 bis 100), Strichstärke (100 bis 700), Grade (von -50 bis 200) und optische Größe (20 bis 48 px). Laut Google-Repository stehen die Icons unter der Lizenz Apache 2.0.

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

#3.4 Lizenzen kostenloser Icon-Sets im Vergleich

Kostenlos heißt nicht bedingungslos. Die Unterschiede zwischen den Lizenzen betreffen vor allem die Namensnennung und das, was den Kopien der Dateien beiliegen muss.

Font Awesome trennt in der Lizenzdatei der Free-Version drei Lizenzen: CC BY 4.0 für die Icons, SIL OFL 1.1 für die als Web- und Desktop-Schriften gepackten Icons und MIT für alle übrigen Dateien. Dieselbe Datei bittet darum, die Kommentare mit der Namensnennung, die bereits in den heruntergeladenen Dateien stehen, nicht zu entfernen.

Die Lizenzen MIT und ISC verlangen, dass Copyright-Hinweis und Lizenztext jeder Kopie der Software beiliegen. Die Lizenzseite von Lucide erwähnt keine sichtbare Nennung auf der Website, die Pflicht betrifft den Hinweis in den verteilten Dateien. Apache 2.0 enthält zusätzlich eine ausdrückliche Patentlizenz.

#3.5 Icons für Social Media, Flaggen und Zahlungsmethoden

Neben Allzweck-Bibliotheken gibt es spezialisierte Sets.

Social-Media-Icons enthalten die Logos der großen Plattformen im Vektorformat. Sie eignen sich für Teilen-Buttons, Kontaktbereiche und Footer. Das Logo einer Plattform bleibt eine Marke ihres Inhabers, prüfen Sie daher die Markenrichtlinien der jeweiligen Plattform.

Flaggen-Icons zeigen die Flaggen von Staaten und Regionen im Vektorformat, nützlich für Sprachumschalter, Versandrechner und die Länderauswahl. Die Sets benennen die Dateien meist nach den Ländercodes aus ISO 3166-1, was die Zuordnung erleichtert.

Icons für Zahlungsmethoden enthalten die Logos von Zahlungskarten, digitalen Wallets und lokalen Zahlungsarten, wie sie in Warenkörben von Onlineshops verwendet werden.

#4. Wie Sie SVG professionell in WordPress integrieren

#4.1 Warum WordPress SVG standardmäßig blockiert

WordPress führt SVG nicht in der Liste der standardmäßig erlaubten Dateitypen. Der Grund ist technisch: Ein PNG-Bild besteht aus Pixeldaten, SVG dagegen ist ein XML-Dokument, das JavaScript, Verweise auf externe Ressourcen und andere vom Browser ausgeführte Konstrukte enthalten kann. Eine SVG-Datei, die direkt im Browser geöffnet wird, kann ein Skript im Kontext der Domain der Website ausführen.

Das ist ein Risiko für Cross-Site-Scripting-Angriffe (XSS). Ein Skript, das im Kontext der Website läuft, kann Sitzungsdaten auslesen oder Aktionen im Namen eines angemeldeten Administrators ausführen.

Die Sperre lässt sich sicher umgehen, wenn jede hochgeladene Datei bereinigt wird und nur vertrauenswürdige Nutzer SVG hochladen dürfen.

#4.2 Wie Sie SVG in WordPress sicher aktivieren

Das Plugin Safe SVG ist der einfachste Weg. Laut der Plugin-Seite im Verzeichnis auf WordPress.org stammt es von 10up, hat über eine Million aktive Installationen, und die Bereinigung übernimmt die Bibliothek svg-sanitizer von Daryll Doyle (enshrined/svg-sanitize). Das Plugin entfernt gefährlichen Code beim Hochladen, zeigt Vorschauen von SVG in der Mediathek, erlaubt es, SVG-Uploads auf bestimmte Nutzer zu beschränken, und optimiert Dateien optional mit SVGO (standardmäßig deaktiviert).

Die Einrichtung ist einfach: Plugin aus dem WordPress-Verzeichnis installieren und aktivieren, bei Bedarf festlegen, wer SVG hochladen darf, und die Dateien über die Mediathek hochladen. Die Bereinigung läuft bei jedem Upload automatisch.

Das Plugin SVG Support von Benbodhi (Seite im Verzeichnis) bereinigt hochgeladene Dateien ebenfalls und hat einen erweiterten Modus: Die Klasse style-svg, die Sie einem Bild-Block hinzufügen, rendert das SVG inline, sodass Sie es per CSS gestalten können.

Manuelle Bereinigung gibt Entwicklern volle Kontrolle. Das folgende Beispiel zeigt das Prinzip, reguläre Ausdrücke sind aber kein vollständiger XML-Parser. In der Produktion verwenden Sie besser die Bibliothek enshrined/svg-sanitize, dieselbe, die auch Safe SVG nutzt:

<?php
/**
 * Vereinfachtes Beispiel für die Bereinigung von SVG.
 * In der Produktion die Bibliothek enshrined/svg-sanitize verwenden.
 */
function wppoland_sanitize_svg($svg_content) {
    // Script-Tags entfernen
    $svg_content = preg_replace('/<script[^>]*?>.*?<\/script>/is', '', $svg_content);

    // Event-Handler entfernen
    $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);

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

    return $svg_content;
}

#4.3 Wie Sie Inline-SVG in ein WordPress-Theme einbinden

Inline-SVG, also SVG-Code direkt im HTML statt eines Verweises auf eine Datei, bietet Gestaltungsmöglichkeiten, die externe Dateien nicht haben. Jedes Element der Grafik ist für CSS und JavaScript erreichbar, was Hover-Effekte, dynamische Farbwechsel und Animationen erlaubt. Theme-Entwickler nutzen diesen Weg zum Beispiel, um die Farbe eines Icons beim Hover per CSS (fill: red;) zu ändern.

Grundlegende Integration von 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);

        // Attribute width/height entfernen, damit das Icon per CSS skaliert
        $svg_content = preg_replace('/(width|height)=["\'][^"\']*["\']/', '', $svg_content);

        // viewBox ergänzen, falls es fehlt
        if (strpos($svg_content, 'viewBox') === false) {
            $svg_content = preg_replace('/<svg/', '<svg viewBox="0 0 24 24"', $svg_content, 1);
        }

        // Eigene Klassen hinzufügen
        if (!empty($classes)) {
            $svg_content = preg_replace('/<svg/', '<svg class="' . esc_attr($classes) . '"', $svg_content, 1);
        }

        return $svg_content;
    }

    return '';
}

CSS-Gestaltung für Inline-SVG:

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

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

/* Beispiel für ein animiertes Icon */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

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

#4.4 Wie Sie SVG-Dateien optimieren

Die Optimierung von SVG-Dateien zählt vor allem auf Seiten mit vielen Icons.

SVGO ist laut der Dokumentation des Projekts eine Node.js-Bibliothek und ein Kommandozeilenwerkzeug zur Optimierung von SVG. Es entfernt Editor-Metadaten, Kommentare, versteckte Elemente sowie Standard- oder unnötig umständliche Werte, sofern das ohne Änderung des Aussehens möglich ist. Am besten läuft es im Build-Prozess des Themes.

Ein Sprite mit <symbol>-Elementen fasst viele Icons in einem SVG-Block zusammen, jedes Icon wird über <use> aufgerufen. Der Pfad-Code landet nur einmal auf der Seite, auch wenn das Icon mehrfach vorkommt:

<?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>
        <!-- Weitere Icons -->
    </svg>
    <?php
}
add_action('wp_body_open', 'wppoland_icon_sprite');

Ein Icon aus dem Sprite: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

Lazy Loading betrifft SVG-Dateien, die per <img> eingebunden werden: Das Attribut loading="lazy" wirkt bei ihnen genauso wie bei anderen Bildern. Inline-SVG ist Teil des HTML, dort gibt es also nichts nachzuladen.

#5. Wie Sie SVG-Icons und interaktive Grafiken animieren

#5.1 Wie Sie SVG mit CSS animieren

CSS-Animationen auf SVG-Elementen kommen ohne JavaScript aus. Zwei typische Interface-Muster sind ein rotierender Ladeindikator und ein hüpfendes Benachrichtigungs-Icon:

@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;
}

Diese Regeln funktionieren mit Inline-SVG und können auf Hover, den Anwendungszustand oder per Skript gesetzte Klassen reagieren.

#5.2 Wie Sie eine Lottie-Animation auf der Website einbinden

Lottie-Animationen werden über einen Player eingebunden, der Rendering und Wiedergabesteuerung übernimmt.

Grundlegende Lottie-Implementierung:

<!-- Lottie-Player in fest angegebener Version (npm: @lottiefiles/lottie-player) -->
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

<!-- Animation vom eigenen Server -->
<lottie-player
    src="/animations/loading.json"
    background="transparent"
    speed="1"
    style="width: 200px; height: 200px;"
    loop
    autoplay
></lottie-player>

Die Player-Version ist fest angegeben, weil @latest nach einem Paket-Update das Verhalten der Seite ändern kann, ohne dass sich am Code etwas geändert hat. Die JSON-Datei der Animation liegt am besten auf dem eigenen Server.

In WordPress lassen sich Lottie-Animationen per Shortcode oder über Gutenberg-Blöcke einbinden, und im Plugin-Verzeichnis gibt es Lösungen, die einen Lottie-Block mit Wiedergabesteuerung hinzufügen.

#5.3 Wie sich SVG-Animationen auf die Performance auswirken

Animierte Grafik braucht Aufmerksamkeit, damit sie die Seite nicht verlangsamt.

Begrenzen Sie den Umfang der Animation auf die relevanten Elemente statt auf die ganze Grafik. Animieren Sie gezielt Eigenschaften wie opacity, transform oder fill statt Eigenschaften, die eine Neuberechnung des Layouts auslösen.

Verwenden Sie für Bewegung transform (translate, scale, rotate). Browser können transform und opacity animieren, ohne das Layout der Seite neu zu berechnen, was für top, left oder margin nicht gilt.

Berücksichtigen Sie die Media Query prefers-reduced-motion. Bewegungsempfindliche Nutzer können im System reduzierte Animationen einstellen, und die Seite sollte dann eine statische oder stark vereinfachte Fassung zeigen:

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

#6. Best Practices für SVG und Vektor-Icons

#6.1 Wie Sie einen einheitlichen Icon-Stil wahren

Gute Icon-Systeme bleiben über die gesamte Bibliothek visuell konsistent.

Ein gemeinsames Raster sorgt dafür, dass Icons gleich viel Platz einnehmen und ein ähnliches optisches Gewicht haben. Heroicons, Feather, Lucide und Tabler gestalten ihre Icons auf einem 24x24-Raster, Material Symbols hat eine voreingestellte optische Größe von 24 px. Wenn Sie Icons aus verschiedenen Quellen kombinieren, ist ein gemeinsames Raster die erste Voraussetzung für Konsistenz.

Eine einheitliche Konturstärke hält die Linienstärke im ganzen Set gleich. Dünne und dicke Konturen in einem Interface zu mischen, wirkt unruhig. Bietet ein Set mehrere Stärken, wählen Sie eine für das gesamte Interface.

Optische Korrekturen passen Formen an die menschliche Wahrnehmung an. Ein Kreis und ein Quadrat mit gleichen Maßen wirken nicht gleich groß, deshalb ragt der Kreis meist leicht über die Kante des Quadrats hinaus. Ausgereifte Icon-Bibliotheken haben diese Korrekturen bereits eingebaut.

#6.2 Farben von SVG-Icons und Dark Mode

Icons müssen in unterschiedlichen Farbkontexten funktionieren, vom Dark Mode bis zur Markengestaltung.

currentColor sorgt dafür, dass ein Icon die Textfarbe seines Containers erbt. Setzen Sie in der SVG-Datei fill="currentColor" oder stroke="currentColor" und steuern Sie die Farbe per CSS:

.icon {
    color: #666;
}

.icon:hover {
    color: #ff6b6b;
}

Eigene CSS-Eigenschaften ordnen die Icon-Farben im gesamten System:

: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 Barrierefreiheit von SVG-Icons: title, aria-hidden und role=“img”

Ein Screenreader sieht kein Icon, deshalb muss jedes Icon entweder beschrieben oder ausgeblendet sein. Die Entscheidung hängt davon ab, ob das Icon eine Information trägt.

Ein dekoratives Icon neben einem Text, der bereits dasselbe sagt, sollte aus dem Barrierefreiheitsbaum verschwinden. MDN nennt Icons als typischen Anwendungsfall für aria-hidden="true" und warnt: “Verwenden Sie aria-hidden="true" nicht auf fokussierbaren Elementen” (MDN, aria-hidden, eigene Übersetzung). Das Attribut wird an Kindelemente vererbt, darf also nicht auf dem Elternelement eines Buttons oder Links stehen.

Ein bedeutungstragendes Icon, das inline eingebettet ist, erhält role="img" und einen zugänglichen Namen. MDN empfiehlt role="img" auf dem äußeren <svg>, weil der Screenreader die Grafik dann als Ganzes behandelt, statt ihre Kindelemente einzeln vorzulesen (MDN, Rolle img). Steht daneben eine sichtbare Beschriftung, verweisen Sie über aria-labelledby auf sie, andernfalls nutzen Sie aria-label.

Das Element <title> gibt der Grafik eine kurze, zugängliche Beschreibung, die Browser meist als Tooltip anzeigen. Für die Kompatibilität mit SVG 1.1 sollte es das erste Kindelement seines Elternelements sein (MDN, Element title).

Ein Icon als <img> aus einer SVG-Datei folgt denselben Regeln wie andere Bilder. W3C WAI empfiehlt für dekorative Bilder ein leeres Attribut alt="", denn ohne alt-Attribut lesen manche Screenreader den Dateinamen vor (W3C WAI, dekorative Bilder).

<!-- Button nur mit Icon: Name am Button, Icon ausgeblendet -->
<button type="button" aria-label="Suchen">
    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#icon-search"></use></svg>
</button>

<!-- Bedeutungstragendes Icon ohne sichtbaren Text -->
<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>

<!-- Dekoratives Icon als Datei -->
<img src="/icons/star.svg" alt="" width="24" height="24" />

Fokusindikatoren für interaktive Icons zeigen Tastaturnutzern, wo sie sich gerade befinden:

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

Mehr zu den WCAG-Anforderungen für WordPress finden Sie im Leitfaden zu Barrierefreiheit in WordPress und WCAG 2.2.

#7. Wie Sie typische SVG-Probleme im UI lösen

#Warum SVG-Icons verzerrt angezeigt werden

Meist liegt es an einem fehlenden viewBox-Attribut oder an widersprüchlichen Seitenverhältnissen. Stellen Sie sicher, dass Ihre SVG-Dateien ein viewBox haben, und legen Sie die Größe per CSS fest. Geben Sie width und height nicht gleichzeitig fest im Code vor, wenn das Icon skalieren soll.

#Warum eine Lottie-Animation nicht angezeigt wird

Prüfen Sie, ob der Pfad zur JSON-Datei stimmt und ob das Player-Skript geladen wurde. Die Browserkonsole zeigt JavaScript-Fehler oder Netzwerkfehler an (zum Beispiel 404 oder eine durch die CSP blockierte Anfrage).

#Wie Sie SVG-Icons an den Dark Mode anpassen

Icons mit fest im SVG-Code hinterlegten Farben passen sich nicht von selbst an. Verwenden Sie currentColor in den Attributen fill und stroke und setzen Sie die Farben per CSS über die Media Query prefers-color-scheme oder eine Theme-Klasse.

#Warum WordPress SVG trotz Plugin blockiert

Manche Hosting-Konfigurationen und Sicherheits-Plugins haben eigene Einschränkungen für Dateitypen, unabhängig von den WordPress-Einstellungen. Prüfen Sie die Einschränkungen auf Serverebene und die Einstellungen der Sicherheits-Plugins, in Safe SVG außerdem, ob Ihre Rolle SVG hochladen darf.

#8. Wie Sie SVG-Icons in Astro beim Build inline einbinden

Wenn Sie einen Headless-Stack (zum Beispiel Astro oder Next.js) mit WordPress als Backend-CMS einsetzen, können dynamisch zur Laufzeit geladene Icon-Bundles das clientseitige JavaScript-Bundle vergrößern. Lösen Sie SVG-Icons stattdessen in der statischen Build-Phase auf und binden Sie sie inline ein.

Hier ein Beispiel für eine Astro-Komponente, die ein Icon beim Kompilieren statisch einliest:

---
// 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}
/>

Diese Komponente erzeugt kein clientseitiges JavaScript: Die Vektordaten landen während der statischen Kompilierung direkt im HTML.

#Wie Sie beim Build ein SVG-Sprite-Sheet erstellen

Damit dieselben SVG-Pfade nicht mehrfach in einem Dokument stehen, erstellen Sie ein statisches Sprite-Sheet. Jedes Icon wird zu einem <symbol>, und der Pfadcode kommt nur einmal auf die Seite, auch wenn das Icon mehrfach erscheint. Optimieren Sie die Quelldateien vorher mit SVGO, wie in Abschnitt 4 beschrieben:

// 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);
}

Geben Sie das erzeugte Sprite einmal pro Seite aus (in einem WordPress-Theme eignet sich dafür der Hook wp_body_open) und verweisen Sie dann mit <use> auf jedes Icon: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

#9. Wie Sie SVG-Avatare als Base64-Data-URIs erzeugen

Statt Tausende einzelner Profilbilder für Kommentarbereiche oder Verzeichnisse zu speichern, können Sie Vektor-Avatare programmatisch erzeugen. Geben Sie diese Avatare als Base64-kodierte Data-URIs zurück, dann lassen sie sich direkt in CSS-Hintergrundeigenschaften oder in normalen src-Attributen verwenden.

Hier eine PHP-Implementierung, die geometrische SVG-Avatare erzeugt und als Data-URIs zurückgibt:

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 );
}

Diese Hilfsfunktion liefert einen skalierbaren Avatar, ohne dass eine Bilddatei gespeichert wird:

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

#10. Checkliste für den Umstieg von PNG-Icons auf SVG

• Schicken Sie jedes Icon durch SVGO (siehe Abschnitt 4), bevor es ins Theme oder in den Sprite-Build kommt.
• Liefern Sie wiederkehrende Icons aus einem <symbol>-Sprite aus und verweisen Sie mit <use> darauf.
• Ersetzen Sie fest hinterlegte Farben durch currentColor und steuern Sie Farben und Dark Mode über CSS Custom Properties.
• Geben Sie jedem bedeutungstragenden Icon role="img" und einen zugänglichen Namen; blenden Sie dekorative Icons mit aria-hidden="true" aus (nie bei fokussierbaren Elementen) oder mit alt="" bei <img>.
• Erlauben Sie SVG-Uploads nur über einen Sanitizer (Safe SVG oder enshrined/svg-sanitize) und nur für vertrauenswürdige Rollen.
• Prüfen Sie die Lizenz jedes Sets, das Sie hinzufügen, und behalten Sie Lizenzhinweise oder Attributionskommentare in den ausgelieferten Dateien.

#Zusammenfassung

Die “pummeligen Mädchen” aus der Avatar-Sammlung von Smashing Magazine aus dem Jahr 2008 gehören zur Designgeschichte, die Idee dahinter, Ressourcen kostenlos zu teilen, ist heute aber weiter verbreitet als damals. Icon-Bibliotheken, Avatar-Generatoren und Illustrationssammlungen geben 2026 Projekten jeder Größe Zugang zu einheitlichen visuellen Systemen. Die Qualität Ihres Projekts hängt weniger davon ab, wie gut Sie zeichnen, als davon, wie geschickt Sie fertige Vektor-Bausteine zu einem stimmigen Ganzen zusammenfügen.

Auch eine kostenlose Ressource hat eine Lizenz. Prüfen Sie vor dem Einsatz, ob das Set eine Namensnennung verlangt (Font Awesome Free, der Stil Fun Emoji in DiceBear), ob es genügt, die Lizenzdatei beizubehalten (MIT, ISC, Apache 2.0), oder ob gar nichts verlangt wird (CC0).

Ein gut eingesetztes Icon ist für Screenreader beschrieben oder ausgeblendet, erbt seine Farbe über currentColor, wird bereinigt, wenn es in die Mediathek wandert, und läuft durch SVGO, bevor es ins Theme kommt.

[1] W3C-Spezifikation 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 und Lizenzen; https://www.dicebear.com/licenses/

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

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

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

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

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

Icons und Illustrationen aus kostenlosen Bibliotheken müssen noch im passenden Format und als sicheres SVG ausgeliefert werden, damit sie die Website nicht ausbremsen. Diesen Teil des Projekts, von der Optimierung der Grafiken bis zur Umsetzung im Theme, können wir übernehmen.