Lucide
ISC-LizenzNamensnennung nicht nötig
Über tausend Strichsymbole in einheitlicher Strichstärke, sehr gut gepflegt. Hervorgegangen aus Feather Icons. Die ISC-Lizenz erlaubt kommerzielle Nutzung und Veränderung ohne Auflagen.
Grafiken
Icons
Symbolsätze mit klarer Lizenz, dazu die Frage, die vor der Auswahl steht: als SVG einbinden oder als Schriftart?
Quellen
Lizenzangaben nach bestem Wissen zum 14. August 2026. Maßgeblich ist immer die Angabe auf der Quellseite selbst – Bedingungen ändern sich.
Heroicons
MIT-LizenzNamensnennung nicht nötig
Kompakter Satz in drei Varianten – Kontur, gefüllt und klein. Sauber gezeichnet und gut aufeinander abgestimmt, dafür deutlich weniger Umfang als Lucide.
Bootstrap Icons
MIT-LizenzNamensnennung nicht nötig
Rund zweitausend Symbole, unabhängig vom Bootstrap-Framework verwendbar. Breite Abdeckung bei Datei-, Format- und Oberflächensymbolen.
Material Symbols
Apache-Lizenz 2.0Namensnennung nicht nötig
Googles Symbolsystem mit einstellbarer Strichstärke und Füllung. Sehr umfangreich. Laden Sie die SVG-Dateien herunter, statt sie über Googles Server einzubinden – dieselbe Überlegung wie bei Schriften.
Simple Icons
CC0 für die SammlungNamensnennung nicht nötig
Markenlogos in einheitlicher Form. Achtung: Die Sammlung steht unter CC0, die Logos selbst bleiben aber Marken ihrer Inhaber. Verwendbar zur Kennzeichnung, nicht zur Werbung mit fremden Marken.
SVG statt Icon-Schrift
Icon-Schriften waren jahrelang der übliche Weg: eine Schriftdatei, in der jedes Zeichen ein Symbol ist. Das hatte technische Gründe, die es nicht mehr gibt.
Heute ist SVG in fast jeder Hinsicht besser. Es lädt nur die Symbole, die wirklich vorkommen, statt einer Datei mit 800 ungenutzten. Es ist per CSS einfärbbar und mehrfarbig möglich. Es wird nicht von einem Werbeblocker ausgeknipst. Und es verschwindet nicht, wenn die Schrift nicht lädt – bei Icon-Schriften erscheinen dann Kästchen oder zufällige Buchstaben.
Der einzige verbliebene Fall für eine Icon-Schrift ist ein Bestandsprojekt, in dem sie bereits steckt. Für neue Arbeiten gibt es keinen Grund mehr.
Barrierefrei einbinden
Ein Icon ohne Text ist für einen Screenreader zunächst nichts. Steht es allein – etwa als Schaltfläche zum Schließen –, braucht es eine Beschriftung über aria-label. Steht daneben bereits Text, der dasselbe sagt, bekommt das Icon aria-hidden, damit die Information nicht doppelt vorgelesen wird.
Der zweite Punkt ist Kontrast: Ein Icon, das Bedeutung trägt, muss gegenüber seinem Hintergrund 3 zu 1 erreichen. Rein dekorative Symbole sind davon ausgenommen.
Und der dritte: Ein Icon allein ist selten verständlich. Ein Zahnrad, ein Schraubenschlüssel und drei Schieberegler stehen alle für Einstellungen – welches Symbol welche Bedeutung hat, weiß niemand sicher. Ein Wort daneben löst das.
Was die einzelnen Lizenzkürzel bedeuten und wo es teuer wird, steht unter Bildlizenzen verstehen. Wenn das Material feststeht, geht es weiter mit Bilder für die Website optimieren.
Häufige Fragen
SVG-Datei oder SVG direkt ins HTML?
Kommt darauf an, ob das Icon eingefärbt werden soll. Als externe Datei über img eingebunden lässt es sich nicht per CSS umfärben. Direkt ins HTML geschrieben schon – dafür bläht es den Quelltext auf, wenn dasselbe Symbol oft vorkommt. Der Mittelweg ist ein SVG-Sprite.
Darf ich Markenlogos als Icon verwenden?
Zur sachlichen Kennzeichnung ja, etwa um zu zeigen, welche Zahlungsarten Sie akzeptieren. Nicht erlaubt ist es, mit fremden Marken zu werben oder eine Verbindung zu suggerieren, die nicht besteht.
Wie groß sollte ein Icon sein?
In Fließtext und Beschriftungen 16 bis 20 Pixel, in Schaltflächen 20 bis 24. Wichtiger als die sichtbare Größe ist die Trefferfläche: Sie sollte mindestens 44 mal 44 Pixel betragen, sonst wird die Bedienung auf dem Handy zur Glückssache.
Weitere Kategorien
Hintergrundbilder
Quellen für großflächige Bilder, dazu die Frage, die vor der Bildauswahl kommt: Braucht die Seite überhaupt ein Hintergrundbild?
Schriften
Quellen für Schriften, die Sie auf einer geschäftlichen Website wirklich einsetzen dürfen – und die Stolperstellen bei deutschen Texten.
Animierte GIFs
Der Klassiker aus der Frühzeit des Web – und die ehrliche Einordnung, wo er heute noch am Platz ist und wo nicht.
Banner
Standardmaße, Dateigrenzen und die Frage, ob es überhaupt ein Bild sein muss.
Buttons und Trenner
Früher waren Buttons Bilddateien und Trennlinien animierte Grafiken. Beides macht man heute mit ein paar Zeilen CSS – aus guten Gründen.