Generator-Familie

Icon-Galerie-Generator

Durchsuchen Sie eine kompakte SVG-Icon-Bibliothek, passen Sie Ihre Styling-Optionen live an und kopieren Sie einzelne Icons oder exportieren Sie ein wiederverwendbares Sprite-Sheet.

  • 24 integrierte Linien-Icons mit durchsuchbaren Tags
  • Live-Steuerung für Größe, Kontur, Farbe und Hintergrund
  • Einzelne Icons kopieren oder herunterladen
  • Bundle-Export ausgewählter Icons als SVG-Sprite

Icon-Regeln festlegen

Alle Einstellungen werden clientseitig angewendet. Größenangaben erfolgen in Pixeln, die Konturstärke wird auf eine Dezimalstelle gerundet. Exportierte Symbole behalten currentColor, damit sie später per CSS umgefärbt werden können.

Findet Icon-Namen und Tags wie Handel, Wetter oder Medien.

Filtern Sie die Galerie, bevor Sie Icons für den Export auswählen.

Nur Buchstaben, Zahlen und Bindestriche. Ungültige Zeichen werden automatisch entfernt.

Erlaubter Bereich: 16 bis 256 Pixel.

Erlaubter Bereich: 1,0 bis 4,0.

Ecken bleiben abgerundet, um die Lesbarkeit bei kleinen Größen zu erhalten.

Verwenden Sie einen 3- oder 6-stelligen Hex-Wert wie #16202B.

Nur für die Galerie-Vorschau. Downloads bleiben transparent.

Exportierte SVGs verwenden weiterhin einen transparenten Hintergrund.

0 Icons für den Export ausgewählt.

Kopieren Sie Inline-SVG für eine schnelle Nutzung oder wählen Sie eine Gruppe von Icons aus und generieren Sie unten eine Sprite-Datei.

0 sichtbar
0 ausgewählt

Sprite-Export

Die Bundle-Ausgabe enthält ein <symbol> pro ausgewähltem Icon. Referenzieren Sie jedes Icon später mit <use href="#icon-name">. Wenn nichts ausgewählt ist, bleiben die Export-Aktionen deaktiviert.

Wählen Sie ein oder mehrere Icons aus, um eine Sprite-Vorschau zu erstellen.


    


    

      

        

          
So funktioniert es

          
Die Galerie verwendet Inline-SVG-Markup, das direkt in der Seite gespeichert ist. Eingaben werden bereinigt, auf sichere Bereiche begrenzt und sofort neu gerendert, damit Vorschau und Export synchron bleiben.

        

      

      

        

          
1. Bibliothek filtern

          
Nutzen Sie die Schlagwortsuche und Kategoriefilter, um die Icon-Liste einzugrenzen. Die Suche vergleicht sowohl Namen als auch Tags.

        

        

          
2. Darstellung anpassen

          
Größe, Konturstärke, Endstil und Vorschaufarben aktualisieren jedes sichtbare Icon. Der Vorschau-Hintergrund hilft beim Prüfen des Kontrasts.

        

        

          
3. Bedarfsgerecht exportieren

          
Kopieren oder laden Sie einzelne Icons herunter oder wählen Sie ein Set aus und generieren Sie ein Sprite-Sheet. Die IDs nutzen Ihr gewähltes Präfix.