Wodurch wirkt ein Icon-Set wie aus einem Guss?
Icons gehören zusammen, wenn sie dasselbe Raster, dieselbe Linienstärke, dieselben Ecken, denselben Detailgrad und dieselbe Palette haben. Wer Icons aus verschiedenen Paketen mischt oder sie einzeln mit je einem Prompt erzeugt, verletzt meist mindestens einen dieser Punkte. Der Icon-Set-Generator zeichnet alle Icons eines Sets auf einem Bogen, nach einer einzigen Beschreibung des Stils – die Gestaltungsentscheidungen fallen also einmal für alle. Danach wird jedes Icon ausgeschnitten und in ein eigenes SVG nachgezeichnet.
Drei unserer Beispiel-Sets, jedes aus einer Liste: eine Café-App in „Linie“, ein Fitness-Tracker in „Gefüllt“ mit kantigen Ecken und eine Reise-App in „Flache Farben“ mit drei Farben.
Wie erstelle ich ein Set?
Öffne den KI-Logo-Generator und wähl Icons. Die Überschrift des Studios wechselt zum Icon-Set-Generator.
- Liste die Icons auf. Tipp die Dinge ein, die du brauchst, durch Kommas getrennt oder eins pro Zeile:
Tasse Kaffee, Croissant, Standort-Pin, Treuekarte. Jedes wird zu einem Chip. Ein Set fasst bis zu 25 Icons. - Wähl, wie sie gezeichnet werden. Linie sind Umrisse in einer Stärke, Gefüllt sind volle Formen in einer Farbe, Flache Farben sind volle Formen in bis zu drei Farben, und Wie dieses Bild folgt dem Look eines hochgeladenen Bildes (angemeldet) oder eines Logos oder Icon-Sets, das du schon erstellt hast.
- Wähl die Ecken. Abgerundet oder kantig.
- Beschreib den Stil in Worten, wenn du magst. Bis zu 300 Zeichen, zum Beispiel „freundlich und minimal, abgerundete Enden, ein bisschen handgemachte Wärme“. Dieser Satz fließt in die Zeichnung jedes Icons im Set ein.
- Absenden. Jede Kachel zeigt, wie ihr Icon nachgezeichnet wird, und dann das fertige SVG.
Der Preis eines neuen Sets steht vor dem Absenden auf dem Button; für ein fehlgeschlagenes Set wird nichts berechnet.
Wie korrigiere ich ein Icon, ohne den Rest neu zu zeichnen?
Nutze eine Runde. In einer Runde kannst du Icons mit einer Notiz neu zeichnen („eine schlichte aufgerollte Matte, keine Textur“) und neue hinzufügen, bis zu neun Änderungen auf einmal. Neu gezeichnete und hinzugefügte Icons entstehen im Stil des Sets und passen deshalb weiter dazu. Die ersten Runden eines Sets sind inklusive; kostet eine Runde Credits, steht das vor dem Start auf ihrem Button.
Ist nur ein einzelnes Detail falsch und Neuzeichnen wäre übertrieben, öffne das Icon im SVG-Editor und ändere den Pfad oder die Farbe direkt.
Was ist im Download enthalten?
Die ZIP hat drei Teile:
| Ordner | Inhalt |
|---|---|
svg/ |
ein SVG pro Icon, viewBox="0 0 24 24" mit 2 px Innenabstand |
png/ |
jedes Icon als transparentes PNG in 16, 24, 32, 48, 64, 128, 256 und 512 px |
sprite.svg |
alle Icons als <symbol> mit der ID icon-NAME |
Die kleinen PNGs (bis 48 px) werden in ihrer eigenen Größe gezeichnet, damit Linien auf ganzen Pixeln liegen, statt aus einem großen Bild verkleinert zu werden. Größere Größen werden aus 512 px skaliert.
Wie verwende ich die Icons auf einer Website?
Bei einem Set in Linie oder Gefüllt zeichnen die SVGs in currentColor, ein Icon übernimmt also die Textfarbe seiner Umgebung. Du färbst es per CSS um, statt Dateien zu bearbeiten:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
Wähl im Download-Dialog Wie entworfen, wenn du die Farbe lieber fest in jede Datei geschrieben haben willst. Ein Set in Flache Farben behält immer seine eigenen Farben. Markiere dekorative Icons mit aria-hidden="true" und gib einem Icon, das allein als Button steht, einen zugänglichen Namen.
Welche Listen funktionieren am besten?
Am besten funktionieren konkrete, zeichenbare Substantive: „Fahrrad“, „Stoppuhr“, „Türschloss“. Abstrakte Wörter („Wachstum“, „Vertrauen“) geben dem Generator nichts Konkretes zum Zeichnen – mach daraus also zuerst einen Gegenstand („ein Keimling“, „ein Händedruck“). Halte den Detailgrad über die ganze Liste gleich. Ein Set, das „Punkt“ mit „Skyline einer Stadt“ mischt, wirkt ungleichmäßig, egal wie es gezeichnet wird.
Prüf vor der Veröffentlichung jedes Icon bei 16 und 24 px neben Text, prüf den Kontrast zu deinen Hintergründen und stell sicher, dass ähnliche Icons unterscheidbar bleiben. Ein Generator prüft nicht, ob ein Icon dem Zeichen eines anderen ähnelt – schau dir also jedes Icon genau an, das du als Marke eintragen lassen willst.