Icons designen: Prinzipien, Workflows und Größen

Icons designen: die Kurzfassung

Wer lernen will, wie man Icons gestaltet, braucht im Grunde nur eine Disziplin, die in jedem Schritt wiederholt wird: Zeichne für die kleinste Größe, die das Icon je einnehmen wird. Ein Icon ist keine kleine Illustration. Es ist ein Signal, das 16 px große Browser-Tabs, 24 px große Symbolleisten, 48 px große Startbildschirme und 512 px große Store-Einträge überstehen muss – meistens aus derselben Datei. Jede der folgenden Regeln existiert wegen dieser Einschränkung.

Die Kurzfassung: Wähle ein Motiv, reduziere es auf eine kräftige Silhouette, zeichne es auf einem konsistenten Raster, halte die Ausführung im gesamten Set einheitlich und exportiere die Plattformgrößen aus einem einzigen Master. Die Langfassung ist der Rest dieses Guides – inklusive drei Workflows, die dich dorthin bringen (manuelle Vektorarbeit in Illustrator oder Figma, Vorlagen-Tools und KI-Generierung), sowie der Schritte, um ein fertiges Icon auf einem iPhone, einem Android-Gerät oder einer Website zu platzieren.

Was macht ein gutes Icon aus?

Bevor du irgendein Tool anfasst, hilft es zu wissen, worauf du hinauswillst. Apples Human Interface Guidelines und Googles Material-Design-Empfehlungen benennen die meisten dieser Prüfungen direkt, und professionelle Designer wenden den Rest aus Gewohnheit an:

• Erst die Silhouette. Blinzle oder verschiefe das Icon. Ist die Form noch erkennbar, funktioniert das Design; wird sie zu einem Klecks, rettet auch kein Detail mehr.
• Ein Motiv, eine Idee. Ein gutes Icon sagt eine Sache aus. Ein Schild, ein Häkchen und eine Rakete in einem Glyphen zu kombinieren, sagt nichts klar aus.
• Konsistenter Eckenradius und einheitliche Strichstärke. Überall abgerundete Ecken oder überall spitze Ecken, überall dicke Konturen oder gar keine. Gemischte Ausführungen innerhalb eines Sets wirken wie ein Versehen.
• Ausgerichtet auf ein Raster. Keylines halten die Abstände berechenbar, damit ein Ordner voller Icons wie eine Familie aussieht. Material Design veröffentlicht aus genau diesem Grund eine Keyline-Vorlage für 24 dp.
• Details, die die Verkleinerung überstehen. Ein Gesicht braucht Augen und vielleicht einen Mund. Bei 24 px braucht es keine Wimpern.

Favicons verdienen an dieser Stelle eine besondere Erwähnung, denn sie sitzen am äußersten Ende der Größenskala. Was ein gutes Favicon ausmacht, ist eine noch strengere Version derselben Liste: ein Buchstabe oder ein vereinfachtes Zeichen, hoher Kontrast vor hellen wie dunklen Browser-Oberflächen, und kein Text, der kleiner ist als der Anfangsbuchstabe deines Namens.

Drei Wege, Icons zu erstellen – und wann sich welcher lohnt

Es gibt drei praktische Wege zu einem fertigen Icon-Set, und die beste App zum Erstellen von Icons ist diejenige, die zu deinem Volumen, deinem Budget und dem gewünschten Individualisierungsgrad passt.

Manuelle Vektorarbeit (Illustrator, Figma, Inkscape). Das ist der Handwerksweg. Du zeichnest Formen auf einem Raster, richtest alles an Keylines aus und kontrollierst jede Kurve. Wer zum Beispiel lernen will, wie man in Illustrator ein Personen-Icon erstellt, baut einen Kreis für den Kopf, ein abgerundetes Trapez für die Schultern und entscheidet einmalig, wie dick die gemeinsame Kontur ist. Vektorarbeit liefert pixelperfekte Kontrolle und beliebig skalierbare SVGs – wichtig, wenn ein Set über hunderte Glyphen hinweg zusammenhalten muss. Der Preis ist Zeit: Ein stimmiges Set aus zwanzig Icons bedeutet Tage Arbeit, und der Anspruch an das handwerkliche Können ist real.

Vorlagen- und Clipart-Tools (Canva, Icon-Bibliotheken, Icon-Fonts). Bibliotheken wie Material Symbols, Lucide oder Font Awesome liefern dir tausende konsistente Glyphen kostenlos, und mit Vorlagen-Tools lassen sie sich umfärben und kombinieren. Für Standard-Metaphern wie einen Mülleimer, ein Zahnrad oder eine Lupe ist das die schnellste richtige Antwort – ganz ohne schlechtes Gewissen: Nutzer erkennen die Standardformen schneller als deine individuelle Variante. Die Grenzen zeigen sich, wenn du ein Motiv brauchst, das noch niemand gezeichnet hat, oder einen visuellen Stil, der allein zu deiner Marke gehört.

KI-Generierung. Ein KI-Icon-Generator sitzt zwischen beiden Welten: Du beschreibst Motiv und Stil in Text, das Modell erzeugt originale Grafiken, und du exportierst ein quadratisches Master-Icon mit transparentem Hintergrund. Es ist der einzige Weg, der aus einer Beschreibung eine neue Zeichnung erzeugt – damit ist er die praktische Wahl für Produkt-Maskottchen, ungewöhnliche Motive oder stilgetriebene Sets (ein Emoji-Set, ein Neon-Set, ein Claymorphism-Set), ohne jedes Glyph von Hand zeichnen zu müssen. Der Nachteil ist weniger Kontrolle über jede einzelne Kurve, weshalb sich klare Prompts und die Bereitschaft zum Neugenerieren auszahlen.

Icons mit KI designen: ein Workflow, der funktioniert

KI-Generierung strafft den Zeichenschritt, aber nicht die Designentscheidungen. Der Workflow, der zuverlässig brauchbare Icons hervorbringt, sieht so aus:

1. Schreibe das Briefing vor den Prompt. Ein Motiv, ein Stil, eine Stimmung, eine Entscheidung zum Hintergrund. „Verschlafene Katze, Emoji-Stil, glänzend, warmes Gelb, einfarbiger Hintergrund“ ist ein Briefing. „Süßes Katzen-Icon, vielleicht mit ein paar Sternen und einem Mond und sanften Farben“ ist ein Wunsch – und Wünsche liefern matschige Kandidaten.

2. Kandidaten generieren, Silhouetten bewerten. Erzeuge mehrere Varianten und bewerte sie zuerst in kleiner Größe – derselbe Blinzeltest wie beim manuellen Design. Ein Kandidat, der nur groß funktioniert, ist eine Absage, kein Ausgangspunkt.

3. Halte die Familie stimmig. Braucht das Set mehr als ein Icon, verwende dieselben Stil- und Ausführungswörter in allen Prompts und generiere in einer Sitzung. Stil-Presets helfen dabei: Ein fixierter Stil sorgt dafür, dass sich Kandidaten im Motiv unterscheiden, nicht in der Umsetzung. Die Seite Icon-Design funktioniert so für allgemeine Stile, und ein Emoji-Icon-Generator fixiert das glänzende Emoji-Rezept für verspielte Sets.

4. Ein Master exportieren, Größen zuschneiden. Arbeite bei 1024 px mit transparentem Hintergrund und skaliere dann pro Plattform herunter. Einfache Formen überstehen die Verkleinerung; fotorealistische Renders tun das nicht.

5. Mit einem Referenz-Set vergleichen. Stelle deine Icons neben eine ausgereifte Bibliothek – in derselben Größe. Alles, was aus dem falschen Grund die Aufmerksamkeit auf sich zieht, sei es ein abirrender Verlaufsstreifen oder eine kaputte Silhouette, geht für einen weiteren Durchlauf zurück.

Icon-Größen und -Formate, die zählen

Die häufigste praktische Frage lautet, welches das beste Format für Icons ist, und die ehrliche Antwort ist: Jede Plattform verlangt ein anderes. Ein einziges PNG- oder WEBP-Master mit 1024 px deckt jede Zeile dieser Tabelle ab; du musst es nur pro Slot herunterrechnen.

Zwei Regeln decken die meisten Fehler ab. Erstens: nie hochskalieren. Ein Favicon mit 16 px, das aus einem Master mit 1024 px geschnitten wurde, sieht gut aus, während ein Store-Bild mit 512 px, das aus 128 px hochskaliert wurde, kaputt aussieht. Zweitens: auf die Transparenz-Regeln achten. iOS brennt seine eigene Eckenmaske ein und lehnt transparente Pixel ab, während Chat-Plattformen alles ohne Transparenz ablehnen.

Woher bekommst du Icons für deine Website?

Für eine Website hast du dieselben drei Quellen wie bei jedem Projekt: eine Bibliothek, einen Designer oder eine Generierung. Bibliotheken sind am schnellsten für Standard-UI-Glyphen. Ein Designer lohnt sich für ein Markenzeichen mit spezifischer Bedeutung. Die Generierung füllt die Lücke dazwischen: ein individuelles Motiv im Stil deines Produkts, gezeichnet in Sekunden. Beim Website-Icon endet der Workflow speziell beim Favicon: ein Master mit 1024 px, zugeschnitten auf die ICO- und PNG-Sets – genau das automatisieren der Site-Icon-Generator und der Favicon-Generator, inklusive Prüfungen bei 16 px, wo es am meisten darauf ankommt.

Wie du dein App-Icon-Design auf iPhone und Android änderst

Das Icon zu designen ist die halbe Arbeit; es auf den Gerädebildschirm zu bringen, ist die andere Hälfte – und die Antwort unterscheidet sich je nach Plattform.

iPhone (als Entwickler). iOS erlaubt Apps nicht, ihr eigenes Icon beliebig zu ersetzen. Du lieferst den Master mit 1024 px im App-Bundle aus, und App Store Connect übernimmt von dort; das System legt die abgerundete Maske darüber. Du kannst alternative App-Icons anbieten – einen festen Satz, zwischen dem Nutzer in den Einstellungen deiner App wechseln können, deklariert im Asset-Katalog.

iPhone (als Nutzer). Ohne Entwicklerzugang ist die Shortcuts-App der Standardtrick: Erstelle einen Kurzbefehl, der die Ziel-App öffnet, öffne seine Details, wähle „Zum Home-Bildschirm hinzufügen“ und weise ein beliebiges Bild als Icon zu. Das funktioniert – mit zwei Einschränkungen: Der Kurzbefehl startet über einen Banner, und das ursprüngliche App-Icon existiert weiterhin in deiner App-Mediathek.

Android. Wie füge ich ein App-Icon zu meinem Android-Startbildschirm hinzu? Halte die App in der App-Übersicht gedrückt und ziehe sie heraus, oder halte den leeren Startbildschirm gedrückt und nutze das Menü für Widgets und Verknüpfungen. Manche Launcher unterstützen Icon-Packs und die Icon-Bearbeitung pro Verknüpfung: Verknüpfung gedrückt halten, auf Bearbeiten tippen und das Bild austauschen. Warum fehlt eine App auf dem Startbildschirm? Meistens lebt sie einfach in der App-Übersicht. Android heftet standardmäßig nur eine Handvoll Icons an, und ein Icon unter Android anzuzeigen bedeutet nur, es dorthin zu ziehen, wo du es haben willst.

Samsung. One UI folgt dem Android-Muster, wobei die Bearbeiten-Option im Menü hinter dem Gedrückthalten der Verknüpfung selbst liegt. Icon-Packs aus dem Galaxy Store ändern alle Icons auf einmal, wenn du ein stimmiges Redesign willst, ohne jede einzelne Verknüpfung anzufassen.

Kurzes FAQ

Warum ist mein App-Icon weiß oder leer? Auf Android bedeutet das meist, dass die App eine Icon-Ressource deklariert, die der aktuelle Launcher nicht darstellen kann. Eine fehlende Ebene des adaptiven Icons nach einem Update ist der klassische Fall. Den Launcher-Cache leeren oder die App neu installieren behebt es. Im Web bedeutet ein leeres Tab-Icon, dass der Favicon-link-Tag auf eine fehlende Datei zeigt.

Warum hat meine App gar kein Icon? Sideloader-APKs und Entwicklungs-Builds verzichten oft komplett auf Icon-Ressourcen. Über Stores verteilte Apps deklarieren immer eines; zeigt ein Store-Eintrag kein Bild, fehlt dem Eintrag selbst die Ressource – eine Sache für die Entwicklerkonsole.

Welche App hat ein P-Icon, ein T-Icon, ein S-Icon? Solche Suchanfragen stammen meist von jemandem, der einen Startbildschirm rückentwickelt. Einzelne Buchstaben sind am häufigsten eigene Shortcuts-Icons unter iOS oder Icon-Pack-Ersatz unter Android. Der Buchstabe ist der Platzhalter des Designers, kein Plattformstandard – die einzig verlässliche Antwort ist also: öffnen.

Wie lange dauert ein gutes Icon-Set? Ein Bibliotheks-Import dauert Minuten; zwanzig handgezeichnete, stimmige Icons dauern Tage; ein KI-gestütztes Set mit fixiertem Stil ist das Werk einer Sitzung, Größenzuschnitte inklusive. Die Prinzipien ändern sich zwischen den drei Geschwindigkeiten nicht – nur der Zeichenschritt.