DevPanicZone Logo DevPanicZone! Cheatsheets.

SVG Sprites - Eigene Icons effizient einbinden

Eine Datei, viele Icons - wie du SVG Sprites erstellst, einbindest und mit CSS stylst.

Warum SVG Sprites?

Icons gehören zu jeder Website. Aber wie bindet man sie am besten ein? Es gibt mehrere Ansätze - und jeder hat seine Tücken:

Einzelne Dateien

10 Icons = 10 HTTP-Requests

Langsam, viele Verbindungen

Inline SVG

Aufgeblähtes HTML

Schwer wartbar, unübersichtlich

Icon-Fonts

Große Dateien (~200-400 KB)

Font-Loading-Probleme

SVG Sprite

1 Datei, alle Icons

Schnell, sauber, stylebar

Vorteile von SVG Sprites

Das bekommst du mit SVG Sprites
  • Ein Request: Alle Icons in einer Datei - wird einmal geladen und gecached
  • Sauberes HTML: Statt 20 Zeilen Pfade nur <use href="#icon-id"/>
  • CSS-Styling: Farbe und Größe per CSS steuerbar
  • Wartbar: Icon ändern = nur Sprite-Datei anpassen
  • DSGVO-konform: Alles lokal, keine externen Requests
  • Winzig: 10-20 eigene Icons ≈ 2-5 KB

Vorher vs. Nachher

So sieht der Unterschied im Code aus:

Vorher: Inline SVG 
<div class="info-box notice">
    <strong class="box-title notice">
        Hinweis
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.5 30.5" 
             width="30" height="30" fill="currentColor">
            <path d="M15.25,0C6.83,0,0,6.83,0,15.25s6.83,15.25,15.25,
                15.25,15.25-6.83,15.25-15.25S23.67,0,15.25,0ZM24.85,
                10.96l-10.96,10.96c-.33.33-.76.49-1.19.49s-.86-.16...">
            </path>
        </svg>
    </strong>
    <p>Das ist ein Hinweis.</p>
</div>
Nachher: SVG Sprite 
<div class="info-box notice">
    <strong class="box-title notice">
        Hinweis
        <svg class="icon-ui">
            <use href="#dpz-check-circle"/>
        </svg>
    </strong>
    <p>Das ist ein Hinweis.</p>
</div>

Ergebnis: Sauberes, lesbares HTML - und die Icons laden trotzdem blitzschnell.

Was ist ein SVG Sprite?

Ein SVG Sprite ist eine einzelne Datei, die mehrere Icons als Symbole enthält. Statt 10 einzelne Dateien zu laden, lädst du eine - und rufst die Icons per ID ab.

Aufbau eines Sprites

SVG 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    
    <!-- Symbol 1: Check-Icon -->
    <symbol id="icon-check" viewBox="0 0 24 24">
        <path d="M20 6 9 17l-5-5"/>
    </symbol>
    
    <!-- Symbol 2: Info-Icon -->
    <symbol id="icon-info" viewBox="0 0 32 32">
        <path d="M16,1C7.72,1,1,7.72,1,16s6.72..."/>
    </symbol>
    
    <!-- Weitere Symbole... -->
    
</svg>
So funktioniert's
  • style="display:none" - Das Sprite selbst ist unsichtbar
  • <symbol id="..."> - Jedes Icon bekommt eine eindeutige ID
  • viewBox - Definiert das Koordinatensystem des Icons
  • Die Pfade <path>, <circle>, etc. definieren die Form

Icons aus dem Sprite abrufen

Mit <use href="#id"> rufst du ein Symbol ab:

HTML 
<!-- Check-Icon anzeigen -->
<svg class="icon">
    <use href="#icon-check"/>
</svg>

<!-- Info-Icon anzeigen -->
<svg class="icon">
    <use href="#icon-info"/>
</svg>
Wichtig: Das Sprite muss im DOM sein!

Die <use href="#...">-Referenz funktioniert nur, wenn das Sprite im selben HTML-Dokument eingebunden ist - entweder inline oder per JavaScript injiziert.

Die Sprite-Datei erstellen

Erstelle die Datei /assets/icons/sprite.svg mit deinen Icons:

Grundstruktur

sprite.svg 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    
    <!-- ===== CHECK CIRCLE ===== -->
    <symbol id="icon-check-circle" viewBox="0 0 32 32" fill="currentColor">
        <path d="M16,1C7.72,1,1,7.72,1,16s6.72,15,15,15..."/>
    </symbol>
    
    <!-- ===== INFO CIRCLE ===== -->
    <symbol id="icon-info" viewBox="0 0 32 32" fill="currentColor">
        <path d="M15,0C6.72,0,0,6.72,0,15s6.72,15,15,15..."/>
    </symbol>
    
    <!-- ===== WARNING CIRCLE ===== -->
    <symbol id="icon-warning" viewBox="0 0 32 32" fill="currentColor">
        <path d="M16,1C7.72,1,1,7.72,1,16s6.72,15,15,15..."/>
    </symbol>
    
    <!-- Weitere Icons hier einfügen -->
    
</svg>

Eigene Icons hinzufügen

Du hast ein Icon in Illustrator, Figma oder einem anderen Tool erstellt? So fügst du es zum Sprite hinzu:

Schritt 1: SVG exportieren

Exportiere dein Icon als SVG. Du erhältst so etwas:

Exportiertes SVG 
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 
     viewBox="0 0 32 32">
    <path fill="#000" d="M16,1C7.72,1,1,7.72,1,16..."/>
</svg>

Schritt 2: Zu Symbol umwandeln

Als Symbol im Sprite 
<symbol id="icon-mein-icon" viewBox="0 0 32 32" fill="currentColor">
    <path d="M16,1C7.72,1,1,7.72,1,16..."/>
</symbol>
Umwandlungs-Checkliste
  • <svg> → <symbol>
  • xmlns, width, height entfernen
  • id="icon-NAME" hinzufügen (eindeutig!)
  • viewBox behalten!
  • fill="#000" → fill="currentColor" (für CSS-Styling)
  • Bei Stroke-Icons: stroke="currentColor"

Namenskonvention

Halte deine Icon-IDs konsistent. Beispiele:

Empfohlene Benennung 
<!-- Projekt-Präfix für eigene Icons -->
<symbol id="dpz-check-circle">...</symbol>
<symbol id="dpz-info-circle">...</symbol>
<symbol id="dpz-warning-circle">...</symbol>

<!-- Oder generisch -->
<symbol id="icon-check">...</symbol>
<symbol id="icon-info">...</symbol>
<symbol id="icon-warning">...</symbol>

<!-- Bibliotheks-Präfix für externe Icons -->
<symbol id="lucide-star">...</symbol>
<symbol id="lucide-heart">...</symbol>

Sprite einbinden

Es gibt mehrere Wege, das SVG Sprite in deine Seite zu bekommen. Alle sind 100% lokal - keine externe Verbindung nötig.

Methode 1: Per JavaScript laden (empfohlen)

Die eleganteste Lösung: Das Sprite wird einmal geladen und ist auf allen Seiten verfügbar.

JavaScript 
// ===================================
// SVG SPRITE LADEN
// ===================================

fetch('/assets/icons/sprite.svg')
    .then(response => {
        if (!response.ok) {
            throw new Error('Sprite nicht gefunden');
        }
        return response.text();
    })
    .then(svg => {
        // Sprite am Anfang des body einfügen
        document.body.insertAdjacentHTML('afterbegin', svg);
        console.log('✅ SVG Sprite geladen');
    })
    .catch(error => {
        console.warn('⚠️ Sprite konnte nicht geladen werden:', error);
    });
Warum diese Methode?
  • Zentral: Ein Script, alle Seiten versorgt
  • Gecached: Browser speichert die SVG-Datei
  • Wartbar: Icons ändern = nur Sprite-Datei anpassen
  • Sauber: Kein Copy-Paste in jede HTML-Datei

Methode 2: Direkt im HTML

Für einzelne Seiten oder wenn du kein JavaScript möchtest:

HTML 
<body>
    <!-- SVG Sprite direkt am Anfang von body -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
        <symbol id="icon-check" viewBox="0 0 24 24">
            <path d="M20 6 9 17l-5-5"/>
        </symbol>
        <!-- weitere Symbole -->
    </svg>
    
    <!-- Rest der Seite -->
    <header>...</header>
</body>

Methode 3: PHP Include

Wenn du PHP nutzt, kannst du das Sprite includen:

PHP 
<body>
    <?php include 'assets/icons/sprite.svg'; ?>
    
    <!-- Rest der Seite -->
</body>
Welche Methode wählen?

JavaScript (Methode 1)

  • Statische HTML-Seiten
  • Zentrale Verwaltung gewünscht
  • Build-Tools im Einsatz

PHP Include (Methode 3)

  • PHP-basierte Projekte
  • WordPress Themes
  • Kein JavaScript gewünscht

Icons verwenden

Basis-Syntax

HTML 
<!-- Grundform -->
<svg class="icon">
    <use href="#icon-check"/>
</svg>

<!-- Mit zusätzlicher Klasse -->
<svg class="icon icon-green">
    <use href="#dpz-check-circle"/>
</svg>

Farben ändern

Wenn dein Icon fill="currentColor" oder stroke="currentColor" verwendet, kannst du die Farbe per CSS steuern:

CSS 
/* Basis-Icon erbt die Textfarbe */
.icon {
    width: 1em;
    height: 1em;
    color: currentColor;  /* Erbt vom Parent */
}

/* Farbvarianten */
.icon-green {
    color: var(--color-success, #22c55e);
}

.icon-red {
    color: var(--color-danger, #ef4444);
}

.icon-yellow {
    color: var(--color-warning, #eab308);
}

.icon-blue {
    color: var(--color-info, #3b82f6);
}
Wichtig: color, nicht fill!

Da das Icon currentColor verwendet, steuerst du die Farbe über die CSS-Property color - nicht fill!

Größe ändern

CSS 
/* Relativ zur Schriftgröße */
.icon {
    width: 1em;
    height: 1em;
}

/* Feste Größen */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

Praktische Icon-Klassen

Eine komplette Utility-Klassen-Sammlung für Icons:

CSS 
/* ===================================
   ICON UTILITY CLASSES
   =================================== */

/* Basis-Icon */
.icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Icon in UI-Elementen (Buttons, Boxen) */
.icon-ui {
    width: 24px;
    height: 24px;
}

/* Inline-Icon (im Fließtext) */
.icon--inline {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;  /* Optische Ausrichtung */
    margin-inline: 0.15em;
}

/* Farben */
.icon-green  { color: var(--color-success); }
.icon-red    { color: var(--color-danger); }
.icon-yellow { color: var(--color-warning); }
.icon-blue   { color: var(--color-info); }
.icon-muted  { color: var(--color-text-muted); }

Verwendungsbeispiele

HTML 
<!-- In einer Überschrift -->
<h2>
    Erfolg!
    <svg class="icon-ui icon-green">
        <use href="#dpz-check-circle"/>
    </svg>
</h2>

<!-- Im Fließtext -->
<p>
    Das ist ein Hinweis 
    <svg class="icon icon--inline icon-blue">
        <use href="#dpz-info-circle"/>
    </svg>
    mit einem Icon.
</p>

<!-- In einem Button -->
<button class="btn">
    <svg class="icon">
        <use href="#icon-download"/>
    </svg>
    Download
</button>

<!-- In einer Liste -->
<ul>
    <li>
        <svg class="icon icon-green">
            <use href="#dpz-check-inline"/>
        </svg>
        Feature vorhanden
    </li>
</ul>

Barrierefreiheit (Accessibility)

Icons sind meistens dekorativ - sie unterstützen den Text, tragen aber keine eigene Bedeutung. In diesem Fall sollten sie für Screenreader unsichtbar sein.

Dekorative Icons

Die meisten Icons sind dekorativ - der danebenstehende Text erklärt bereits, worum es geht:

HTML 
<!-- Dekoratives Icon: aria-hidden="true" -->
<button>
    <svg class="icon" aria-hidden="true">
        <use href="#icon-download"/>
    </svg>
    Download
</button>

<!-- In Info-Boxen -->
<div class="info-box">
    <strong>
        Hinweis
        <svg class="icon-ui" aria-hidden="true">
            <use href="#dpz-info-circle"/>
        </svg>
    </strong>
    <p>Das ist wichtig.</p>
</div>

Bedeutungstragende Icons

Wenn ein Icon alleine steht und eine Aktion oder Information vermittelt:

HTML 
<!-- Icon-Only Button: role + aria-label -->
<button class="btn-icon" aria-label="Menü schließen">
    <svg class="icon" role="img">
        <use href="#icon-x"/>
    </svg>
</button>

<!-- Status-Icon ohne Text -->
<span>
    <svg class="icon icon-green" role="img" aria-label="Erfolgreich">
        <use href="#dpz-check-circle"/>
    </svg>
</span>
Faustregel
  • Text daneben? → aria-hidden="true"
  • Icon alleine? → role="img" + aria-label="Beschreibung"

Praxisbeispiel: Info-Boxen

So sehen die verschiedenen Info-Box-Varianten mit Sprite-Icons aus:

Info

Das ist eine neutrale Information.

Erfolg

Die Aktion war erfolgreich!

Warnung

Achtung, hier ist etwas zu beachten.

Fehler

Etwas ist schiefgelaufen.

Der Code dazu

HTML 
<!-- Info-Box mit Sprite-Icon -->
<div class="info-box notice">
    <strong class="box-title notice">
        Erfolg
        <svg class="icon-ui" aria-hidden="true">
            <use href="#dpz-check-circle"/>
        </svg>
    </strong>
    <p>Die Aktion war erfolgreich!</p>
</div>

Bonus: Icon-Bibliotheken als Sprite

Du musst nicht alle Icons selbst erstellen. Es gibt hervorragende Open-Source-Bibliotheken, die sich perfekt für den Sprite-Workflow eignen.

Lucide Icons (empfohlen)

Lucide ist eine moderne, schlanke Icon-Library - perfekt für SVG Sprites:

  • 1500+ Icons - konsistentes Design
  • MIT-Lizenz - frei nutzbar
  • 24×24 viewBox - einheitlich
  • Stroke-basiert - skaliert perfekt

Workflow: Lucide Icon zum Sprite hinzufügen

  1. Gehe zu lucide.dev/icons
  2. Suche dein Icon und klicke "Copy SVG"
  3. Wandle das <svg> in ein <symbol> um
  4. Füge es in deine Sprite-Datei ein
Von Lucide kopiert 
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
     viewBox="0 0 24 24" fill="none" stroke="currentColor" 
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 6 9 17l-5-5"/>
</svg>
Als Symbol im Sprite 
<symbol id="lucide-check" viewBox="0 0 24 24" fill="none" 
        stroke="currentColor" stroke-width="2" 
        stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 6 9 17l-5-5"/>
</symbol>

Weitere sprite-freundliche Bibliotheken

Library Icons Stil Link
Lucide 1500+ Stroke, minimalistisch lucide.dev
Heroicons 450+ Outline & Solid heroicons.com
Feather 280+ Stroke, minimalistisch feathericons.com
Tabler Icons 4000+ Stroke, vielfältig tabler-icons.io

Warum Bootstrap Icons / Font Awesome nicht ideal sind

Diese Libraries funktionieren als Sprite, sind aber nicht dafür optimiert:

Bootstrap Icons
  • Primär als Icon-Font konzipiert
  • ~300 KB für die Font-Datei
  • SVGs müssen einzeln gesammelt werden
Font Awesome
  • ~250 KB (Free) bis 2 MB (Pro)
  • Komplexes Build-System
  • Viele Features, die du nicht brauchst
Fazit

Wenn du den Sprite-Workflow nutzen willst, wähle eine Library, die dafür gemacht ist - oder erstelle deine eigenen Icons. Das Ergebnis: Wenige KB statt hunderte.

Zusammenfassung

SVG Sprites - Quick Reference
  • Sprite-Datei: /assets/icons/sprite.svg
  • Laden: Per JavaScript, Inline oder PHP Include
  • Verwenden: <svg class="icon"><use href="#icon-NAME"/></svg>
  • Farbe: CSS color (nicht fill!)
  • Größe: CSS width / height
  • Erweitern: Neues <symbol> in Sprite einfügen
  • Accessibility: aria-hidden="true" für dekorative Icons
Vorteile
  • Ein Request für alle Icons
  • Winzig (~2-5 KB für 10-20 Icons)
  • 100% lokal, DSGVO-konform
  • CSS-Styling möglich
  • Sauberes, lesbares HTML
  • Leicht erweiterbar
Nachteile
  • Manuelle Icon-Auswahl nötig
  • Icons müssen als Symbol formatiert werden
  • Sprite muss im DOM eingebunden sein

Mehr aus HTML

Tutorials werden geladen...