Anleitung

Alles, was Icon Library kann, Schritt für Schritt. Über das Inhaltsverzeichnis springst du direkt zu einem Thema.

So funktioniert es

1. Wähle ein Set über die Schaltfläche Auswählen. Vorher wird nichts heruntergeladen, und jedes Set bleibt im Cache, solange die Seite offen ist.
2. Grenze ein mit Alle Kategorien (mehrere sind möglich) und dem Suchfeld, das die Icon-Namen durchsucht.
3. Lege den Stil fest mit Größe, Strich und Farbe. Sie gelten für alles, was du kopierst, herunterlädst oder ins Scratchpad schickst, und die Vorschau folgt Strich und Farbe. Einen Strich haben nur Lucide und Feather; Emojis behalten ihre eigenen Farben.
4. Klicke auf ein Icon, um sein SVG (oder das Emoji-Zeichen) zu kopieren. Ein Rechtsklick kopiert die Alternative: den Icon-Namen bei Vektor-Sets oder das Emoji in einem SVG.
5. Nutze die Schaltflächen auf jeder Karte:
   • + fügt das Icon zum Scratchpad hinzu;
   • ⋯ öffnet die Downloads (SVG, PNG in der gewählten Größe) und Als React-Komponente kopieren;
   • der Stift (alle Vektor-Sets) öffnet den Icon-Editor.

Der Icon-Editor

Der Stift auf einer Karte öffnet das Icon auf einem Raster, bereit zum Ändern. Das Icon kommt mit der Größe, dem Strich und der Farbe, die du gewählt hast.

• Form ändern: Wähle eine Form in der Liste oder auf dem Raster und ziehe ihre Punkte. Kurven zeigen ihre Kontrollpunkte, verbunden durch gestrichelte Linien; wird ein Kurvenpunkt verschoben, wandern seine Kontrollpunkte mit.
• Verschieben: Ziehe eine Form oder nutze die Pfeiltasten bzw. die Schaltflächen. Punkte rasten am Raster ein (1, ½ oder ¼ Einheit oder frei).
• Transformieren: um 90° drehen, spiegeln, vergrößern oder verkleinern — die ausgewählte Form oder, wenn nichts ausgewählt ist, das ganze Icon.
• Hinzufügen und entfernen: neue Linien, Kreise, Rechtecke und Kurven; blende eine Form aus, um das Icon ohne sie zu sehen, oder lösche sie.
• Icons kombinieren: + Icon darüber durchsucht Lucide, Feather und Bootstrap und legt ein weiteres Icon über das aktuelle, angepasst an dasselbe Raster und mit seinem eigenen Stil — ein gefüllter Bootstrap-Stern kann in einem Lucide-Herz mit Umriss sitzen. Jedes Icon erhält in der Liste eine Überschrift, die es als Ganzes auswählt, um es zu verschieben, zu drehen oder zu skalieren.
• Farben: Gib jeder Form oder jedem Icon eine eigene Farbe und Strichstärke im Bereich Auswahl. Textfarbe übernimmt wieder die Farbe des umgebenden Textes; Formen mit eigener Farbe behalten sie, wo immer das Icon eingefügt wird.
• Speichern und später weitermachen: .ile speichern lädt das Projekt als .ile-Datei herunter — eine kleine Textdatei, die bewahrt, was reines SVG verliert: aus welchem Icon jede Form stammt, ausgeblendete Formen und den Namen. Öffne sie wieder mit .ile öffnen, im Editor oder neben der Suche auf der Hauptseite, oder lege die Datei auf dem Editor ab. Das Öffnen einer Datei während der Bearbeitung lässt sich rückgängig machen.
• Code: Der SVG-Code neben dem Raster folgt jeder Änderung, und du kannst auch direkt darin schreiben. Die Vorschauen zeigen das Ergebnis in 16, 24, 32 und 48 Pixeln.
• Rückgängig und Wiederholen (Strg+Z, Strg+Y); danach das bearbeitete Icon kopieren, herunterladen oder ins Scratchpad schicken. Lucide- und Feather-Icons lassen sich auch in Lucide Studio öffnen, einem unabhängigen Online-Editor mit fortgeschritteneren Werkzeugen.

Das Scratchpad

Der Reiter Scratchpad am rechten Rand öffnet eine Schublade, in der du beim Stöbern Icons sammelst. Jedes Icon wird als HTML-Kommentar mit seinem Namen und darunter dem SVG eingefügt, sodass das Ergebnis direkt in ein Projekt passt. Du kannst auch frei schreiben. Alles kopieren kopiert den Inhalt, Leeren leert ihn. Der Text bleibt in deinem Browser gespeichert und ist beim nächsten Mal noch da.

Für KI-Assistenten

KI-Assistenten können ein Icon erstellen und es dir als Link geben, der es hier im Editor öffnet, bereit zum Anpassen. Das Icon steckt im Link selbst, hinter dem #, und wird daher nie an unseren Server gesendet. Im Editor erzeugt Link teilen denselben Link-Typ für dein eigenes Projekt. Anleitung für KIs: llms.txt.

Eine Suche teilen

Die Adressleiste folgt dem, was du gerade ansiehst — zum Beispiel ?set=lucide&q=arrow. Kopiere die Adresse, um eine Suche zu teilen oder als Lesezeichen zu speichern.

Tastenkürzel

Design, Sprache und Einstellungen

Die Seite folgt dem hellen oder dunklen Design deines Systems; die Schaltfläche im Kopfbereich wechselt es. Die Sprache wird aus deinem Browser erkannt und lässt sich im Auswahlfeld daneben ändern. Beide Einstellungen, Größe, Strich und Farbe sowie der Text des Scratchpads bleiben in deinem Browser gespeichert und sind beim nächsten Mal noch da.

Spendier mir einen Kaffee

Icon Library ist kostenlos. Wenn es dir hilft, unterstützt die Schaltfläche Spendier mir einen Kaffee (etwa 3 US$, sicher über Stripe bezahlt) die Kosten für Server, Domain und Werkzeuge. Als Dankeschön zeigt dir die Seite ab der Zahlung 30 Tage lang keine Werbung.

Nach der Zahlung erhältst du einen Unterstützer-Code. Um die Werbung auch auf einem anderen Gerät zu entfernen — bis zu 3 —, öffne dort dieselbe Schaltfläche und gib den Code ein. Die Schaltfläche erscheint nur, wenn Zahlungen verfügbar sind.

In Iconlibrary veröffentlichen

Iconlibrary ist das Icon-Set der Community: Icons, die Unterstützer im Editor gezeichnet haben, geprüft und mit allen geteilt. Es erscheint wie die anderen in der Set-Liste.

1. Öffne ein Icon im Editor und zeichne oder passe es an.
2. Klicke auf In Iconlibrary veröffentlichen, gib einen Namen ein, wähle bis zu 3 Kategorien und auf Wunsch eine Nennung (Name oder Website).
3. Dein Unterstützer-Code ist auf dem Gerät, auf dem du den Kaffee spendiert hast, bereits eingetragen; auf einem anderen Gerät gib ihn ein.
4. Bestätige, dass du das Icon erstellt hast (oder es teilen darfst) und es unter der MIT-Lizenz veröffentlichst, und sende es ab. Nach der Prüfung erscheint es in Iconlibrary.

Veröffentlicht werden können nur Grundformen — Linien, Kreise, Ellipsen, Rechtecke, Polylinien, Polygone und Paths. Markenlogos und Kopien anderer Icons werden nicht angenommen.