Was Icons im Webdesign bewirken — und wo sie scheitern
Icons sind keine Dekoration. Sie sind Mini-Signale, die einem Auge in Millisekunden helfen, eine Funktion zu erkennen — eine Lupe für Suche, ein Schloss für Sicherheit, ein Stift für Bearbeitung.
Gut gewählte Icons reduzieren Textlast, lenken Blickwege und schaffen Wiedererkennung quer durch eine Website. Sie sind das stille Vokabular einer Marke, lange bevor jemand den ersten Satz liest. Wer die visuelle Sprachebene hinter Icons sucht, findet im Artikel zur Bildsprache den passenden Hintergrund.
Schlecht gewählte Icons machen das Gegenteil. Sie verwirren, weil drei Stile gemischt wurden. Sie verlangsamen die Seite, weil ein 300-KB-Icon-Font für fünf Symbole geladen wurde. Sie verstossen gegen Lizenzen, die in der Eile selten gelesen werden.
Dieser Artikel ordnet die Auswahl von Webdesign-Icons ehrlich ein: welche Quellen 2026 zählen, in welchem Format Icons heute ausgeliefert werden, was die Lizenz wirklich erlaubt und wie Noevu den eigenen Stack aufgebaut hat. Für eine projektbezogene Einordnung lohnt sich ein kurzes Gespräch zur passenden Lösung.
Eine Treuhandfirma in Zürich hat ihren Webrelaunch mit drei Icon-Sets gestartet — Font Awesome für die Navigation, Heroicons für die Leistungsseiten und Stock-SVGs aus Flaticon für den Footer. Jedes Set sah einzeln gut aus. Zusammen wirkte die Seite, als hätten drei verschiedene Agenturen daran gearbeitet.
Wann Icons sinnvoll sind — und wann sie schaden
Ein Icon trägt seinen Platz, wenn es eine Funktion sofort erkennbar macht. Telefonhörer für Anruf, Briefumschlag für E-Mail, Pfeil für Weiter — diese Bedeutungspaare sind kulturell so etabliert, dass kein Begleittext nötig ist.
Sobald das nicht der Fall ist, kostet ein Icon mehr Leseaufmerksamkeit als es spart. Drei Strichmännchen mit drei verschiedenen Hüten erklären keine Zielgruppe. Eine abstrakte Form neben einem Service-Eintrag erklärt keinen Service.
Für Schweizer KMU-Sites gilt ein einfacher Test: Wenn ein Icon ohne den Begleittext nicht eindeutig verstanden wird, gehört der Begleittext zur Pflicht — oder das Icon raus.
Icons helfen, wenn …
Icons schaden, wenn …
SVG, Icon-Font oder Variable-Font — was sich 2026 bewährt
Für Icons stehen drei Formate zur Wahl: inline SVG, SVG-Sprite oder eine Webfont — entweder klassischer Icon-Font oder moderner Variable-Font wie Material Symbols. Der Unterschied wirkt technisch, hat aber direkte Folgen für Tempo, Stilkontrolle und Wartung.
Inline-SVG bedeutet, dass das Icon als XML direkt im HTML steht. Vorteil: einzeln stylebar, mehrfarbig, animierbar. Nachteil: bei vielen Icons bläht es das HTML auf. SVG-Sprites sammeln alle Symbole in einer Datei und referenzieren sie per <use>. Skalierbar, aber etwas spröder in der Pflege.
Webfonts wiederum laden eine Schriftdatei, die Glyphen statt Buchstaben enthält. Klassische Icon-Fonts (Font-Awesome-Stil) gelten als veraltet — sie sind monochrom, schwer barrierefrei zu halten und liefern oft ein ganzes Set, obwohl die Website zwanzig Icons nutzt. Variable-Fonts wie Material Symbols lösen dieses Problem: ein Font mit Achsen für Strichstärke, Füllung und Grösse — subsettable auf die tatsächlich genutzten Icons.
| Inline-SVG | SVG-Sprite | Variable-Font (subset) | Icon-Font (klassisch) | |
|---|---|---|---|---|
| Payload für 25 Icons | 10–30 KB | 5–15 KB | ca. 2 KB | ca. 80–300 KB |
| Mehrfarbig möglich | über Achsen | – | ||
| Strichstärke per CSS | – | – | – | |
| Wartung neuer Icons | hoch | mittel | Build-Step | niedrig |
| Barrierefreiheit out-of-the-box | – |
Stand Mai 2026. „Variable-Font (subset)" bezieht sich auf Material Symbols woff2, subsetted auf die genutzten Icons (siehe Sektion Noevu-Praxis).
Für neue KMU-Websites ist die ehrliche Empfehlung 2026: inline SVG für ein oder zwei dekorative Hero-Icons, subsettete Variable-Font für die UI-Icons. Klassische Icon-Fonts laufen aus — der Migrationsschmerz lohnt sich aber selten allein für die Icons, sondern fällt mit dem nächsten Relaunch ohnehin an.
Die wichtigsten Icon-Libraries 2026 im Vergleich
Sieben Bibliotheken dominieren 2026 die Auswahl für moderne Websites. Sie unterscheiden sich in Stilcharakter, Umfang, Lizenz und Eignung für KMU-Sites. Die Reihenfolge ist keine Rangliste, sondern eine Eignungsbeschreibung.
| Anzahl Icons | Lizenz | Stilcharakter | Wann passend | |
|---|---|---|---|---|
| Material Symbols | 3000+ × 3 Stile | Apache 2.0 | neutral, variabel | Default für KMU-Sites |
| Lucide | 1500+ | MIT | outline, schlank | Komponenten-Frontends (React, Vue) |
| Phosphor | 1248 × 6 Weights | MIT | freundlich, weich | wenn Strichstärke-Hierarchie zählt |
| Heroicons | 292 × 3 Stile | MIT | präzise, geometrisch | Tailwind-Projekte, schlanke UIs |
| Tabler Icons | 5000+ | MIT | outline, technisch | Admin-Dashboards, breite Abdeckung |
| Iconify | 300k+ aus 200 Sets | je Set | je Set | wenn ein exotisches Set nötig ist |
| Font Awesome Free | 2000+ | CC BY 4.0 | etabliert, voll | Bestand — nicht erste Wahl 2026 |
Quellen: phosphoricons.com, lucide.dev, fonts.google.com/icons, iconify.design — Stand Mai 2026.
Wer keine starke Markenstil-Vorgabe hat, fährt mit Material Symbols am risikofreiesten — riesige Begriffsabdeckung, variable Achsen, problemlose Lizenz. Sobald die Marke ausgesprochen weich oder eigenwillig ist, lohnt Phosphor als Alternative. Lucide bleibt die saubere Antwort für komponentenbasierte Frontends. Drei Libraries decken die Stil-Anforderungen praktisch jedes KMU-Projekts ab — pro Website wird trotzdem nur eine eingesetzt.
Lizenzen verstehen: MIT, CC BY 4.0 und das „kostenlos"-Missverständnis
„Kostenlos" heisst nicht „frei verwendbar". Hinter dem Wort verbergen sich drei unterschiedliche Vereinbarungen, und nur eine davon ist für kommerzielle Schweizer Websites wirklich entspannt.
MIT- und Apache-2.0-Lizenz: kommerziell nutzbar, keine Attribution nötig, Quellcode darf modifiziert werden. Das gilt für Lucide, Heroicons, Tabler, Phosphor, Bootstrap Icons sowie Material Symbols. Die saubere Wahl, weil keine Pflicht zur Nennung besteht.
CC BY 4.0: ebenfalls kommerziell nutzbar, verlangt aber formal eine Namensnennung der Urheber. Genau hier liegt die Falle bei Font Awesome Free und Boxicons — viele Sites nutzen die Icons ohne den geforderten Hinweis im Footer oder im Impressum.
Pro- oder Premium-Tier: Stockportale (Flaticon, Iconscout, Streamline) bauen auf Abomodellen auf. Hier hängt die Lizenz an einem aktiven Konto, an Download-Mengen und manchmal an Projekttypen. Nach Vertragsende dürfen viele Icons formal nicht weiterverwendet werden.
Lizenz-Checkliste vor dem Live-Gang
Font Awesome Free wird im deutschsprachigen Raum häufig ohne den geforderten CC-BY-Hinweis eingebunden. Die Glyphen stehen unter CC BY 4.0 — der zugehörige Code unter MIT. Wer Font Awesome Free auf einer kommerziellen Website nutzt, braucht formal einen Hinweis. In der Praxis fehlt er fast immer. Wer das vermeiden will, wechselt auf Lucide, Tabler oder Material Symbols.
Barrierefreie Icons: aria-hidden vs aria-label
Icons spielen für Screenreader nur dann eine Rolle, wenn sie Bedeutung tragen. Die wichtigste Unterscheidung lautet: dekoratives Icon oder bedeutungstragendes Icon.
Ein dekoratives Icon steht neben einem Text, der bereits die Bedeutung trägt — ein Pfeil neben „Weiter", ein Briefumschlag neben „E-Mail schreiben". Hier gehört das Icon vor dem Screenreader versteckt, sonst doppelt sich die Information. Das macht aria-hidden="true" auf dem SVG- oder Span-Element.
Ein bedeutungstragendes Icon steht alleine — ein reines Menüsymbol, ein einsames Lupensymbol auf Mobile. Hier muss der Screenreader die Funktion ansagen können. Das löst entweder ein aria-label auf dem Button oder ein versteckter Text via .sr-only-Klasse.
// Dekorativ — der Text trägt die Bedeutung
<button>
<span class="material-icon" data-icon="arrow_forward" aria-hidden="true"></span>
Weiter
</button>
// Bedeutungstragend — Icon allein
<button aria-label="Suche öffnen">
<span class="material-icon" data-icon="search" aria-hidden="true"></span>
</button>KI-generierte Icons — wo sie heute funktionieren und wo nicht
KI-Tools können inzwischen Icons erzeugen. Recraft V4 Vector liefert echte SVG-Dateien, Iconify AI antwortet in Sekunden, und auch Ideogram produziert auf Wunsch icon-artige Formen. Für ein einzelnes Hero-Symbol oder ein illustriertes Piktogramm taugen diese Werkzeuge — für ein vollständiges UI-Vokabular noch nicht.
Das Problem heisst Konsistenz. Eine UI braucht zwanzig bis vierzig Symbole im exakt gleichen Stilbild: gleiche Strichstärke, gleicher Eckenradius, gleiche Proportion zwischen Innenraum und Aussenkante. Heutige KI-Modelle treffen diese Konsistenz über ein ganzes Set nicht zuverlässig. Was bei Icon eins funktioniert, driftet bei Icon fünfzehn ab.
Sinnvoller Einsatz heute: KI-Icons für ein oder zwei eigenständige Pictogramme, die nicht Teil einer Toolbar sind. Für UI-Icons bleibt 2026 eine etablierte Library die saubere Lösung.
Ein Pop-up-Studio aus Bern hat fünfzehn Service-Icons über Recraft generiert und direkt eingesetzt. Auf den ersten Blick passte alles. Im Live-Betrieb fiel auf, dass drei Icons proportional grösser wirkten als der Rest und zwei eine andere Strichstärke trugen. Die Korrektur kostete am Ende mehr Aufwand, als ein Material-Symbols-Set für die Standard-UI plus gezielte Einzel-Illustrationen für die Service-Cards von Anfang an gekostet hätte.
Icons und SEO: warum das Format Core Web Vitals beeinflusst
Icons sind kein direkter SEO-Ranking-Faktor. Google bewertet ihre Auswahl, ihren Stil oder ihre Anzahl nicht. Trotzdem hat das gewählte Format messbare Folgen für Core Web Vitals — und Core Web Vitals fliessen in das Ranking ein.
Ein klassischer Icon-Font mit dreihundert Kilobyte für fünf genutzte Glyphen verzögert den ersten Renderausgabe-Schritt (LCP). Ein nicht definiertes width/height-Attribut auf SVG-Icons verursacht Layout-Verschiebungen (CLS). Ein subsettetes Material-Symbols-Woff2 von zwei Kilobyte trägt zu keinem der beiden Probleme bei.
Für die meisten Schweizer KMU-Sites mit moderatem Traffic ist der Effekt klein, aber real. Wer mit Suchmaschinenoptimierung ernst macht, prüft beim Performance-Audit auch das Icon-System — typischerweise als Teil eines breiteren SEO-Checks.
Wie Noevu Icons in der Praxis einsetzt
Auf noevu.ch läuft Material Symbols als subsettete Webfont. Ein Build-Step durchsucht den Quellcode nach Icon-Namen (data-icon="foo" sowie *Icon-Schema-Felder in JSON), lädt nur diese Glyphen von Google Fonts und schreibt sie in eine eigene Woff2-Datei.
Das Ergebnis: rund 140 Icons in der gesamten Website, gemeinsam ausgeliefert in einer einzigen Datei mit ungefähr zwei Kilobyte. Keine externen Requests, keine Renderverzögerung, eine zentrale Stelle für neue Symbole. Wer ein neues Icon ergänzt, läuft einen Befehl, und die nächste Auslieferung enthält das Glyph.
Diese Pipeline ist kein Selbstzweck. Sie ist die schlankste Variante, ein konsistentes Icon-Vokabular auszuliefern, ohne bei jedem Relaunch eine alte Designentscheidung erneut zu verhandeln.
Was Noevu am Material-Symbols-Workflow schätzt
Fazit
Icons sind ein kleines, aber wirksames Designelement. Wer ein Set wählt, prüft Lizenz, Stilcharakter und Begriffsabdeckung — und bleibt dabei. Wer das Format wählt, denkt 2026 in SVG oder subsetteter Variable-Font, nicht in klassischen Icon-Fonts.
Für die meisten Schweizer KMU-Websites ist Material Symbols die risikoärmste Default-Wahl. Lucide und Phosphor lohnen sich, wenn Markenstil oder technischer Stack es nahelegen. Stockportale und KI-Tools bleiben Werkzeuge für Einzelfälle, nicht für das UI-Vokabular.
Eine bewusste Icon-Entscheidung kostet weniger Aufwand als der nachträgliche Stilkorrektur-Rundlauf. Sie zahlt sich über Tempo, Markenklarheit und Lizenzruhe Jahr für Jahr aus.
Welches Icon-Set zur Website passt und wie Tempo, Lizenz und Markenstil zusammenspielen, lässt sich in zwanzig Minuten ehrlich einordnen.
Häufig gestellte Fragen
Welche Icons sind kostenlos für kommerzielle Nutzung?
Wirklich frei für kommerzielle Schweizer Websites sind Material Symbols, Lucide, Heroicons, Phosphor, Tabler und Bootstrap Icons — alle unter MIT-Lizenz. Font Awesome Free und Boxicons stehen unter CC BY 4.0 und verlangen formell eine Quellenangabe. Stockplattformen wie Flaticon oder Iconscout sind eigene Lizenzwelten und gehören nicht in das Icon-Vokabular einer Website.
Was ist der Unterschied zwischen Icon-Font und SVG-Icons?
Ein Icon-Font lädt eine Schriftdatei mit Glyphen, die per CSS-Klasse referenziert werden. Ein SVG-Icon ist eine echte Vektorgrafik, entweder inline im HTML, als Sprite oder via subsetted Webfont. SVG erlaubt mehrfarbige Symbole, exakte Animation und besseres Screenreader-Verhalten. Icon-Fonts sind technisch veraltet, ihre Stärken hat das SVG-Ökosystem 2026 übernommen.
Wie wähle ich ein Icon-Set für meine Website aus?
Drei Kriterien zählen. Erstens: passt der Stilcharakter zur Marke (outline, solid, geometrisch, weich)? Zweitens: deckt das Set die nötigen Begriffe ab — UI, Branche, Navigation? Drittens: erlaubt die Lizenz die kommerzielle Nutzung ohne Pflicht-Attribution? Material Symbols und Lucide erfüllen alle drei Kriterien für die meisten KMU-Websites am zuverlässigsten.
Sind Material Symbols kostenlos?
Ja. Material Symbols stehen unter Apache 2.0 und sind sowohl privat als auch kommerziell frei nutzbar — ohne Attribution. Die ältere Variante Material Icons läuft unter denselben Bedingungen weiter. Beide Varianten lassen sich als Schriftart einbinden oder als einzelne SVG laden. Auf noevu.ch ist die woff2-Variante subsetted und liefert die genutzten Icons in etwa zwei Kilobyte aus.
Welche Icon-Library passt zu einer Schweizer KMU-Website 2026?
Für klassische KMU-Sites mit klarer Bildsprache passt Material Symbols als Default — variable Achsen für Strichstärke und Füllung, MIT-nah über Apache 2.0, riesige Begriffsabdeckung. Lucide ist die zweite Wahl, wenn das Frontend stark komponentenbasiert läuft (React, Vue). Phosphor lohnt sich, wenn Designhierarchie über sechs Strichstärken eine echte Rolle spielt.
