Generator ikon SVG i PNG

Wybierz ikonę, dopasuj kolory i rozmiar, a potem pobierz ją za darmo w SVG albo PNG.

Tło podglądu
Animacja
0 ikon
Wybierz ikonę

Jak korzystać z generatora ikon

Generator ikon to darmowe narzędzie online, w którym znajdziesz, dopasujesz i pobierzesz ikony gotowe do użycia na stronach, w aplikacjach, prezentacjach i projektach graficznych. Bez rejestracji i bez instalowania — wszystko działa w przeglądarce.

Wyszukiwanie i wybór ikon

Wpisz hasło w wyszukiwarkę albo przejrzyj kategorie w panelu po lewej, aby trafić na właściwą ikonę. Biblioteka liczy setki symboli pogrupowanych tematycznie, więc łatwo znajdziesz elementy do interfejsów, mediów społecznościowych, technologii, biznesu i wielu innych zastosowań. Kliknięcie ikony od razu pokazuje ją w panelu ustawień.

Dopasowywanie ikony

Po wybraniu ikony możesz dopasować kolor główny oraz kolor dodatkowy do identyfikacji wizualnej swojego projektu. Ustawisz też rozmiar w pikselach i grubość kreski, dzięki czemu ikona wpasuje się w układ strony — zarówno w minimalistyczny interfejs, jak i w projekt o mocniejszym charakterze.

Pobieranie albo kopiowanie ikony

Gdy ikona jest już dopracowana, masz trzy sposoby eksportu:

Dzięki temu generator obsługuje zarówno programistów wstawiających ikony wprost do kodu, jak i projektantów, którzy potrzebują gotowych plików do Figmy, Canvy czy PowerPointa.

Najczęstsze pytania

Czy ikony można wykorzystywać komercyjnie za darmo?
Tak. Wszystkie ikony w tym narzędziu są do swobodnego użytku, również w projektach komercyjnych. Nie trzeba podawać żadnego źródła.
Czym różni się pobranie w SVG od PNG?
SVG to format wektorowy, który skaluje się do dowolnego rozmiaru bez straty jakości — najlepszy do stron i aplikacji. PNG to grafika rastrowa o stałym rozmiarze, wygodniejsza w dokumentach, prezentacjach i tam, gdzie SVG nie jest obsługiwany.
Czy mogę używać ikon bezpośrednio w kodzie HTML?
Tak. Przyciskiem „Kopiuj kod SVG” skopiujesz źródło ikony i wkleisz je wprost do HTML. Dzięki temu ostylujesz ikonę w CSS i obsłużysz ją w JavaScripcie.
Czym jest kolor dodatkowy?
Część ikon składa się z dwóch warstw albo osobnych elementów. Kolor dodatkowy trafia właśnie na nie — wewnętrzne tło, cienie czy drobne detale. W ikonach rysowanych samą kreską używany jest wyłącznie kolor główny.
Skorzystaj z kolejnego narzędzia
Powiązane artykuły
Zobacz wszystkie artykuły →