Die besten kostenlosen Icon-Bibliotheken: Lucide vs. Heroicons vs. Phosphor vs. Tabler | We.Inc
13 kostenlose SVG-Icon-Bibliotheken nebeneinander: dieselben Icons aus jeder, echte Lizenzen anhand jedes Pakets geprüft, Icon-Anzahl, Stile, React- und Vue-Pakete und wie du sie barrierefrei einsetzt.
Kostenlose SVG-Icon-Bibliotheken im Vergleich
Lucide, Heroicons, Phosphor und Tabler sind die praktischsten kostenlosen Icon-Sets für Websites: Alle stehen unter freizügigen Lizenzen (ISC oder MIT), und alle liefern React-Pakete, die nur die Icons bündeln, die du importierst. Tabler hat die meisten Icons, Phosphor die meisten Strichstärken und Heroicons das kleinste, kompakteste Set.
Schnelle Wahl
Wenn du willst
Probiere
Ein großes, einheitliches Outline-Set
Lucide oder Tabler
Mehrere Strichstärken desselben Icons
Phosphor
Ein kleines Set, das zu Tailwind UI passt
Heroicons
Markenlogos
Simple Icons (Markenrechte beachten)
Den Look von Google, variable Strichstärke
Material Symbols
Dieselben acht Alltags-Icons, gezeichnet von sechs Bibliotheken, damit du ihren Stil direkt vergleichen kannst, danach eine vollständige Tabelle mit dreizehn Bibliotheken, deren Lizenzen aus der LICENSE-Datei jedes Pakets gelesen wurden, Icon-Anzahlen aus den veröffentlichten Dateien und den Paketen zum Installieren.
Vergleiche das Raster. Jede Zeile ist eine Bibliothek, die dieselben acht Ideen zeichnet: Startseite, Suche, Nutzer, Einstellungen, Herz, Löschen, E-Mail und Benachrichtigungen.
Prüfe die Lizenzspalte, bevor du dich entscheidest. Die meisten sind MIT oder ISC, aber Remix Icon hat inzwischen eine eigene Lizenz, und Font Awesome Free verlangt eine Namensnennung.
Installiere das Paket für dein Framework aus der Spalte React oder Vue oder kopiere einzelne SVG-Dateien in dein Projekt.
Folge den Hinweisen zur Barrierefreiheit unten, damit dekorative Icons für Screenreader stumm bleiben und bedeutungstragende ein Label bekommen.
Wähle eine Bibliothek und bleib dabei. Sets mit unterschiedlichen Strichstärken und Eckenstilen zu mischen lässt eine Oberfläche unfertig wirken.
Importiere Icons einzeln (import { Search } from 'lucide-react') statt die ganze Bibliothek, damit dein Bundle nur enthält, was du nutzt.
Setze die Icon-Farbe mit currentColor, damit Icons der Textfarbe von Buttons und Links folgen, auch bei Hover und im Dark Mode.
Gib Buttons, die nur aus einem Icon bestehen, mit aria-label am Button einen zugänglichen Namen und verstecke das svg selbst mit aria-hidden="true".
Prüfe die Lizenz bei jedem Upgrade erneut. Remix Icon ist mit Version 4.9.0, veröffentlicht im Januar 2026, von Apache 2.0 zu einer eigenen Lizenz gewechselt.
Häufige Fragen
Kann ich diese Icons in kommerziellen Projekten nutzen?
Ja, bei allen dreizehn aufgeführten Bibliotheken, im Rahmen ihrer Lizenzen. MIT, ISC und Apache 2.0 erlauben kommerzielle Nutzung, wenn du den Lizenzhinweis bei Kopien beibehältst. Font Awesome Free verlangt eine Namensnennung, die bereits in den Dateien steht. Remix Icon erlaubt die Nutzung in Produkten, verbietet aber den Verkauf der Icons als Paket und ihre Nutzung als Logo.
Ist Lucide dasselbe wie Feather?
Lucide begann als Community-Fork von Feather, als die Updates von Feather nachließen. Es behält den Look von Feather, hat weit mehr Icons und wird aktiv gepflegt. Icons, die von Feather stammen, stehen weiter unter der MIT-Lizenz von Feather; der Rest von Lucide steht unter ISC.
Heroicons oder Lucide?
Heroicons ist ein kleineres Set von den Machern von Tailwind CSS, mit passenden Solid- und kleinen Größen, was zu Oberflächen passt, die mit Tailwind gebaut sind. Lucide hat ein Vielfaches an Icons, sodass sie dir seltener ausgehen. Beide sind freizügig lizenziert und haben React-Pakete.
Sollte ich eine Icon-Schrift oder SVG nutzen?
In den meisten Fällen SVG. Inline-SVG oder ein Komponentenpaket wird scharf dargestellt, lässt sich pro Pfad gestalten, liefert nur die Icons aus, die du nutzt, und funktioniert mit Screenreadern. Icon-Schriften laden unter Umständen eine ganze Schrift für ein paar Icons und scheitern stillschweigend, wenn die Schrift blockiert wird.
Wie mache ich Icons barrierefrei?
Entscheide, ob das Icon eine Bedeutung trägt. Dekorative Icons neben Text bekommen aria-hidden="true". Ein Icon, das der einzige Inhalt eines Buttons oder Links ist, braucht eine Textalternative, meist aria-label am Button oder visuell versteckten Text darin.
Drei Wege, ein Icon auf eine Seite zu bringen
Komponentenpakete wie lucide-react oder @heroicons/react sind in einem React- oder Vue-Projekt am einfachsten. Jedes Icon ist eine Komponente, du importierst nur die, die du nutzt, und Props legen Größe, Farbe und Strichstärke fest.
Inline-SVG bedeutet, das svg-Markup direkt in dein HTML einzufügen. Es braucht kein Paket und keinen Request, und CSS kann jeden Teil gestalten, aber das Markup wiederholt sich überall dort, wo das Icon erscheint.
Ein SVG-Sprite packt alle Icons als symbol-Elemente in eine Datei, und jede Verwendung verweist mit <use href="/icons.svg#search"> auf eines davon. Der Browser cacht die Datei einmal, was zu Websites mit vielen Icons auf einfachen HTML-Seiten passt.
Wie wir die Lizenzen geprüft haben
Jede Lizenz in der Tabelle stammt aus der LICENSE-Datei in der angegebenen Paketversion, nicht aus den Metadaten des Pakets. Das ist wichtig: Der npm-Eintrag für Remix Icon nennt noch Apache 2.0, während die LICENSE-Datei in Version 4.9.1 die neuere Remix Icon License v1.0 ist. Die Icon-Anzahl entspricht der Zahl der SVG-Dateien, die das Paket im genannten Ordner mitliefert.
Lizenzen können sich zwischen Versionen ändern. Öffne vor dem Veröffentlichen die LICENSE-Datei in der Version, die du installierst.
Kostenlose Icon-Bibliotheken im Vergleich (Versionen und Anzahlen laut npm, geprüft am 13. Oktober 2026)
Bibliothek
Lizenz
Icons
Stile
React
Vue
Lucide 1.55.0
ISC
Outline (Strichstärke einstellbar)
Heroicons 2.2.0
MIT
324 (jeweils in 4 Stilen)
Outline 24, Solid 24, Mini 20, Micro 16
@heroicons/react
@heroicons/vue
Phosphor 2.1.1 (Core)
MIT
1,512 (jeweils in 6 Strichstärken)
Thin, Light, Regular, Bold, Fill, Duotone
@phosphor-icons/react
@phosphor-icons/vue
Tabler Icons 3.49.0
MIT
5,184 Outline, 1,054 gefüllt
Outline (Strich einstellbar), gefüllt
@tabler/icons-react
@tabler/icons-vue
Bootstrap Icons 1.13.2
MIT
2,078 Dateien (viele mit einem -fill-Zwilling)
Outline- und Fill-Varianten
react-bootstrap-icons (Community)
Nichts Offizielles; SVG oder die Icon-Schrift nutzen
Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929 Symbole
Outlined, Rounded, Sharp; Achsen für Füllung, Strichstärke und Grade
Die Google-Fonts-Schrift oder SVG-Pakete nutzen
Die Google-Fonts-Schrift oder SVG-Pakete nutzen
Remix Icon 4.9.1
Remix Icon License v1.0
1,539 (Line und Fill)
Line, Fill
@remixicon/react
@remixicon/vue
Font Awesome Free 7.3.1
CC BY 4.0 (Icons), SIL OFL 1.1 (Schriften), MIT (Code)
2,001 Solid, 273 Regular, 609 Marken
Solid, Regular (teilweise), Marken
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome
Ionicons 8.1.0
MIT
1,357 Dateien
Filled, Outline, Sharp
Web Component (ion-icon)
Web Component (ion-icon)
Iconoir 7.12.1
MIT
1,383 Regular, 288 Solid
Regular (Strich), Solid
@iconoir/vue
Radix Icons 1.3.2
MIT
Ein Stil, gezeichnet auf einem 15 × 15-Raster
@radix-ui/react-icons
Nichts Offizielles
Feather 4.29.2
MIT
Outline
react-feather (Community)
vue-feather-icons (Community)
Simple Icons 16.35.0
CC0 1.0 (die SVG-Dateien)
3,466 Markenlogos
Einfarbige Markenzeichen
@icons-pack/react-simple-icons (Community)
SVG nutzen
ISC
Von Feather übernommene Icons stehen zusätzlich unter MIT. Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
Apache 2.0
Leg Kopien den Lizenztext bei und vermerke alle Änderungen, die du vornimmst.
Remix Icon License v1.0
Kostenlos in kommerziellen Produkten, aber du darfst die Icons nicht als Icon-Paket verkaufen, kein konkurrierendes Icon-Set daraus bauen und keines als Logo verwenden. Versionen bis 4.8.0 standen unter Apache 2.0; die neue Lizenz gilt ab 4.9.0.
CC BY 4.0 (Icons), SIL OFL 1.1 (Schriften), MIT (Code)
Eine Namensnennung ist Pflicht; die Kommentare, die bereits in den heruntergeladenen Dateien stehen, zählen als Namensnennung, also entferne sie nicht. Pro-Icons sind kostenpflichtig.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei.
MIT
Behalte den Copyright-Hinweis bei Kopien bei. Wird selten aktualisiert; Lucide ist daraus hervorgegangen.
CC0 1.0 (die SVG-Dateien)
Die Dateien sind gemeinfrei, aber die Logos sind Marken ihrer jeweiligen Unternehmen. Halte dich an die Richtlinien jeder Marke.
Startseite
Suche
Nutzer
Einstellungen
Favorit
Löschen
E-Mail
Benachrichtigungen
Dieselben acht Icons, sechs Bibliotheken
Dunkler Hintergrund
Acht gängige Icons, wie jede Bibliothek sie zeichnet
Bibliothek
{concept}-Icon von {library}
Die Icons sind unveränderte SVG-Dateien aus jedem Paket in der Version aus der Tabelle unten (nur die Dateinamen wurden geändert), gezeigt unter ihren eigenen Lizenzen.
Lizenztexte:
Bibliotheken im Vergleich
Hinweise zu Lizenzen
Icons barrierefrei einsetzen
In allen drei Fällen ist das svg vor Screenreadern verborgen, und der Button trägt den Namen. Steht ein Icon neben sichtbarem Text, verstecke das Icon und lass den Text sprechen.