DevPanicZone Logo DevPanicZone! Cheatsheets.

Lucide Icons - Schlanke SVG Icons lokal einbinden

Warum Lucide eine gute Wahl ist und wie du Icons als SVG Sprite DSGVO-konform nutzt.

Warum Lucide Icons?

Icons gehören zu jeder Website - aber welche Library ist die richtige? Die großen Player sind Bootstrap Icons und Font Awesome . Beide funktionieren großartig, aber sie haben einen Nachteil: Sie sind riesig.

Hier kommt Lucide ins Spiel - eine moderne, schlanke Icon-Library die als Fork von Feather Icons entstanden ist.

Größenvergleich (Self-Hosted)

Library CSS Fonts/Icons Gesamt
Bootstrap Icons ~90 KB ~300 KB (woff2) ~390 KB
Font Awesome Free ~70 KB ~180 KB (woff2) ~250 KB
Lucide (z. B. 10 Icons) - ~2 KB ~2 KB

Der Unterschied ist enorm: Mit Lucide lädst du nur die Icons, die du wirklich brauchst - nicht tausende, die du nie verwendest.

Vorteile von Lucide

Performance

  • Nur verwendete Icons laden
  • ~200-300 Bytes pro Icon
  • Kein Font-Loading-Delay
  • Sofort sichtbar (kein FOUT)

Flexibilität

  • CSS-Styling (Farbe, Größe)
  • Stroke-Width anpassbar
  • Animierbar mit CSS
  • Pixel-perfekt skalierbar
DSGVO-Vorteil

Mit Lucide als lokales SVG Sprite gibt es keine externen Requests - keine CDNs Content Delivery Network , keine Tracking-Möglichkeiten, keine Cookie-Banner-Probleme. Alles liegt auf deinem eigenen Server.

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 -->
    <symbol id="lucide-check" viewBox="0 0 24 24">
        <path d="M20 6 9 17l-5-5"/>
    </symbol>
    
    <!-- Symbol 2: X -->
    <symbol id="lucide-x" viewBox="0 0 24 24">
        <path d="M18 6 6 18"/>
        <path d="m6 6 12 12"/>
    </symbol>
    
    <!-- Weitere Symbole... -->
    
</svg>
So funktioniert's
  • style="display:none" - Das Sprite selbst ist unsichtbar
  • <symbol id="..."> - Jedes Icon bekommt eine eindeutige ID
  • viewBox="0 0 24 24" - Lucide Icons sind 24×24 Einheiten groß
  • Die Pfade <path> definieren die Icon-Form

Icons aus dem Sprite abrufen

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

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

<!-- X-Icon anzeigen -->
<svg class="icon"><use href="#lucide-x"/></svg>

Funktioniert das auch mit Bootstrap/Font Awesome?

Jain!

SVG Sprites funktionieren mit:
  • Lucide - Ideal, dafür gemacht
  • Feather Icons - Lucides Vorgänger
  • Heroicons - Ähnliches Konzept
  • Eigene SVGs - Alles was SVG ist
Nicht optimal für:
  • Font Awesome - Primär als Icon-Font konzipiert
  • Bootstrap Icons - Font oder einzelne SVGs

Diese Libraries können als Sprite genutzt werden, aber es ist nicht ihr Hauptzweck.

Lucide Icons 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 
// ===================================
// LUCIDE ICON SPRITE LADEN
// ===================================

fetch('/assets/icons/lucide-sprite.svg')
    .then(response => {
        if (!response.ok) {
            throw new Error('Sprite nicht gefunden');
        }
        return response.text();
    })
    .then(svg => {
        document.body.insertAdjacentHTML('afterbegin', svg);
        console.log('✅ Lucide Sprite geladen');
    })
    .catch(error => {
        console.warn('⚠️ Lucide Sprite konnte nicht geladen werden:', error);
    });
Warum diese Methode?
  • Zentral: Ein Script, alle Seiten versorgt
  • Gecached: Browser speichert die SVG-Datei
  • Wartbar: Icons hinzufügen = nur Sprite-Datei ändern
  • 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="lucide-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: Server-Side Include (PHP)

Wenn du PHP nutzt, kannst du das Sprite includen:

PHP 
<body>
    <?php include 'assets/icons/lucide-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

Die Sprite-Datei erstellen

Erstelle die Datei /assets/icons/lucide-sprite.svg mit den Icons, die du brauchst:

SVG 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    
    <!-- ===== CHECK (einfacher Haken) ===== -->
    <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>
    
    <!-- ===== X (einfaches Kreuz) ===== -->
    <symbol id="lucide-x" viewBox="0 0 24 24" fill="none" 
            stroke="currentColor" stroke-width="2" 
            stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6 6 18"/>
        <path d="m6 6 12 12"/>
    </symbol>    
    
    <!-- ===== STAR ===== -->
    <symbol id="lucide-star" viewBox="0 0 24 24" fill="none" 
            stroke="currentColor" stroke-width="2" 
            stroke-linecap="round" stroke-linejoin="round">
        <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,
            17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
    </symbol>    
    
</svg>

Weitere Icons hinzufügen

Du findest alle Lucide Icons auf lucide.dev/icons . Um ein neues Icon hinzuzufü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
Vorher (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>
Nachher (als Symbol) 
<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>
Umwandlung im Überblick
  • <svg> → <symbol>
  • xmlns , width , height entfernen
  • id="lucide-NAME" hinzufügen
  • viewBox behalten!

Icons verwenden

Basis-Syntax

HTML 
<svg class="icon"><use href="#lucide-check"/></svg>
<svg class="icon"><use href="#lucide-circle-check"/></svg>
<svg class="icon"><use href="#lucide-x"/></svg>
<svg class="icon"><use href="#lucide-info"/></svg>

<!-- Eigene SVG -->
<svg class="icon icon--inline"><use href="#dpz-check-inline" /></svg>

Farben ändern

Lucide Icons nutzen stroke="currentColor" - sie erben die Textfarbe. Du kannst sie mit color stylen:

Mit CSS-Klassen (empfohlen)

CSS 
/* Base Icon Style */
.icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Farbvarianten */
.icon-green  { color: #22c55e; }
.icon-red    { color: #ef4444; }
.icon-orange { color: #f59e0b; }
.icon-blue   { color: #3b82f6; }
.icon-gray   { color: #6b7280; }
HTML 
<svg class="icon icon-green"><use href="#lucide-circle-check"/></svg>
<svg class="icon icon-red"><use href="#lucide-circle-x"/></svg>
<svg class="icon icon-orange"><use href="#lucide-triangle-alert"/></svg>
<svg class="icon icon-blue"><use href="#lucide-info"/></svg>

Mit Inline-Style

HTML 
<svg class="icon" style="color: #22c55e"><use href="#lucide-check"/></svg>
<svg class="icon" style="color: purple"><use href="#lucide-star"/></svg>
Wichtig: color, nicht fill!

Lucide Icons sind stroke-basiert (Linien), nicht fill-basiert (Flächen). Deshalb:

  • color: red → funktioniert
  • fill: red → funktioniert nicht
  • stroke: red → wird von currentColor überschrieben

Größe ändern

CSS 
.icon-sm { width: 16px; height: 16px; }
.icon    { width: 24px; height: 24px; }  /* Standard */
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }
HTML 
<svg class="icon icon-sm"><use href="#lucide-check"/></svg>
<svg class="icon"><use href="#lucide-check"/></svg>
<svg class="icon icon-lg"><use href="#lucide-check"/></svg>
<svg class="icon icon-xl"><use href="#lucide-check"/></svg>

Barrierefreiheit (Accessibility)

Icons sind meist dekorativ - sie ergänzen Text, ersetzen ihn aber nicht. Für Screenreader sollten sie versteckt werden:

HTML 
<!-- Dekoratives Icon (Standard) -->
<svg class="icon" aria-hidden="true"><use href="#lucide-check"/></svg>
<span>Erfolgreich gespeichert</span>

<!-- Icon mit Bedeutung (selten) -->
<svg class="icon" role="img" aria-label="Erfolg">
    <use href="#lucide-check"/>
</svg>
Faustregel
  • Icon + Text: aria-hidden="true" auf dem Icon
  • Nur Icon: role="img" aria-label="Beschreibung"
  • Icon-Button: aria-label auf dem Button, nicht dem Icon

Praxisbeispiel: Info-Box mit Lucide

So sieht eine Info-Box mit Lucide Icons aus:

HTML 
<!-- Vorher: Inline SVG (lang!) -->
<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..."></path>
        </svg>
    </strong>
    <p>Das ist ein Hinweis.</p>
</div>

<!-- Nachher: Lucide Sprite (kurz!) -->
<div class="info-box notice">
    <strong class="box-title notice">
        Hinweis
        <svg class="icon icon-green" aria-hidden="true">
            <use href="#lucide-circle-check"/>
        </svg>
    </strong>
    <p>Das ist ein Hinweis.</p>
</div>

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

Zusammenfassung

Lucide Icons - Quick Reference
  • Sprite-Datei: /assets/icons/lucide-sprite.svg
  • Laden: Per JavaScript, Inline oder PHP Include
  • Verwenden: <svg class="icon"><use href="#lucide-NAME"/></svg>
  • Farbe: CSS color Property (nicht fill!)
  • Größe: CSS width / height
  • Erweitern: Neues <symbol> in Sprite einfügen
Vorteile
  • Extrem klein (~2 KB für 10 Icons)
  • 100% lokal, DSGVO-konform
  • Kein Font-Loading
  • CSS-Styling möglich
  • Leicht erweiterbar
Nachteile
  • Manuelle Icon-Auswahl nötig
  • Keine Icon-Suche wie bei Font Awesome
  • Sprite muss eingebunden werden

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.

Icons, die du hier sofort aus meiner spite.svg verwenden kannst:

HTML 
<svg class="icon-ui icon-green"><use href="#dpz-check-circle" /></svg>

Mehr aus CSS

Tutorials werden geladen...