Iconset für die Website auswählen: Einheitlichkeit und Lesbarkeit

Bei Talha Aslan und Team sehen wir immer wieder dasselbe Problem. Eine Website mischt Icons aus drei verschiedenen Quellen, und die Seite wirkt unruhig, obwohl niemand genau sagen kann, warum. In diesem Leitfaden gehen wir die Auswahl Schritt für Schritt durch. Am Ende finden Sie zudem eine Checkliste für Ihre eigene Website.

Warum sollte Ihr Iconset aus einer Quelle stammen?

Ein Icon ist ein kleines Zeichen, das Menschen auf einen Blick erkennen. Deshalb fällt Uneinheitlichkeit sofort auf. Steht zum Beispiel ein feines Haus als Umriss neben einem kräftig gefüllten Warenkorb, wirkt das wie ein Fehler. Besucher können es oft nicht benennen, aber sie spüren fehlende Sorgfalt.

Ein Iconset aus einer einzigen Quelle folgt dagegen gemeinsamen Regeln. Strichstärke, Eckenradius, Innenabstand und optisches Gewicht bleiben gleich. Daher passt auch eine neue Seite, die Sie später ergänzen, zum bestehenden Layout. Zudem nutzt Ihr ganzes Team dieselbe Bibliothek, und niemand muss fragen, woher ein einzelnes Icon stammt.

Das Thema hängt eng mit der visuellen Balance einer Seite zusammen. Wenn Sie tiefer in Kontraste zwischen Elementen einsteigen möchten, lesen Sie unseren Beitrag über Kontrast im Webdesign.

Denken Sie außerdem an die Wirkung im Ganzen. Besucher prüfen Icons selten einzeln; stattdessen überfliegen sie die Seite als Ganzes. Kleine Unterschiede summieren sich also zu einem unruhigen Eindruck. Ein einheitliches Iconset lenkt die Aufmerksamkeit dagegen auf Ihre Inhalte. Anders gesagt: Ein gutes Iconset erfüllt seine Aufgabe, ohne aufzufallen.

Sollten Sie Umriss Icons oder gefüllte Icons wählen?

Umriss Icons bestehen nur aus Konturlinien. Gefüllte Icons, oft auch Solid Icons genannt, füllen die Form mit Farbe. Beide Varianten können gut funktionieren. Entscheidend ist, dass der Stil zum Charakter der Website passt und Sie beide nicht zufällig mischen.

• Umriss Icons: wirken leicht, luftig und modern. Sie passen zu klaren Layouts mit viel Weißraum.
• Gefüllte Icons: bleiben auch in kleinen Größen gut lesbar. Sie eignen sich daher für enge Bereiche wie eine mobile Tableiste.
• Gemischte Nutzung: funktioniert nur mit einer klaren Regel. Zum Beispiel ist der aktive Tab gefüllt, die übrigen bleiben als Umriss.

Der letzte Punkt ist eine wichtige Ausnahme. Viele Designsysteme zeigen den aktiven Zustand mit der gefüllten Version desselben Icons. Eine Mischung ist also in Ordnung, wenn sie eine Bedeutung trägt. Kurz gesagt: Ein Iconset mit beiden Varianten gibt Ihnen genau diese Flexibilität.

Warum müssen Strichstärke und Ecken zusammenpassen?

Die Strichstärke bestimmt, wie schwer ein Icon wirkt. Ein Iconset hat in der Regel eine Standardstärke, und alle Symbole folgen ihr. Fügen Sie ein Icon aus einer anderen Quelle hinzu und die Stärke weicht ab, fällt der Unterschied vor allem in einer Reihe von Icons auf.

Die Form der Ecken ist ebenso wichtig. Manche Sets nutzen spitze Ecken, andere weiche, abgerundete Formen. Zudem verändern die Linienenden den Charakter eines Icons. Stellen Sie sich deshalb beim Vergleich folgende Fragen:

• Haben alle Icons im Set dieselbe Strichstärke?
• Stimmen Eckenradius und Linienenden im ganzen Set überein?
• Passt das Set zu Ihrer Schrift? Eine runde Schrift kann mit spitzen, technischen Icons kollidieren.

Die Abstimmung zwischen Schrift und Icons übersehen viele. Für die Schriftseite ist unser Leitfaden zur Webtypografie ein guter Einstieg.

Was leistet ein Raster für ein Iconset?

Professionelle Designer zeichnen Iconsets auf einer festen Fläche, also einem Raster. Verbreitet ist zum Beispiel eine Fläche von 24 mal 24 Einheiten mit festem Innenabstand am Rand. Dadurch wirken Kreise, Quadrate und hohe Formen optisch gleich groß.

Gemischte Icons ohne Raster verhalten sich allerdings anders. Manche füllen ihre Box vollständig, andere bleiben klein. Folglich wirken zwei Icons in derselben Größe trotzdem unterschiedlich. Prüfen Sie daher, ob die Designdateien oder die Dokumentation eines Iconsets die Rastergröße nennen.

Legen Sie andererseits die Größen auf Ihrer Website von Anfang an fest. Beispielszenario: 16 Pixel neben Fließtext, 20 Pixel in Buttons und 32 Pixel in Feature Karten. Drei oder vier feste Größen wirken deutlich geordneter als eine neue Größe auf jeder Seite.

Welche Icongrößen sollten Sie verwenden?

Die Größe beeinflusst Optik und Bedienbarkeit zugleich. Ist ein klickbares Icon zu klein, tippen Menschen vor allem mobil daneben. Laut der W3C Erläuterung zu WCAG 2.2 Zielgröße (Minimum) sollte ein Ziel mindestens 24 mal 24 CSS Pixel messen. Kleinere Ziele bestehen nur mit genug Abstand oder unter bestimmten Ausnahmen.

Der entscheidende Punkt ist also: Die Klickfläche darf größer sein als das gezeichnete Symbol. Sie können ein Icon mit 20 Pixeln in eine breitere Buttonfläche setzen und so die Tippfläche vergrößern. Damit bleibt das Icon elegant, und der Button bleibt leicht bedienbar.

Betrachten Sie die Icongröße schließlich zusammen mit der Schriftgröße. Ein Icon neben Text sollte die Zeilenhöhe nicht sprengen, aber gut sichtbar bleiben. In der Praxis liefert ein Icon etwa in Höhe des Fließtexts oft das ausgewogenste Ergebnis. Testen Sie das auf einigen Bildschirmen selbst.

Wie unterscheiden sich die Optionen für ein Iconset?

Die folgende Tabelle vergleicht gängige Optionen im Überblick. Die Einschätzungen beruhen auf unserer Praxiserfahrung; betrachten Sie sie also als Ausgangspunkt und prüfen Sie sie für jedes Projekt neu.

Unser Rat lautet meist: Starten Sie mit einem umfangreichen Iconset. Zeichnen Sie dann die wenigen fehlenden Symbole nach denselben Regeln. So bleibt der Auftritt einheitlich und das Budget vernünftig.

Warum verwirren Icons ohne Beschriftung?

Icons wirken wie eine universelle Sprache, doch die meisten sind es nicht. Der Artikel der Nielsen Norman Group zur Usability von Icons nennt nur wenige Symbole wie Startseite, Drucken und Suche als breit bekannt. Selbst vertraute Formen wie Herz und Stern bedeuten auf verschiedenen Websites Unterschiedliches.

Derselbe Artikel empfiehlt, Icons mit einer sichtbaren Textbeschriftung zu kombinieren. Zudem warnt er, dass Beschriftungen nur beim Überfahren mit der Maus Mühe kosten und auf Touchscreens nicht funktionieren. Deshalb ist ein kurzes Wort neben Icons in Menüs, Filtern und Aktionsbuttons meist die sicherste Lösung.

Außerdem schlägt der Artikel einen praktischen Test vor. Fällt Ihnen innerhalb von etwa fünf Sekunden kein passendes Icon für einen Begriff ein, vermittelt es die Bedeutung vermutlich nicht klar. Für den Beschriftungstext selbst hilft unser Beitrag über UX Writing und Mikrotexte.

Wann darf ein Icon allein stehen?

Die Regel zur Beschriftung kennt einige sinnvolle Ausnahmen. Allerdings gelten sie nur, wenn Menschen das Symbol wirklich kennen.

• Eine Lupe im Suchfeld, denn der Kontext sagt bereits Suche.
• Ein Schließen Symbol (X), vor allem in der Ecke eines Dialogs oder eines Seitenpanels.
• Logos von Social Media Plattformen, da jedes das Markenzeichen selbst ist.
• Abspielen und Pause in einem Videoplayer.

Auch in diesen Fällen brauchen Screenreader Nutzer allerdings einen zugänglichen Namen. Der Code sollte also festhalten, was das Icon tut, selbst wenn der Bildschirm keine Beschriftung zeigt. Darum geht es im nächsten Abschnitt.

Für die Praxis listen Sie zunächst alle unbeschrifteten Icons Ihrer Website auf. Dann stellen Sie zu jedem eine Frage: Wüsste ein Erstbesucher, was zu tun ist? Ist die Antwort unklar, ergänzen Sie ein kurzes Wort. Diese kleine Änderung erleichtert die Bedienung meist deutlich, ohne das Design zu stören.

Wie machen Sie Icons barrierefrei?

Für die Barrierefreiheit teilen Sie Icons in zwei Gruppen: dekorative und funktionale Icons. Ein dekoratives Icon wiederholt die Bedeutung von Text daneben, etwa ein Telefonsymbol neben dem Wort Telefon. Ein funktionales Icon erfüllt dagegen allein eine Aufgabe, etwa ein Schließen Button ohne Text.

• Dekorative Icons: blenden Sie für Screenreader aus. Sonst hören Menschen dieselbe Information doppelt.
• Funktionale Icons: brauchen einen zugänglichen Namen. Der Button heißt dann zum Beispiel Menü schließen.
• Statusicons: Warnung, Erfolg und Fehler sollten nicht nur über Farbe funktionieren. Ergänzen Sie daher Text.

Diese Aufteilung entspricht dem Prinzip für Nicht Text Inhalte in den WCAG Richtlinien des W3C. Den größeren Rahmen erklären wir in unserem Beitrag über barrierefreie Websites nach WCAG. Hier konzentrieren wir uns nur auf Icons.

Barrierefreie Icons verbessern übrigens das Erlebnis für alle. Wer zum Beispiel bei hellem Sonnenlicht aufs Handy schaut, liest kontrastreiche, beschriftete Icons ebenfalls leichter. Zusammengefasst sind diese Regeln ein Qualitätsmaßstab für jeden Besucher, nicht nur für eine Gruppe.

Wie legen Sie Farbe und Kontrast von Icons fest?

Icons mit Bedeutung müssen genauso gut sichtbar sein wie Text. Die W3C Erläuterung zum Nicht Text Kontrast verlangt ein Kontrastverhältnis von mindestens 3:1 gegenüber angrenzenden Farben. Das gilt für Bedienelemente und für Grafiken, die Menschen zum Verständnis brauchen. Inaktive Elemente fallen nicht unter diese Regel.

In der Praxis liegen hellgraue Icons auf weißem Grund oft unter dieser Schwelle. Messen Sie deshalb Ihre Iconfarbe gegen den Hintergrund, sobald Sie sie festlegen. Unser Kontrastrechner erledigt das schnell. Die Codes Ihrer Markenfarben finden Sie außerdem mit unserem Tool für HTML Farbcodes.

Ein weiterer Tipp: Färben Sie Icons nicht willkürlich ein. Halten Sie zum Beispiel alle Navigationsicons in einer neutralen Farbe und nutzen Sie eigene Farben nur für Statusicons wie Fehler, Warnung und Erfolg. So wird Farbe zu einer zusätzlichen Bedeutungsebene.

Warum ist ein SVG Iconset die bessere Wahl?

SVG ist ein vektorbasiertes Bildformat. Deshalb bleibt ein Icon auf jeder Pixeldichte scharf, und eine Datei funktioniert in jeder Größe. Zudem ändern Sie die Farbe per CSS und brauchen keine farbigen Kopien desselben Symbols.

Iconfonts, früher weit verbreitet, bringen dagegen einige Probleme mit. Lädt die Schrift nicht, sehen Menschen ein leeres Kästchen oder ein beliebiges Zeichen statt des Icons. Außerdem lesen Screenreader solche Zeichen manchmal unerwartet vor. Für neue Projekte empfiehlt unser Team daher meist ein SVG basiertes Iconset.

Bei SVG stehen zwei Methoden im Vordergrund. Sie können das Icon direkt in die Seite einbetten oder aus einer Sprite Datei aufrufen. Eingebettete Icons erleichtern die Kontrolle über Farbe und Barrierefreiheit. Ein Sprite hält den Code dagegen schlank, wenn sich dieselben Icons oft wiederholen.

Beeinflusst die Dateigröße von Icons die Ladezeit?

Ein einzelnes SVG Icon ist meist winzig. Das Problem beginnt, wenn die ganze Bibliothek mit Tausenden Symbolen auf der Website lädt. Beispielszenario: Eine Website nutzt nur 30 Icons, aber das Theme lädt das komplette Set samt Stylesheet auf jeder Seite. Dann lädt der Browser Hunderte ungenutzte Symbole umsonst.

Die Lösung ist einfach: Übernehmen Sie nur die Icons ins Projekt, die Sie tatsächlich nutzen. Zudem macht das Entfernen überflüssiger Metadaten aus exportierten SVG Dateien diese kleiner. So belasten Icons das Laden der Seite kaum.

Vereinfachen Sie beim Vorbereiten der SVG Dateien außerdem die Zeichnung im Designprogramm. Überflüssige Gruppen, versteckte Formen und Pfade mit zu vielen Punkten blähen die Datei auf. Lassen Sie das Icon zudem mit seinem Container skalieren, statt die Größe fest einzutragen; dann nutzen Sie dieselbe Datei an vielen Stellen.

Ladezeit messen und verbessern ist allerdings ein größeres Thema. Unser Leitfaden zu Bildoptimierung für Ladezeit und SEO deckt die Bildseite insgesamt ab.

Wie prüfen Sie die Lizenz eines Open Source Iconsets?

Ein kostenloses Iconset bedeutet keine unbegrenzte Nutzung. Open Source Iconsets erscheinen unter verschiedenen Lizenzen, und jede hat eigene Bedingungen. Lesen Sie deshalb die Lizenzdatei, bevor Sie eine Bibliothek in Ihre Website aufnehmen.

• Freizügige Lizenzen: erlauben meist kommerzielle Nutzung, verlangen aber eventuell den Erhalt des Lizenztexts oder Urheberhinweises.
• Namensnennung als Pflicht: verlangen, dass Sie die Quelle auf Ihrer Website nennen.
• Lizenzen mit Weitergabe unter gleichen Bedingungen: verlangen eventuell, dass Sie veränderte Werke unter derselben Lizenz teilen.
• Nur private Nutzung: erlauben keinen Einsatz auf einer kommerziellen Website.

Markenlogos brauchen allerdings besondere Sorgfalt. Logos von Social Media Plattformen und Zahlungsanbietern folgen meist eigenen Nutzungsregeln der Markeninhaber. Kurz gesagt prüfen Sie nicht nur das Iconset, sondern auch jedes Markenzeichen darin. Dieser Beitrag ist keine Rechtsberatung; im Zweifel lesen Sie den Lizenztext mit einer Fachperson.

Halten Sie nach der Prüfung außerdem alles schriftlich fest. Notieren Sie, welches Iconset, welche Version und welche Lizenz Sie nutzen. So findet auch ein Team, das die Website Jahre später übernimmt, die Bedingungen schnell und vermeidet unnötige Risiken.

Welche Schritte führen zum passenden Iconset?

Damit die Wahl leichter fällt, zeigen wir Ihnen die Reihenfolge, die unser Team in Projekten nutzt. Jeder Schritt baut dabei auf dem vorherigen auf.

1. Listen Sie alle benötigten Symbole auf: Menü, Kontakt, Warenkorb, Filter, Social Media und Statusmeldungen.
2. Suchen Sie ein Iconset, das diese Liste möglichst lückenlos abdeckt.
3. Entscheiden Sie sich anhand des Gesamtcharakters der Website für Umriss oder Füllung.
4. Testen Sie, wie Strichstärke und Ecken zu Ihrer Schrift passen.
5. Lesen Sie die Lizenzdatei und bestätigen Sie die kommerzielle Nutzung.
6. Legen Sie 3 oder 4 feste Größen fest und notieren Sie diese in der Designdatei.
7. Übernehmen Sie nur die SVG Icons, die Sie wirklich nutzen.
8. Trennen Sie dekorative und funktionale Icons und vergeben Sie zugängliche Namen.

Möchten Sie die gesamte Bildsprache Ihrer Website lieber gemeinsam mit uns aufbauen, planen wir im Rahmen unserer Webdesign Leistung auch das Iconsystem von Grund auf.

Wie räumen Sie gemischte Icons auf einer bestehenden Website auf?

Überarbeiten Sie eine bestehende Website statt eine neue zu bauen, beginnen Sie mit einer Bestandsaufnahme. Machen Sie Screenshots der Icons jeder Seite und legen Sie sie nebeneinander. Dieser einfache Schritt zeigt sofort, wie viele Stile die Website nutzt.

Wählen Sie dann den häufigsten Stil als Basis und ersetzen Sie die übrigen durch die nächstliegende Variante. Nutzt die Website zum Beispiel überwiegend feine Umriss Icons, reicht es eventuell, einige gefüllte Icons durch Umrissversionen desselben Sets zu ersetzen. So erreichen Sie Einheitlichkeit ohne kompletten Relaunch.

Wir empfehlen, mit der Navigation zu beginnen. Menüs, Footer und mobile Tableisten erscheinen auf jeder Seite, daher wirkt eine Korrektur dort auf die ganze Website. Danach folgen wiederkehrende Bausteine wie Produktkarten, Featureblöcke und Formulare. Einzelseiten kommen zuletzt.

Diese Aufräumarbeit ist oft Teil einer größeren Prüfung der Oberfläche. Weitere Hürden für Nutzer finden Sie mit unserem Leitfaden zum UX Audit.

Welche Fehler passieren bei der Auswahl eines Iconsets am häufigsten?

Hier sind die Fehler, die uns in der Praxis am häufigsten begegnen. Jeder wirkt klein, doch zusammen schwächen sie das Vertrauen, das eine Website ausstrahlt.

• Jedes Symbol aus einer anderen Quelle laden.
• Unklare Icons ohne Beschriftung verwenden.
• Für dieselbe Idee auf verschiedenen Seiten verschiedene Symbole nutzen, etwa einmal einen Umschlag und einmal einen Papierflieger für E-Mail.
• Icons in beliebigen Größen platzieren.
• Hellgraue Icons unterhalb der Kontrastschwelle einsetzen.
• Icons auf einer kommerziellen Website nutzen, ohne die Lizenz zu lesen.
• Die ganze Bibliothek laden und die Seite bremsen.

Der Fehler mit verschiedenen Symbolen für dieselbe Idee verdient besondere Aufmerksamkeit. Haben Besucher einmal gelernt, was ein Symbol bedeutet, erwarten sie dieselbe Bedeutung auf der ganzen Website. Legen Sie also pro Begriff ein Icon fest und halten Sie die Paare in einer einfachen Tabelle fest.

Wie erstellen Sie einen Leitfaden für Icons?

Mit wachsender Website ergänzen verschiedene Personen Seiten und Inhalte. Dann sichert ein kurzer Leitfaden für Icons die Einheitlichkeit. Er muss nicht lang sein; schon eine Seite genügt.

Nehmen Sie konkret diese Angaben auf: Name und Lizenz des Iconsets, Standardstrichstärke, erlaubte Größen, Farbregeln und eine Tabelle, die jedem Begriff sein Icon zuordnet. Ergänzen Sie zudem eine kurze Notiz, wie Sie dekorative und funktionale Icons kennzeichnen.

Beispielszenario: Ein Onlineshop wählt für den Begriff Versand ein Lastwagensymbol. Steht diese Zuordnung im Leitfaden, greift die Person, die eine neue Kampagnenseite baut, nicht zu einem Paketsymbol. Somit spricht die Website auch über Jahre dieselbe Sprache.

Wie passt ein Iconset zu Ihrer Markenidentität?

Icons gehören neben Logo, Farbpalette und Schrift zur visuellen Stimme einer Marke. Ein Kindermodegeschäft mit weichem Logo und runder Schrift sendet zum Beispiel widersprüchliche Signale mit spitzen, technischen Icons. Für ein Ingenieurbüro stärken feine, präzise Icons dagegen das Vertrauen.

Diese Passung testen Sie auf einfache Weise. Stellen Sie Logo, Überschriftenschrift und fünf oder sechs Icons eines Kandidaten auf einen Bildschirm. Schauen Sie sich diese Ansicht dann einige Tage später erneut an. Wirken sie auf den ersten Blick nicht wie eine Familie, probieren Sie ein anderes Set.

Setzen Sie Ihre Markenfarbe bei Icons zudem sparsam ein. Färben Sie jedes Icon in der Markenfarbe, entsteht Unruhe, und der wichtigste Button verliert an Wirkung. Reservieren Sie die Markenfarbe also für zentrale Aktionsicons. Die emotionale Seite von Farben beleuchten wir im Beitrag zur Farbpsychologie im Webdesign.

Wie unterscheidet sich die Nutzung von Icons mobil und am Desktop?

Mobile Bildschirme bieten wenig Platz, und Menschen bedienen sie mit dem Finger statt mit der Maus. Deshalb brauchen Icons mobil größere Tippflächen. Tooltips beim Überfahren funktionieren mobil außerdem gar nicht; die Beschriftung muss also immer sichtbar bleiben.

Am Desktop steht dagegen mehr Platz zur Verfügung, und eine vollständige Beschriftung neben jedem Icon fällt leicht. Ein Desktopmenü zeigt zum Beispiel die Worte Mein Warenkorb neben dem Symbol. In einer mobilen Tableiste genügen dann ein kurzes Wort und das Icon.

• Nutzen Sie mobil höchstens fünf Tabs mit Icons, sonst passen die Beschriftungen nicht.
• Ergänzen Sie neben dem Hamburgersymbol eventuell das Wort Menü.
• Halten Sie den Abstand zwischen Icon und Beschriftung im ganzen Desktopmenü gleich.
• Verwenden Sie auf beiden Geräten dasselbe Symbol für dieselbe Idee.

Wie testen Sie Ihr Iconset mit echten Nutzern?

Sieht Ihr Team ein Symbol oft genug, erscheint seine Bedeutung selbstverständlich. Ein Erstbesucher liest dasselbe Symbol allerdings womöglich ganz anders. Deshalb lohnt sich ein kurzer Test der wichtigsten Icons mit echten Menschen.

Eine einfache Methode funktioniert so: Zeigen Sie einigen Personen außerhalb des Teams jedes Icon ohne Beschriftung und lassen Sie sie raten, wofür es steht. Zeigen Sie dann dieselben Icons mit Beschriftung und fragen Sie, welche Aktion sie wählen würden. Streuen die Antworten stark, ersetzen Sie das Symbol oder stärken Sie die Beschriftung.

Beispielszenario: Eine Dienstleistungsseite nutzt ein Taschenrechnersymbol auf dem Button Angebot anfordern. Die meisten Testpersonen verstehen es als Preisrechner. In diesem Fall ist es besser, das Icon zu entfernen und nur einen klaren Buttontext zu behalten. Kurz gesagt: Manchmal ist das beste Icon gar keines.

Wann lohnen sich eigens gezeichnete Icons?

Fertige Iconsets decken den Bedarf der meisten Websites ab. Dennoch machen eigene Icons in manchen Fällen einen Unterschied. Sie lohnen sich zum Beispiel, wenn Ihre Branche Produkte oder Abläufe hat, die kein fertiges Set abbildet. Ebenso helfen sie, wenn Ihre Markenidentität einen sehr eigenen Zeichenstil verlangt.

• Sie haben branchenspezifische Begriffe ohne Entsprechung in fertigen Sets.
• Ihre Markenidentität beruht auf einem eigenen Illustrationsstil.
• Icons stehen auf Produktseiten im Zentrum der Verkaufsbotschaft.
• Sie möchten nicht dieselben Standardsymbole wie Mitbewerber nutzen.

Für eigene Icons gelten dieselben Regeln: festes Raster, eine Strichstärke, einheitliche Ecken und SVG als Ausgabe. Zudem kostet es weit weniger, ein fertiges Set als Basis zu nehmen und nur fehlende Symbole nach seinen Regeln zu zeichnen. Unser Team empfiehlt meist genau diesen hybriden Weg.

Checkliste: Ist Ihr Iconset startklar?

Haken Sie vor dem Livegang jeden Punkt ab. Stimmen alle Punkte, steht Ihr Iconset auf einem soliden Fundament.

• Alle Icons stammen aus einem Set oder aus Quellen mit denselben Regeln.
• Der Stil, Umriss oder Füllung, bleibt einheitlich; eine Mischung folgt einer klaren Regel wie dem aktiven Zustand.
• Strichstärke und Ecken stimmen bei jedem Icon überein.
• Die Größen beschränken sich auf wenige, vorab festgelegte Werte.
• Klickbare Icons haben eine ausreichend große Zielfläche.
• Unklare Icons haben eine sichtbare Textbeschriftung.
• Dekorative Icons sind für Screenreader ausgeblendet, funktionale haben einen zugänglichen Namen.
• Sie haben den Hintergrundkontrast bedeutungstragender Icons gemessen.
• Icons liegen als SVG vor, und die Seite lädt nur die nötigen.
• Die Lizenz erlaubt kommerzielle Nutzung, und nötige Namensnennungen sind vorhanden.

Fällt Ihnen diese Liste schwer oder möchten Sie Ihre gesamte Oberfläche von Anfang an einheitlich gestalten, bauen wir diesen Teil Ihrer Website gern für Sie. Beschreiben Sie Ihr Projekt auf unserer Seite zur Webdesign Leistung und fordern Sie ein Angebot an.