Icons

Warum Icons oft falsch eingesetzt werden

Icons sind keine Dekoration – sie müssen funktionieren

Du siehst eine Website. Überall Icons. Neben jedem Text ein Symbol. Das sieht modern aus. Aber verstehst du, was die Icons bedeuten? Oft nicht.

Ein Icon mit drei Strichen. Ist das ein Menü? Oder ein Filter? Oder eine Liste? Ohne Text daneben: unklar.

Ein Icon ist nur gut, wenn du sofort verstehst, was es bedeutet. Alles andere ist Rauschen.

Was Icons wirklich leisten müssen

Icons haben eine Aufgabe: Informationen schneller erfassbar machen.

Sie funktionieren, wenn:
• Sie bekannt sind (z.B. Lupe = Suche, Haus = Startseite)
• Sie mit Text kombiniert werden (Icon + "Kontakt")
• Sie wiederkehrend eingesetzt werden (immer dasselbe Icon für dieselbe Funktion)

Sie funktionieren nicht, wenn:
• Niemand weiss, was sie bedeuten
• Sie nur zur Dekoration da sind
• Sie zu komplex sind

Wo Icons scheitern

Fehler 1: Zu abstrakt

Ein Icon mit drei Kreisen und einer Linie. Was bedeutet das? "Innovation"? "Vernetzung"? "Prozess"? Niemand weiss es.

Abstrakte Icons brauchen immer Text. Sonst sind sie nutzlos.

Fehler 2: Inkonsistente Stile

Ein Icon ist ausgefüllt. Das nächste ist nur eine Outline. Das dritte hat Schatten. Jedes Icon sieht anders aus.

Das verwirrt. Icons müssen als Set funktionieren: Gleiche Strichstärke, gleicher Stil, gleiche Grösse.

Icons sind wie Schriftarten. Wenn jedes Wort in einer anderen Schrift steht, wird es unübersichtlich.

Fehler 3: Icons ohne Text

"Das Icon ist doch klar." – Für wen? Für dich? Oder für jemanden, der die Website zum ersten Mal sieht?

Selbst universelle Icons (Lupe, Haus, Warenkorb) funktionieren besser mit Text. Besonders auf mobilen Geräten.

Wie man Icons richtig einsetzt

Kombiniere Icons mit Text

Nicht: [Icon]
Sondern: [Icon] + "Kontakt"

Das Icon beschleunigt die Erkennung. Der Text gibt Sicherheit.

Nutze bekannte Icons

Für Standard-Funktionen: Nutze Standard-Icons.

Bekannte Icons:
• Lupe = Suche
• Haus = Startseite
• Briefumschlag = E-Mail/Kontakt
• Warenkorb = Shop
• Herz = Favoriten
• Drei Striche (Hamburger) = Menü

Erfinde diese Icons nicht neu. Sie funktionieren, weil jeder sie kennt.

Halte Icons einfach

Ein gutes Icon besteht aus 3–5 Grundformen. Nicht aus 20 Details.

Faustregel: Wenn du das Icon auf 24×24 Pixel verkleinerst und es noch erkennbar ist – funktioniert es.

Je einfacher das Icon, desto schneller wird es erfasst.

Icons für verschiedene Kontexte

Navigation

Icons helfen, sich schneller zu orientieren. Aber nur, wenn sie konsistent sind.

Beispiel Menü:
[Haus] Startseite
[Aktenkoffer] Angebot
[Personen] Team
[Brief] Kontakt

Wichtig: Immer Icon + Text.

Features/Vorteile

Icons können Vorteile visualisieren. Aber sie brauchen Text.

Beispiel:
[Uhr] Schnelle Lieferung
[Schild] Sichere Zahlung
[Rückgabepfeil] 30 Tage Rückgaberecht

Ohne Text: unklar. Mit Text: unterstützend.

Call-to-Actions

Icons können Buttons verstärken.

Beispiel:
[Pfeil] Jetzt anfragen
[Download-Symbol] PDF herunterladen
[Plus] Mehr erfahren

Aber: Das Icon ist optional. Der Text ist Pflicht.

Icon-Bibliotheken: Wo man gute Icons findet

Kostenlose Icon-Sets:

• Heroicons: Einfach, klar, für Web optimiert
• Feather Icons: Minimalistisch, Outline-Stil
• Font Awesome: Riesige Auswahl, aber manchmal inkonsistent
• Material Icons (Google): Standard für Android, funktioniert überall

Premium Icon-Sets:

• Noun Project: Tausende Icons, pro-Version ohne Wasserzeichen
• Streamline Icons: Sehr grosse, konsistente Sammlung
• Iconscout: Mix aus kostenlosen und Premium-Icons

Tipp: Wähle ein Set und bleib dabei. Mische nicht verschiedene Stile.

Wann Icons wirklich nötig sind

Icons sind sinnvoll, wenn:

• Sie die Erkennung beschleunigen (z.B. Navigation)
• Sie wiederkehrende Elemente markieren (z.B. Features, Vorteile)
• Sie Platz sparen (z.B. mobile Navigation)

Icons sind überflüssig, wenn:

• Der Text allein klar genug ist
• Die Icons nichts zur Bedeutung beitragen
• Sie nur zur Dekoration da sind

Weniger Icons, richtig eingesetzt, sind besser als viele Icons, die verwirren.

Wenn du mit uns ein Projekt realisierst

Wir wählen Icons aus oder gestalten sie, damit sie zu deiner Marke passen und funktionieren. Das heisst: Klar, konsistent, mit Text kombiniert. Keine Dekoration, sondern Unterstützung.

Falls du unsicher bist, ob deine Icons verständlich sind, beraten wir dich gerne unverbindlich.