13 darmowych bibliotek ikon SVG obok siebie: te same ikony z każdej z nich, prawdziwe licencje sprawdzone w każdym pakiecie, liczba ikon, style, pakiety React i Vue oraz jak używać ich w sposób dostępny.
Darmowe biblioteki ikon SVG: porównanie
Lucide, Heroicons, Phosphor i Tabler to najpraktyczniejsze darmowe zestawy ikon dla stron internetowych: wszystkie mają liberalne licencje (ISC lub MIT) i wszystkie oferują pakiety React, które dołączają do bundla tylko importowane ikony. Tabler ma najwięcej ikon, Phosphor najwięcej grubości, a Heroicons to najmniejszy, najbardziej spójny zestaw.
Szybki wybór
Jeśli chcesz
Wypróbuj
Duży, spójny zestaw konturowy
Lucide lub Tabler
Kilka grubości tej samej ikony
Phosphor
Mały zestaw pasujący do Tailwind UI
Heroicons
Logo marek
Simple Icons (sprawdź zasady dotyczące znaków towarowych)
Wygląd Google, zmienna grubość
Material Symbols
Te same osiem codziennych ikon narysowanych przez sześć bibliotek, abyś mógł bezpośrednio porównać ich styl, a potem pełna tabela trzynastu bibliotek z licencjami odczytanymi z pliku LICENSE każdego pakietu, liczbą ikon z opublikowanych plików i pakietami do zainstalowania.
Porównaj siatkę. Każdy wiersz to jedna biblioteka rysująca te same osiem pojęć: dom, wyszukiwanie, użytkownik, ustawienia, serce, usuwanie, poczta i powiadomienia.
Przed wyborem sprawdź kolumnę z licencją. Większość to MIT lub ISC, ale Remix Icon ma teraz własną licencję, a Font Awesome Free wymaga podania autorstwa.
Zainstaluj pakiet dla swojego frameworka z kolumny React lub Vue albo skopiuj pojedyncze pliki SVG do projektu.
Postępuj zgodnie z poniższymi uwagami o dostępności, aby ikony dekoracyjne były pomijane przez czytniki ekranu, a ikony niosące znaczenie miały etykietę.
Wybierz jedną bibliotekę i się jej trzymaj. Mieszanie zestawów o różnej grubości linii i stylu narożników sprawia, że interfejs wygląda na niedokończony.
Importuj ikony pojedynczo (import { Search } from 'lucide-react'), zamiast importować całą bibliotekę, aby bundle zawierał tylko to, czego używasz.
Ustawiaj kolor ikon przez currentColor, aby ikony podążały za kolorem tekstu przycisków i linków, także przy najechaniu i w trybie ciemnym.
Przyciskom zawierającym tylko ikonę nadaj dostępną nazwę przez aria-label na przycisku, a sam svg ukryj przez aria-hidden="true".
Przy aktualizacji ponownie sprawdź licencję. Remix Icon przeszedł z Apache 2.0 na własną licencję w wersji 4.9.0, wydanej w styczniu 2026.
Najczęściej zadawane pytania
Czy mogę używać tych ikon w projektach komercyjnych?
Tak, w przypadku wszystkich trzynastu wymienionych bibliotek, w granicach ich licencji. MIT, ISC i Apache 2.0 pozwalają na użytek komercyjny, jeśli zachowasz informację o licencji w kopiach. Font Awesome Free wymaga podania autorstwa, które jego pliki już zawierają. Remix Icon pozwala na użycie w produktach, ale zabrania sprzedawania ikon jako paczki lub używania ich jako logo.
Czy Lucide to to samo co Feather?
Lucide powstał jako społecznościowy fork Feathera, gdy aktualizacje Feathera zwolniły. Zachowuje wygląd Feathera, ma znacznie więcej ikon i jest aktywnie rozwijany. Ikony pochodzące z Feathera pozostają na licencji MIT Feathera; reszta Lucide jest na ISC.
Heroicons czy Lucide?
Heroicons to mniejszy zestaw od twórców Tailwind CSS, z pasującymi wersjami wypełnionymi i małymi, co pasuje do interfejsów budowanych w Tailwind. Lucide ma kilka razy więcej ikon, więc rzadziej czegoś zabraknie. Oba mają liberalne licencje i pakiety React.
Używać fontu ikon czy SVG?
W większości przypadków SVG. SVG inline lub pakiet komponentów renderuje się ostro, można stylować każdą ścieżkę, dołącza tylko używane ikony i działa z czytnikami ekranu. Fonty ikon mogą wczytywać cały font dla kilku ikon i po cichu zawodzą, gdy font zostanie zablokowany.
Jak sprawić, by ikony były dostępne?
Zdecyduj, czy ikona niesie znaczenie. Ikony dekoracyjne obok tekstu dostają aria-hidden="true". Ikona, która jest jedyną zawartością przycisku lub linku, potrzebuje tekstu alternatywnego, zwykle aria-label na przycisku lub wizualnie ukrytego tekstu w środku.
Trzy sposoby na umieszczenie ikony na stronie
Pakiety komponentów, takie jak lucide-react lub @heroicons/react, są najprostsze w projekcie React lub Vue. Każda ikona to komponent, importujesz tylko te, których używasz, a propsy ustawiają rozmiar, kolor i grubość linii.
SVG inline oznacza wklejenie kodu svg bezpośrednio do HTML. Nie wymaga pakietu ani żądania, a CSS może stylować każdą część, ale kod powtarza się wszędzie tam, gdzie pojawia się ikona.
Sprite SVG umieszcza wszystkie ikony w jednym pliku jako elementy symbol, a każde użycie odwołuje się do jednego z nich przez <use href="/icons.svg#search">. Przeglądarka zapisuje plik w cache raz, co pasuje do stron z wieloma ikonami na zwykłych stronach HTML.
Jak sprawdziliśmy licencje
Każda licencja w tabeli pochodzi z pliku LICENSE w podanej wersji pakietu, a nie z metadanych pakietu. To ważne: w npm Remix Icon nadal ma wpisane Apache 2.0, podczas gdy plik LICENSE w wersji 4.9.1 to nowsza Remix Icon License v1.0. Liczba ikon to liczba plików SVG, które pakiet zawiera we wskazanym folderze.
Licencje mogą się zmieniać między wersjami. Przed wdrożeniem otwórz plik LICENSE w wersji, którą instalujesz.
Porównanie darmowych bibliotek ikon (wersje i liczby według npm, sprawdzone 13 października 2026)
Biblioteka
Licencja
Ikony
Style
React
Vue
Lucide 1.55.0
ISC
Konturowy (regulowana grubość linii)
Heroicons 2.2.0
MIT
324 (każda w 4 stylach)
Outline 24, solid 24, mini 20, micro 16
@heroicons/react
@heroicons/vue
Phosphor 2.1.1 (core)
MIT
1,512 (każda w 6 grubościach)
Thin, light, regular, bold, fill, duotone
@phosphor-icons/react
@phosphor-icons/vue
Tabler Icons 3.49.0
MIT
5,184 konturowych, 1,054 wypełnionych
Konturowy (regulowana linia), wypełniony
@tabler/icons-react
@tabler/icons-vue
Bootstrap Icons 1.13.2
MIT
2,078 plików (wiele ma bliźniaka -fill)
Warianty konturowe i wypełnione
react-bootstrap-icons (społecznościowy)
Brak oficjalnego; użyj SVG lub fontu ikon
Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929 symboli
Outlined, rounded, sharp; osie wypełnienia, grubości i gradacji
Użyj fontu Google Fonts lub pakietów SVG
Użyj fontu Google Fonts lub pakietów SVG
Remix Icon 4.9.1
Remix Icon License v1.0
1,539 (line i fill)
Line, fill
@remixicon/react
@remixicon/vue
Font Awesome Free 7.3.1
CC BY 4.0 (ikony), SIL OFL 1.1 (fonty), MIT (kod)
2,001 solid, 273 regular, 609 brands
Solid, regular (częściowo), brands
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome
Ionicons 8.1.0
MIT
1,357 plików
Filled, outline, sharp
Web component (ion-icon)
Web component (ion-icon)
Iconoir 7.12.1
MIT
1,383 regular, 288 solid
Regular (linia), solid
@iconoir/vue
Radix Icons 1.3.2
MIT
Jeden styl, rysowany na siatce 15 × 15
@radix-ui/react-icons
Brak oficjalnego
Feather 4.29.2
MIT
Konturowy
react-feather (społecznościowy)
vue-feather-icons (społecznościowy)
Simple Icons 16.35.0
CC0 1.0 (pliki SVG)
3,466 logo marek
Jednokolorowe znaki marek
@icons-pack/react-simple-icons (społecznościowy)
Użyj SVG
ISC
Ikony przejęte z Feathera są również na licencji MIT. Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach.
Apache 2.0
Dołącz tekst licencji do kopii i zaznacz wszelkie wprowadzone zmiany.
Remix Icon License v1.0
Darmowa w produktach komercyjnych, ale nie wolno sprzedawać ikon jako paczki ikon, budować z nich konkurencyjnego zestawu ani używać żadnej jako logo. Wersje do 4.8.0 były na Apache 2.0; nowa licencja obowiązuje od 4.9.0.
CC BY 4.0 (ikony), SIL OFL 1.1 (fonty), MIT (kod)
Wymagane jest podanie autorstwa; komentarze zawarte już w pobranych plikach się liczą, więc ich nie usuwaj. Ikony Pro są płatne.
MIT
Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach.
MIT
Zachowaj informację o prawach autorskich w kopiach. Rzadko aktualizowany; z niego wyrósł Lucide.
CC0 1.0 (pliki SVG)
Pliki są w domenie publicznej, ale logo są znakami towarowymi swoich marek. Przestrzegaj wytycznych każdej marki.
Strona główna
Szukaj
Użytkownik
Ustawienia
Ulubione
Usuń
Poczta
Powiadomienia
Te same osiem ikon, sześć bibliotek
Ciemne tło
Osiem popularnych ikon w wykonaniu każdej biblioteki
Biblioteka
Ikona {concept} z biblioteki {library}
Ikony to niezmodyfikowane pliki SVG z każdego pakietu w wersji podanej w tabeli poniżej (zmieniono tylko nazwy plików), pokazane na ich własnych licencjach.
Teksty licencji:
Porównanie bibliotek
Uwagi o licencjach
Dostępne używanie ikon
We wszystkich trzech przypadkach svg jest ukryty przed czytnikami ekranu, a nazwę niesie przycisk. Jeśli ikona pojawia się obok widocznego tekstu, ukryj ikonę i pozwól mówić tekstowi.