HomeCasa Icon-Styleguide für ein Designsystem
Erstelle einen Styleguide für dein Icon-Set: Raster und Keylines, Strichstärke, Ecken, Größen, Metapher je Icon, Benennung, SVG-Export, Barrierefreiheit und eine Review-Checkliste. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.
Fortgeschritten · Text · Redaktionelle Prüfung ausstehend
Prompt
Handle als Icon-Designer und Verantwortlicher für ein Designsystem.
Kontext:
- Produkt: {{produkt}}
- Markenpersönlichkeit: {{persoenlichkeit}}
- Icon-Stil: {{stil}}
- Basisraster: {{raster}}
- Benötigte Icons: {{icons}}
Liefergegenstände:
1. 3-5 Stilprinzipien aus der Markenpersönlichkeit abgeleitet, mit Beispielen für die Anwendung.
2. Raster und Keylines: Zeichenfläche, aktiver Bereich, Innenabstand und Keyline-Formen (Kreis, Quadrat, Hoch- und Querrechteck) mit Maßen.
3. Konstruktionsregeln: Strichstärke, Eckenradius, Strichenden, erlaubte Winkel, Umgang mit Lücken und minimaler Detailgrad.
4. Einsatzgrößen (z. B. 16, 20, 24, 32) und wann eine optisch angepasste Version nötig ist.
5. Metapherntabelle für jedes gewünschte Icon: vorgeschlagene Metapher, Alternative, Risiko von Mehrdeutigkeit oder kulturellen Unterschieden und ob immer ein Textlabel nötig ist.
6. Benennung von Dateien und Komponenten sowie SVG-Exportregeln: viewBox, keine festen Füllfarben (currentColor), Konturen je nach Fall umwandeln oder nicht, Optimierung.
7. Barrierefreiheit: dekorative versus informative Icons, aria-hidden, zugänglicher Name für reine Icon-Buttons, Mindestkontrast 3:1 und eine Touch-Fläche von 44-48 px unabhängig von der Icon-Größe.
8. Review-Checkliste, bevor ein neues Icon ins Set aufgenommen wird.
Einschränkungen:
- Kopiere oder imitiere keine Icon-Sets Dritter; wenn du eine Open-Source-Bibliothek als Ausgangspunkt empfiehlst, erinnere mich an die Lizenzprüfung.
- Verwende [AUSFÜLLEN] für Markenentscheidungen, die nicht im Kontext stehen.
- Ist die Icon-Liste mehrdeutig, frage mich, welche Aktion jedes Icon darstellt, bevor du Metaphern vorschlägst.
Format: Leitfaden mit Überschriften, Tabellen für Maße und Metaphern und eine abschließende Checkliste.So verwenden Sie ihn
- Liste die benötigten Icons mit der jeweiligen Aktion oder dem Konzept auf. 2. Prüfe die Metapherntabelle mit Nutzern oder dem Produktteam. 3. Lege in deinem Designtool eine Rastervorlage mit den vorgeschlagenen Maßen an.
Anwendungsbeispiel
Produkt: Banking-App · Persönlichkeit: vertrauenswürdig und nahbar · Stil: Outline mit gefülltem Aktivzustand · Raster: 24 px · Icons: Überweisung, Karte, Hinweise, Sparen.
Beispielergebnis
Stilprinzipien
- Vertrauenswürdig: stabile geometrische Formen, keine unnötig schrägen Linien.
- Nahbar: Ecken mit 2 px Radius und runde Linienenden.
- Einfach: höchstens drei Elemente pro Icon; braucht es mehr, trägt die Metapher nicht.
Raster und Konstruktion (24 px)
| Element | Maß |
|---|---|
| Zeichenfläche | 24 × 24 px |
| Nutzfläche | 20 × 20 px (2 px Rand) |
| Kreis-Keyline | Ø 20 px |
| Quadrat-Keyline | 18 × 18 px |
| Strich | 1,5 px, runde Enden |
| Eckenradius | 2 px |
| Aktivzustand | Gleiche Zeichnung, vollflächig gefüllt |
Metaphern-Tabelle
| Icon | Metapher | Alternative | Risiko | Immer mit Label? |
|---|---|---|---|---|
| Start | Haus | Raster | Gering | Ja, in der Tab-Leiste |
| Überweisung | Zwei gegenläufige Pfeile | Pfeil zu Person | Wirkt wie „tauschen" | Ja |
| Mobiles Bezahlen | Handy mit Wellen | Hand mit Handy | Wellen = WLAN | Ja |
| Sparen | Sparschwein | Münze mit Pfeil nach oben | Sparschwein nicht universell | Ja |
| Hinweise | Glocke | — | Gering | Nur-Icon-Button: zugänglicher Name |
SVG-Export
viewBox="0 0 24 24", keine festen Füllungen:stroke="currentColor".- Dateinamen:
icon-transfer-outline.svg/icon-transfer-filled.svg…
Wichtige Fakten
- Kategorie
- UI/UX-Design · Designsysteme
- Ausgabetyp
- Text
- Niveau
- Fortgeschritten
- Entwickelt für
- ChatGPT, Claude, Gemini und Microsoft Copilot
- Verifiziert in
- Redaktionelle Prüfung ausstehend
- Variablen
- Produkt, Markenpersönlichkeit, Icon-Stil, Basisraster und Benötigte Icons
- Sprache
- Deutsch
- Preis
- Kostenlos, ohne Anmeldung
- Aktualisiert
- 07.11.2026
Häufig gestellte Fragen
Welche Rastergröße eignet sich für UI-Icons?
Ein 24-px-Raster ist in Oberflächen am verbreitetsten, ergänzt durch 16- oder 20-px-Versionen für dichte Bereiche. Entscheidend ist eine gleich wirkende Strichstärke in allen Größen.
Brauchen Icons immer ein Textlabel?
Nicht immer, aber weniger eindeutige Icons sollten mit Text kombiniert werden. Reine Icon-Buttons brauchen mindestens einen zugänglichen Namen für Screenreader.
Wofür ist dieser Prompt gedacht?
Erstelle einen Styleguide für dein Icon-Set: Raster und Keylines, Strichstärke, Ecken, Größen, Metapher je Icon, Benennung, SVG-Export, Barrierefreiheit und eine Review-Checkliste.
Mit welchen KI-Tools funktioniert er?
Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.
Wie passe ich den Prompt an?
Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Produkt, Markenpersönlichkeit, Icon-Stil, Basisraster und Benötigte Icons). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.
Brauche ich Erfahrung, um ihn zu verwenden?
Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.
Ist dieser Prompt kostenlos?
Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.
Kann ich der KI-Ausgabe vertrauen?
Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.