Beste gratis iconenbibliotheken: Lucide vs Heroicons vs Phosphor vs Tabler | We.Inc
13 gratis SVG-iconenbibliotheken naast elkaar: dezelfde iconen uit elke bibliotheek, echte licenties gecontroleerd in elk package, aantallen iconen, stijlen, React- en Vue-packages en hoe u ze toegankelijk gebruikt.
Gratis SVG-iconenbibliotheken vergeleken
Lucide, Heroicons, Phosphor en Tabler zijn de meest praktische gratis iconensets voor websites: ze hebben allemaal een ruime licentie (ISC of MIT) en leveren allemaal React-packages die alleen de iconen bundelen die u importeert. Tabler heeft de meeste iconen, Phosphor de meeste diktes en Heroicons de kleinste, strakste set.
Snelle keuze
Als u wilt
Probeer
Een grote, consistente set outline-iconen
Lucide of Tabler
Meerdere diktes van hetzelfde icoon
Phosphor
Een kleine set die past bij Tailwind UI
Heroicons
Merklogo's
Simple Icons (controleer de merkregels)
De stijl van Google, variabele dikte
Material Symbols
Dezelfde acht alledaagse iconen getekend door zes bibliotheken, zodat u hun stijl direct kunt vergelijken, gevolgd door een volledige tabel van dertien bibliotheken met licenties gelezen uit het eigen LICENSE-bestand van elk package, aantallen iconen uit de gepubliceerde bestanden en de packages om te installeren.
Vergelijk het raster. Elke rij is één bibliotheek die dezelfde acht begrippen tekent: home, zoeken, gebruiker, instellingen, hart, verwijderen, mail en meldingen.
Controleer de licentiekolom voordat u kiest. De meeste zijn MIT of ISC, maar Remix Icon heeft nu een eigen licentie en Font Awesome Free vereist naamsvermelding.
Installeer het package voor uw framework uit de kolom React of Vue, of kopieer losse SVG-bestanden naar uw project.
Volg de toegankelijkheidstips hieronder zodat decoratieve iconen stil blijven voor schermlezers en betekenisvolle iconen een label krijgen.
Kies één bibliotheek en blijf daarbij. Sets met verschillende lijndiktes en hoekstijlen mengen laat een interface onaf ogen.
Importeer iconen één voor één (import { Search } from 'lucide-react') in plaats van de hele bibliotheek, zodat uw bundle alleen bevat wat u gebruikt.
Stel de iconkleur in met currentColor zodat iconen de tekstkleur van knoppen en links volgen, ook bij hover en in dark mode.
Geef knoppen met alleen een icoon een toegankelijke naam met aria-label op de knop, en verberg de svg zelf met aria-hidden="true".
Controleer de licentie opnieuw als u upgradet. Remix Icon stapte in versie 4.9.0, uitgebracht in januari 2026, over van Apache 2.0 naar een eigen licentie.
Veelgestelde vragen
Mag ik deze iconen in commerciële projecten gebruiken?
Ja, voor alle dertien genoemde bibliotheken, binnen hun licenties. MIT, ISC en Apache 2.0 staan commercieel gebruik toe als u de licentievermelding bij kopieën bewaart. Font Awesome Free vereist naamsvermelding, die al in de bestanden staat. Remix Icon staat gebruik in producten toe, maar verbiedt de iconen als pakket te verkopen of als logo te gebruiken.
Is Lucide hetzelfde als Feather?
Lucide begon als communityfork van Feather toen de updates van Feather vertraagden. Het behoudt de stijl van Feather, heeft veel meer iconen en wordt actief onderhouden. Iconen die uit Feather komen, blijven onder de MIT-licentie van Feather vallen; de rest van Lucide is ISC.
Heroicons of Lucide?
Heroicons is een kleinere set van de makers van Tailwind CSS, met bijpassende solid- en kleine formaten, wat goed past bij interfaces die met Tailwind zijn gebouwd. Lucide heeft meerdere keren zoveel iconen, dus de kans is kleiner dat u er een mist. Beide hebben een ruime licentie en React-packages.
Moet ik een iconenlettertype of SVG gebruiken?
In de meeste gevallen SVG. Inline SVG of een componentpackage wordt scherp weergegeven, kan per pad worden gestyled, levert alleen de iconen die u gebruikt en werkt met schermlezers. Iconenlettertypen laden soms een heel lettertype voor een paar iconen en falen ongemerkt als het lettertype wordt geblokkeerd.
Hoe maak ik iconen toegankelijk?
Bepaal of het icoon betekenis draagt. Decoratieve iconen naast tekst krijgen aria-hidden="true". Een icoon dat de enige inhoud van een knop of link is, heeft een tekstalternatief nodig, meestal aria-label op de knop of visueel verborgen tekst erin.
Drie manieren om een icoon op een pagina te zetten
Componentpackages zoals lucide-react of @heroicons/react zijn het makkelijkst in een React- of Vue-project. Elk icoon is een component, u importeert alleen de iconen die u gebruikt en props bepalen grootte, kleur en lijndikte.
Inline SVG betekent dat u de svg-markup direct in uw HTML plakt. Er is geen package en geen request nodig, en CSS kan elk onderdeel stylen, maar de markup wordt herhaald overal waar het icoon verschijnt.
Een SVG-sprite zet alle iconen in één bestand als symbol-elementen, en elk gebruik verwijst naar één ervan met <use href="/icons.svg#search">. De browser cachet het bestand één keer, wat goed past bij sites met veel iconen op gewone HTML-pagina's.
Hoe we de licenties hebben gecontroleerd
Elke licentie in de tabel komt uit het LICENSE-bestand in de genoemde packageversie, niet uit de metadata van het package. Dat maakt uit: de npm-vermelding van Remix Icon zegt nog steeds Apache 2.0, terwijl het LICENSE-bestand in versie 4.9.1 de nieuwere Remix Icon License v1.0 is. Aantallen iconen zijn het aantal SVG-bestanden dat het package levert in de genoemde map.
Licenties kunnen tussen versies veranderen. Open voordat u live gaat het LICENSE-bestand in de versie die u installeert.
Gratis iconenbibliotheken vergeleken (versies en aantallen zoals gepubliceerd op npm, gecontroleerd op 13 oktober 2026)
Bibliotheek
Licentie
Iconen
Stijlen
React
Vue
Lucide 1.55.0
ISC
Outline (lijndikte instelbaar)
Heroicons 2.2.0
MIT
324 (elk in 4 stijlen)
Outline 24, solid 24, mini 20, micro 16
@heroicons/react
@heroicons/vue
Phosphor 2.1.1 (core)
MIT
1,512 (elk in 6 diktes)
Thin, light, regular, bold, fill, duotone
@phosphor-icons/react
@phosphor-icons/vue
Tabler Icons 3.49.0
MIT
5,184 outline, 1,054 gevuld
Outline (lijn instelbaar), gevuld
@tabler/icons-react
@tabler/icons-vue
Bootstrap Icons 1.13.2
MIT
2,078 bestanden (veel met een -fill-tweeling)
Outline- en fill-varianten
react-bootstrap-icons (community)
Geen officieel; gebruik SVG of het iconenlettertype
Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929 symbolen
Outlined, rounded, sharp; assen voor fill, weight en grade
Gebruik het Google Fonts-lettertype of SVG-packages
Gebruik het Google Fonts-lettertype of SVG-packages
Remix Icon 4.9.1
Remix Icon License v1.0
1,539 (line en fill)
Line, fill
@remixicon/react
@remixicon/vue
Font Awesome Free 7.3.1
CC BY 4.0 (iconen), SIL OFL 1.1 (lettertypen), MIT (code)
2,001 solid, 273 regular, 609 merken
Solid, regular (gedeeltelijk), merken
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome
Ionicons 8.1.0
MIT
1,357 bestanden
Filled, outline, sharp
Webcomponent (ion-icon)
Webcomponent (ion-icon)
Iconoir 7.12.1
MIT
1,383 regular, 288 solid
Regular (lijn), solid
@iconoir/vue
Radix Icons 1.3.2
MIT
Eén stijl, getekend op een raster van 15 × 15
@radix-ui/react-icons
Geen officieel
Feather 4.29.2
MIT
Outline
react-feather (community)
vue-feather-icons (community)
Simple Icons 16.35.0
CC0 1.0 (de SVG-bestanden)
3,466 merklogo's
Eenkleurige merktekens
@icons-pack/react-simple-icons (community)
Gebruik SVG
ISC
Iconen uit Feather vallen ook onder MIT. Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën.
Apache 2.0
Voeg de licentietekst toe aan kopieën en vermeld wijzigingen die u aanbrengt.
Remix Icon License v1.0
Gratis in commerciële producten, maar u mag de iconen niet verkopen als iconenpakket, er geen concurrerende iconenset van bouwen en er geen als logo gebruiken. Versies tot en met 4.8.0 waren Apache 2.0; de nieuwe licentie begint bij 4.9.0.
CC BY 4.0 (iconen), SIL OFL 1.1 (lettertypen), MIT (code)
Naamsvermelding is verplicht; de opmerkingen die al in de gedownloade bestanden staan tellen als naamsvermelding, dus verwijder ze niet. Pro-iconen zijn betaald.
MIT
Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën.
MIT
Bewaar de copyrightvermelding bij kopieën. Wordt zelden bijgewerkt; Lucide is eruit voortgekomen.
CC0 1.0 (de SVG-bestanden)
De bestanden zijn publiek domein, maar de logo's zijn handelsmerken van hun merken. Volg de richtlijnen van elk merk.
Home
Zoeken
Gebruiker
Instellingen
Favoriet
Verwijderen
Mail
Meldingen
Dezelfde acht iconen, zes bibliotheken
Donkere achtergrond
Acht veelgebruikte iconen zoals elke bibliotheek ze tekent
Bibliotheek
{concept}-icoon van {library}
De iconen zijn ongewijzigde SVG-bestanden uit elk package in de versie uit de tabel hieronder (alleen de bestandsnamen zijn gewijzigd), getoond onder hun eigen licenties.
Licentieteksten:
Bibliotheken vergeleken
Opmerkingen over licenties
Iconen toegankelijk gebruiken
In alle drie is de svg verborgen voor schermlezers en draagt de knop de naam. Staat een icoon naast zichtbare tekst, verberg dan het icoon en laat de tekst spreken.