Icon-Design

Strich vs. Gefüllt: Welcher Stil passt zu dir?

Lerne die Unterschiede zwischen Strich- und gefüllten Icons, ihre Stärken und wie du sie richtig einsetzt. Ein praktischer Guide für dein Design-System.

7 min Lesedauer Anfänger März 2026

Vergleich von Strich-Icons und gefüllten Icons nebeneinander auf einem Monitor

Was ist der Unterschied?

Es’s eine der häufigsten Fragen im Icon-Design: Sollte ich meine Icons mit Strichen zeichnen oder gefüllt darstellen? Die Antwort ist nicht so einfach, wie sie klingt. Beide Stile haben ihre Berechtigung, ihre Stärken und ihre speziellen Anwendungsfälle. Das Wichtigste: Es geht nicht darum, welcher Stil besser ist, sondern welcher zu deinem Projekt passt.

Strich-Icons (auch Outline genannt) verwenden nur die Kontur eines Elements. Sie wirken leicht, elegant und minimalistisch. Gefüllte Icons dagegen füllen die gesamte Form mit Farbe – sie sind kraftvoll, präsent und sofort erkennbar. In der Praxis findest du oft auch Hybride: Icons, die teilweise gefüllt und teilweise als Strich dargestellt werden.

Die zwei Welten der Icon-Stile

Ein direkter Vergleich der wichtigsten Unterschiede

Strich-Icons (Outline)

Minimalistisches, elegantes Erscheinungsbild
Leichte Strichstärke (meist 1.5–2.5px)
Gut für UI mit viel Whitespace
Schneller zum Laden (weniger Daten)
Funktioniert auf hellen Hintergründen

Gefüllte Icons (Solid)

Kraftvoll und sofort erkennbar
Volle Farbfläche, keine Linien
Besserer Kontrast auf allen Hintergründen
Ideal für kleine Größen (16–24px)
Wirkt moderner und dynamischer

Wann nutze ich welchen Stil?

Praktische Richtlinien für die richtige Entscheidung

Deine Zielgruppe

Tech-savvy User und Designer lieben Strich-Icons – sie wirken innovativ. Massenmarkt und mobile Apps setzen eher auf gefüllte Icons für sofortige Erkennbarkeit. Was passt zu deinem Publikum?

Die Icon-Größe

Bei Größen unter 24px werden Strich-Icons dünn und verlieren an Klarheit. Gefüllte Icons sind robust und lesbar, egal ob 16px oder 48px. Bei großen Icons (ab 64px) können beide Stile glänzen.

Der Kontext

Navigationsbars? Strich-Icons sparen Platz. Buttons und Aktionsflächen? Gefüllte Icons wirken präsenter. Dekoration und Illustration? Beide funktionieren – entscheide nach Ästhetik.

Dein Design-System

Konsistenz schlägt alles. Wenn du dich für einen Stil entscheidest, bleib dabei. Ein durchmischtes Icon-System wirkt unfertig. Du brauchst Regeln und Dokumentation – nicht zwei völlig unterschiedliche Stile durcheinander.

Das Technische: SVG und Performance

Im SVG-Code sieht das Ganze so aus: Strich-Icons verwenden das `stroke`-Attribut mit einer definierten Strichstärke. Das bedeutet weniger Pfad-Daten, aber du musst die Strichstärke korrekt skalieren. Gefüllte Icons nutzen `fill` mit Farbe – mehr Daten manchmal, aber vorhersagbarer in der Darstellung.

Performance-Tipp: Strich-Icons mit sehr dünnen Strichen (unter 1.5px) können bei der Komprimierung problematisch werden. Gefüllte Icons sind oft größer, aber die Unterschiede sind minimal wenn du deine SVGs richtig optimierst. Das Wichtigere ist: Nutze nicht beide Stile durcheinander in einer Icon-Familie.

Ein konsistentes Icon-System ist mehr wert als perfekte einzelne Icons. Nutzer merken nicht, ob deine Icons als Strich oder gefüllt sind – aber sie merken, wenn alles durcheinander ist.
— Icon Design Best Practice

SVG-Code-Editor mit Stroke- und Fill-Attributen für Icons, Quelltext sichtbar

Der hybride Ansatz

Nicht immer ist Schwarz-Weiß-Denken richtig. Viele moderne Design-Systeme arbeiten mit Hybriden: Der äußere Rahmen als Strich, das Innere gefüllt. Oder umgekehrt. Das gibt dir mehr Flexibilität und sieht oft moderner aus als pure Outline- oder Pure-Filled-Systeme.

Der Trick: Definiere klare Regeln. Wenn dein Icon-System 60% Outline + 40% Filled nutzt, schreib das auf. Dokumentiere, wann welcher Stil zum Einsatz kommt. So wird aus Chaos Konsistenz. Und Konsistenz ist das, was professionelle Icon-Systeme von improvisierten unterscheidet.

Definiere deine Style-Regel klar

Teste auf allen Größen (16px, 24px, 32px)

Prüfe Kontrast auf verschiedenen Hintergründen

Dokumentiere die Entscheidung in deinem System

Deine Entscheidung treffen

Am Ende ist die Wahl zwischen Strich- und gefüllten Icons eine Entscheidung über die Identität deines Design-Systems. Beide sind richtig. Strich-Icons sind elegant, modern und minimalistisch – ideal wenn dein Design hell und luftig sein soll. Gefüllte Icons sind kräftig, unmittelbar und robust – perfekt für Projekte, die sofort Aufmerksamkeit brauchen.

Das Wichtigste: Treffe eine bewusste Entscheidung und bleib konsistent. Erstelle eine Dokumentation, die erklärt, warum du dich für einen Stil entschieden hast. So wird dein Icon-System zu einem echten Asset – nicht zu einem Durcheinander aus verschiedenen Stilen, die zufällig zusammengeworfen wurden.

Nächster Schritt: Icon-Familien

Du kennst jetzt die Unterschiede zwischen Strich- und gefüllten Icons. Der nächste Schritt? Lerne, wie du eine konsistente Icon-Familie aufbaust, die über verschiedene Größen und Kontexte funktioniert.

Zur Icon-Familie-Anleitung

Hinweis

Die in diesem Artikel beschriebenen Richtlinien und Best Practices basieren auf bewährten Methoden im Icon-Design. Die konkrete Umsetzung hängt von deinen spezifischen Anforderungen, deiner Zielgruppe und deinem technischen Setup ab. Teste deine Icons immer gründlich auf verschiedenen Größen, Auflösungen und Hintergründen, bevor du sie in Produktion nimmst.