50 najlepszych darmowych czcionek ikon do projektowania interfejsu użytkownika

Chociaż bardzo popularne, czcionki Icon mają również swoje pułapki. Ian Feather omówił powody, dla których przełączył się z czcionki ikonowej na SVG, a sztuczki CSS nakreśliły pewne kwestie dotyczące wyboru między systemem czcionek ikonowych a SVG.

Obaj wyraźnie faworyzują SVG. Jako kontrargument, Pictonic powiedział, że czcionki ikon są o 10% szybsze niż SVG. To tylko rzeczy, które powinieneś rozważyć przed użyciem czcionek ikon.

Aby upewnić się, że Twoje ikony zawsze ładują się prawidłowo i mają niezawodne rozwiązania awaryjne dla przeglądarek, które nie obsługują @fontface , powinieneś zapoznać się z wytycznymi określonymi przez Filament Group , Bulletproof Accessible Icon Fonts.

Eva Icons Open Source UI Icon Set (480 ikon)

Jeśli projektujesz nowy interfejs lub chcesz zaprezentować funkcje swojego produktu, wypróbuj tę świetną (i bezpłatną) czcionkę ikon. Te ikony typu open source zawierają działania i elementy, od strzałek i załączników po palety kolorów. Z ponad 480 ikonami, to cały pakiet!

Modna ikona cienkiej linii (100 ikon, elementy Envato)

Nic tak nie podkreśla jakości Twojego produktu jak minimalizm, a ten zestaw ikon jest doskonałym wyborem do Twojego kolejnego projektu. Są wektorami i można je w pełni edytować w programie Adobe Illustrator. Od ikon częstotliwości po piękne ikony przełączania konturów, będziesz mieć wszystko, czego potrzebujesz!

Otwórz ikoniczny zestaw Open Source (223 ikony)

Przestań się martwić, że Twoje ikony będą współpracować z formatowaniem tekstu. Ten zestaw ikon o otwartym kodzie źródłowym zawiera ponad 230 praktycznych i technicznych ikon w różnych formatach, od SVG do WOFF. Możesz szybko dopasować je do swoich potrzeb dzięki CSS i są doskonale czytelne nawet przy 8px.

Pictypo Icon Font autorstwa Typogama (Elementy Envato)

Pictypo oferuje zabawne i wciągające ikony renderowane czcionkami dingbat. Zaokrąglony krój dodaje odrobinę życzliwości, a Ty będziesz miał mnóstwo pracy. Od ikon pogody po symbole biurowe, Pictypo oferuje wszystko, czego potrzebujesz. Linie są odważne, dzięki czemu dobrze prezentują się również na dużych wyświetlaczach.

Ionicons Icon Pack dla Ionic Framework (1100+ ikon)

Ionicons to dobrze zaokrąglony pakiet ikon dla frameworka Ionic. Otrzymasz liczne ikony aplikacji (powiadomienia, strzałki, jedzenie i inne), a także ikony z logo znanych marek (np. Pinterest). W zależności od potrzeb możesz pobrać kontury, wypełnione i/lub ostre rendery ikon jako pliki SVG i czcionki internetowe.

Zestaw ikon szkieletowych Icoframe (60 ikon, elementy Envato)

Spraw, aby Twój następny projekt był bardziej dynamiczny i wciągający dzięki Icoframe – pięknym i nowoczesnym ikonom szkieletowym. Otrzymasz 60 minimalistycznych ikon szkieletowych, od symboli stron logowania po siatki, oś czasu i ikony typografii. Projekt jest bardzo intuicyjny i można go łatwo dostosować w programie Adobe Illustrator.

Czcionka niesamowita (1500+ ikon)

Font Awesome to ogromny i bardzo popularny zestaw ikon. Oferują ponad 1600 darmowych ikon, z których wszystkie zostały skrupulatnie zaprojektowane, aby pokazać przyjazność i łatwość użytkowania. W galerii FA znajdziesz wszystko, od logo AWS i innych marek po ikony biznesu i stylu życia.

Czcionki Wirebet Wireframe (Elementy Envato)

Czcionki Wirebet to doskonały wybór, jeśli chcesz usprawnić przepływ pracy i zintegrować atrakcyjne ikony z materiałami bez uruchamiania pakietu projektowego. Otrzymasz różne ikony techniczne, od symboli stron portfolio po strzałki i ikony urządzeń. Wirebet jest idealny do szkieletów!

Niesamowita czcionka linii (1380 ikon)

Dodaj nowoczesne ikony linii do swoich materiałów w jednym wierszu kodu dzięki Line Awesome. Ulepsza ofertę Font Awesome i umożliwia dodawanie różnego rodzaju ikon (od dostępności i budynków po strzałki i ikony marek) do Twojej witryny (za pośrednictwem CDN), prototypów Figma i wielu innych.

Podstępna kolekcja czcionek (24 czcionki, elementy Envato)

Kolekcja Crafty oferuje 24 wciągające i zabawne czcionki, których możesz użyć, aby Twój następny projekt był o wiele bardziej ekscytujący. Od gwiazd i pasków po szorstkie kontury i posypki, kolekcja Crafty oferuje kombinacje czcionek, które dobrze ze sobą współgrają, dzięki czemu Twoje projekty zawsze będą wyglądać spójnie i interesująco.

Dashicons, czcionka ikony administratora WordPress (300 ikon)

Dashicons to czcionka ikon dla WordPress. Jeśli chcesz naśladować charakterystyczny styl WP w innych projektach, pokochasz to. Jest bardzo techniczny w stylu, ale ma sens i jest łatwy w użyciu. Od logo marki po TinyMCE, szalej!

Remiks Icon Open Source Library (ponad 2000 ikon)

Remix Icon to biblioteka ikon o otwartym kodzie źródłowym z ponad 2200 ikonami. Wszystkie ikony są bezpłatne zarówno do użytku osobistego, jak i komercyjnego. Zobaczysz szeroką gamę ikon, od ikon z cienkimi konturami po wypełnione symbole, które zapewniają dodatkowy nacisk. Pobierz je jako PNG, SVG lub kod.

Czcionka ikony Themify (320 ikon)

Zainspirowane Apple iOS ikony Themify oferują ponad 300 pięknych minimalistycznych ikon. Od strzałek po ikony aplikacji, otrzymasz wszystko, czego potrzebujesz, jako czcionkę ikon ułatwiającą integrację przepływu pracy (w tym SVG) lub wtyczkę do WordPress. Ikony Themify są idealne do nowoczesnego projektowania interfejsu użytkownika!

Dripicons Line-Icon Font v.2 (200 ikon)

Jeśli nie chcesz ikon linii z różnymi odmianami ogrodu, sprawdź Dripicons. Ta bezpłatna czcionka ikon jest niezwykle łatwa w użyciu, ale najlepsze jest to, że są piękne! Otrzymasz zestaw wszechstronnych, pogrubionych ikon, od strzałek i technologii po edukację i muzykę.

Ikony Octicons GitHub (180 ikon)

Jeśli podoba Ci się estetyka GitHub, pokochasz ich Octicony. Ikony te są dostępne w dwóch rozmiarach (16px i 24px), a także zawierają kilka ikon specjalnych, takich jak pull requesty. Możesz przełączać się między ikonami konturowymi i wypełnionymi, które doskonale współpracują z różnymi językami programowania.

Czcionki ikony fundacji (280 ikon)

Zacznij od kilku linijek kodu i ikon podstaw. Ta kolekcja składa się z różnych zestawów, od ikon ogólnych po ikony ułatwień dostępu, więc każdy projekt znajdzie coś dla siebie. Ikony Foundation działają jak czcionka internetowa, więc nie musisz przeskakiwać przez obręcze.

Devicons Iconic Font dla programistów (78 ikon)

Devicons to czcionka ikon stworzona specjalnie dla programistów i szerokiej gamy projektów. Czcionka zawiera 85 ikon, głównie logo marek dla usług takich jak Dropbox i platform kodowania, takich jak PostgreSQL. Devicons można zintegrować, dodając pojedynczą linię kodu do nagłówka HTML projektu.

Elegancka czcionka ikon (360 ikon)

Piękna, elegancka i wciągająca — ta czcionka ikon zawiera ponad 300 różnych ikon. Są proste w integracji i obsłudze, zwłaszcza jeśli w przeszłości korzystałeś z eleganckich motywów lub konstruktora Divi. Od ikon plików po strzałki, w tym zestawie znajdziesz wszystko, czego potrzebujesz.

Zestaw ikon otwartego źródła piór (282 ikony)

Zachowaj prostotę i dostępność dzięki Feather, ogromnej kolekcji ikon open source. Od strzałek i szewronów po ikony interfejsu aplikacji, Feather jest doskonałym dodatkiem do standardowego zestawu narzędzi projektowych. Możesz dostosować rozmiar, szerokość obrysu i kolor każdej ikony, aby idealnie pasowały do ​​Twojej marki.

Czcionka ikon typowych (336 ikon)

Proste, przyjazne i idealne do szerokiej gamy projektów, Typicony to doskonały wybór. Są osadzone w czcionce internetowej, dzięki czemu są łatwe w użyciu. Otrzymasz 336 ikon, od trybików i strzałek po logo marki. Możesz wybierać pomiędzy wypełnionymi ikonami lub konturami.

Darmowy pakiet ikon IcoMoon (490 ikon)

Odśwież swój standardowy zestaw ikon za pomocą darmowych ikon IcoMoon. Otrzymasz 490 ikon wektorowych, które są idealne dla aplikacji i interfejsu internetowego. Te ikony są proste i minimalistyczne z odrobiną osobowości. Od domowych ikon po uśmiechnięte buźki, to cały pakiet!

Genericons Nowa czcionka ikony (100 ikon)

Uprość swój projekt za pomocą Genericons, zestawu prostych i minimalistycznych ikon do projektowania stron internetowych i aplikacji. Sprawdzają się doskonale w przypadku blogów lub prostych witryn internetowych, w których chcesz skupić się na wiadomościach. Otrzymasz mnóstwo ikon kluczowych funkcji, od map witryn po kanały RSS.

Icon-Works Darmowa czcionka ikon (136 ikon)

Bezpłatna i stylowa czcionka Icon-Works to doskonały wybór, jeśli chcesz wyróżnić swój następny projekt. Otrzymasz mnóstwo pięknych, gotowych na siatkówkę ikon, które możesz dostosować. Są skalowalne, więc nie musisz się nawet martwić o zmianę ich rozmiaru.

Czcionka ikony mikronów (108 ikon)

Ikony Microns są dumne ze swojej prostoty. Kolekcja zawiera ikony dla najczęstszych przypadków użycia, od wykresów i strzałek po ikony nawigacyjne. Są łatwe do zakodowania, a sam plik ma tylko 5 KB, więc są idealne do wykorzystania w całym portfolio projektów.

Czcionka ikony obrysu 7 (202 ikony)

Prosto z warsztatu Pixeden, Stroke 7 to kolekcja cienkich ikon. Zestaw oferuje ponad 200 ikon, które można dostosować za pomocą CSS. Zostały zainspirowane ikonami początku 00, więc nie będą się wyróżniać i odciągać uwagi od głównego przesłania.

Czcionka ikony obrysu, tom 1 (80 ikon)

Petras Nargela zaprojektował zestaw 80 ikon pociągnięć i jest bezpłatny. Te piękne ikony są świeże, czyste i gotowe do urozmaicenia Twoich projektów. Możesz je pobrać jako pliki PSD, AI lub czcionki internetowe. Jeśli potrzebujesz czegoś innego, znalazłeś to!

Material Design Iconic Font

Stworzony przez Google zestaw ikon Material Design zawiera wiele ikon, których możesz używać w swoich projektach. Wystarczy dodać jedną linijkę kodu do swojej witryny i gotowe! Ponieważ członkowie społeczności stale dodają własne ikony, istnieje duża różnorodność.

Podstawowe ikony z minimalnym zarysem (77 ikon)

Jeśli Twój interfejs użytkownika jest minimalistyczny, wybierz ikony, które mają te same wskazówki estetyczne. Ten minimalny zestaw ikon konturu zawiera ponad 70 czystych i ostrych ikon. Wektory są skalowalne i możesz łatwo zmieniać kolory ikon, aby dopasować je do swojego stylu. Możesz je pobrać bezpłatnie w różnych formatach.

Tonikony Zarys Ikony (300 ikon)

Tonicons to fantastyczny zestaw czcionek ikon, które są nie tylko łatwe w użyciu, ale także piękne! Otrzymasz 300 czystych i minimalistycznych ikon konturów do projektowania aplikacji i interfejsu internetowego. Od wszelkiego rodzaju plików po ikony wiadomości, zestaw Tonicons obejmuje każdy przypadek użycia.

Metrize ikony w stylu Metro (300 ikon)

Ikony Metrize to 300 ikon w stylu metra, które zwiększą Twój następny projekt. Możesz ich używać w aplikacjach i witrynach internetowych, a wszystko to jest bardzo łatwe, ponieważ są one również dostępne jako czcionka internetowa. Od logo marki po strzałki, Metrize zapewni Ci ochronę!

Czcionka CSSans Pro CSS

CSSans to kolorowa i dynamiczna czcionka CSS. Składający się z wielu kolorowych elementów geometrycznych, które dodają energii Twoim projektom, CSSans skupia się na osobowości! Otrzymasz unikalne wielkie i małe litery, cyfry i inne symbole. Jest nieskończenie konfigurowalny i przyciąga uwagę od samego początku!

Zestaw ikon MFG Labs (120 ikon)

Zestaw ikon MFG Labs został pierwotnie zaprojektowany do wewnętrznego projektu, ale zespół nie mógł się oprzeć udostępnieniu tego wszechstronnego zestawu ikon. Można je łatwo osadzać i dostosowywać za pomocą CSS. Znajdziesz wszystkie ikony, których potrzebujesz, aby stworzyć odpowiednią atmosferę do następnego projektu.

Czcionka ikony symboli ligatur (240 ikon)

Ligature Symbols to czcionka ikon z zabawnymi i minimalistycznymi ikonami. Poszczególne ikony można łączyć, aby tworzyć ligatury (np. łączyć ikony tabeli i komórki, aby tworzyć siatki), poprawiając użyteczność tej kolekcji. Znajdziesz wszystko, czego potrzebujesz, więc wypróbuj tę bezpłatną czcionkę ikon!

Czcionka ikony programowania i rozwoju Devicon 2.0 (78 ikon)

Devicons to przyjazne, przyjazne dla deweloperów ikony stworzone do reprezentowania narzędzi programistycznych i programistycznych. Od Chrome i Confluence po Django i Adobe Illustrator — znajdziesz ikonę, której szukałeś. Możesz je łatwo kopiować i wklejać do swoich projektów, używając wersji czcionek lub wersji SVG.

Zestaw czcionek mini ikon (80 ikon)

Proste i czyste, te mini ikony są idealne do szerokiej gamy projektów, szczególnie tych o bardziej formalnym tonie. Ta kolekcja ikon zawiera 80 precyzyjnie wykonanych ikon w formatach PSD i ikon. Od symboli pobierania/przesyłania po ikony lokalizacji i pogody, ten zestaw oferuje każdą potrzebną ikonę!

Zestaw ikon helu i czcionka (100 ikon)

Zestaw ikon Helium Tarasa Shypki oferuje mnóstwo ikon. Nie tylko są dostępne w każdym możliwym formacie, ale można ich również używać jako czcionki ikon. Otrzymasz 112 ikon z drobnymi cieniowanymi liniami, które dodają blasku. Hel to zdecydowanie wybór estety!

Ikony linii Gonzocons 2.0 (100 ikon)

Zestaw Gonzocons zaprojektowany przez Jana Rajtorala oferuje 100 ikon linii, które doskonale odwzorowują współczesne trendy w projektowaniu ikon. Od prostych strzał po pływające serca i klepsydry, ikony Gonzoconów z pewnością mają osobowość. Możesz je pobrać jako pliki SVG lub jako czcionkę internetową, aby ułatwić integrację z Twoją aplikacją/witryną.

Czcionka znacznika ikony mapy (180 ikon)

Map Icons to czcionka ikon stworzona dla Map Google i Miejsc. Możesz łatwo dostosować ikony za pomocą CSS i wybierać spośród ponad 175 ikon. Od ogólnych ikon dla salonów fryzjerskich po ikony działań, ten zestaw daje Ci wiele do wyboru, aby Twój następny projekt był niesamowity.

Przedstawione ikony Czcionka internetowa (150 ikon)

Ten prosty i zabawny zestaw oferuje 150 zarysowanych ikon. Możesz je pobrać jako pliki czcionek PSD, AI, SVG lub internetowych. Ikony Dario Ferrando są inspirowane współczesnym projektowaniem ikon internetowych, ale mają wiele osobowości, dzięki którym Twój następny projekt będzie się wyróżniał i zachwycił publiczność.

Ikony nieskończoności przestrzeni (230 ikon)

Strzelaj do księżyca dzięki tym pięknym kosmicznym ikonom. Dostaniesz ponad 230 symboli, w tym statki kosmiczne, planety i nie tylko! Są bardzo łatwe w użyciu, ponieważ są czcionką dingbat, a jeśli zaczniesz wpisywać liczby, znajdziesz cały Układ Słoneczny.

Czcionka ikony o tematyce pogodowej (222 ikony)

Jeśli dokładne prognozy są niezbędne dla Twojego następnego projektu, pokochasz ten zestaw ikon o tematyce pogodowej. Dzięki ponad 200 ikonom (w tym ikonom specjalności, takim jak 28 faz księżyca), będziesz gotowy do stworzenia czegoś niesamowitego! Możesz je łatwo dostosować za pomocą CSS do swoich potrzeb.

Czcionka ikony pogody Meteocons (40 ikon)

Uzyskaj ponad 40 minimalistycznych i przyjaznych ikon pogody dzięki Meteocons. Ten zestaw oferuje każdy format, jaki można sobie wyobrazić, od SVG po czcionki komputerowe i internetowe. Można z nich korzystać osobiście i komercyjnie, a nawet możesz utworzyć niestandardową czcionkę z często używanymi ikonami. Aktualizacje ikon są również bezpłatne!

Czcionka ikony społecznościowej Stackicons (75 ikon)

Dodaj więcej kolorów do swoich projektów dzięki Stackicons, kolekcji ponad 60 zaktualizowanych ikon z logo marki, od Dribbble po Reddit. Dodadzą więcej osobowości Twojemu standardowemu zestawowi do projektowania. Możesz wybrać zwykłe ikony, różne zaokrąglone wariacje lub kwadratowe ikony, a każdy znajdzie coś dla siebie!

Socialicious Social Media Icon Library (74 ikony)

Jeśli szukasz niesamowitych ikon społecznościowych, sprawdź Socialicious. Udostępnia ikony mediów społecznościowych w postaci czcionek, dzięki czemu są niezwykle łatwe w użyciu i jeszcze łatwiejsze do dostosowania. Zintegruj je za pomocą jednej linii kodu i dostosuj za pomocą CSS.

Czcionka ikon społecznościowych mono (100 ikon)

Wciągające i dynamiczne Mono Social to ikony mediów społecznościowych o zabawnej osobowości. Możesz z nich korzystać za darmo i wybrać jedną z trzech opcji prezentacji (zaokrąglona, ​​okrągła, zwykła), aby dopasować ją do swojego stylu. Używaj ich z CSS, HTML i SCSS. Są bezpłatne do użytku osobistego i komercyjnego.

Pakiet ikon mediów społecznościowych Fontfabric (74 ikony)

Stworzony przez Jelio Dimitrov, Socialico to pakiet 74 żywych i angażujących ikon mediów społecznościowych. Są one spakowane jako czcionka internetowa, więc każdy znak na klawiaturze generuje piękną ikonę z dużą ilością wariantów prezentacji. Ponieważ te ikony czcionek są bezpłatne, dodaj je do swojego przybornika!