Die 50 besten kostenlosen Icon-Fonts für UI-Design

Obwohl sehr beliebt, haben Icon-Fonts auch ihre Tücken. Ian Feather hat seine Gründe für den Wechsel von einer Symbolschrift zu SVG erörtert, und CSS-Tricks haben einige Überlegungen bei der Auswahl zwischen einem Symbolschriftsystem und SVG dargelegt. Beide sprechen sich klar für SVG aus. Als Gegenargument hat Pictonic gesagt, dass Icon-Fonts 10% schneller sind als SVG. Dies sind nur Dinge, die Sie beachten sollten, bevor Sie Symbolschriftarten verwenden.

Um sicherzustellen, dass Ihre Symbole immer ordnungsgemäß geladen werden und zuverlässige Fallbacks für Browser haben, die @fontface nicht unterstützen, sollten Sie sich die Richtlinien der Arbeitsgruppe Bulletproof Accessible Icon Fonts ansehen.

Das könnte Ihnen auch gefallen: Top 50 kostenlose Icon-Sets für Webdesigner.

Eva Icons Open Source UI Icon Set (480 Icons)

Wenn Sie eine neue Benutzeroberfläche entwerfen oder die Funktionen Ihres Produkts präsentieren möchten, schauen Sie sich diese großartige (und kostenlose) Symbolschrift an. Diese Open-Source Icons enthalten Aktionen und Elemente; von Pfeilen und Anhängen bis hin zu Farbpaletten. Mit über 480 Icons ist es das ganze Paket!

Trendy Thin Line Icon Font (100 Icons, Envato Elements)

Es gibt nichts Schöneres als Minimalismus, um die Qualität Ihres Produkts hervorzuheben, und dieses Icon-Set ist eine gute Wahl für Ihr nächstes Projekt. Sie sind Vektoren und können in Adobe Illustrator vollständig bearbeitet werden. Von Frequenzsymbolen bis hin zu schönen Umriss-Umschaltsymbolen haben Sie alles, was Sie brauchen!

Open Iconic Open-Source-Set (223 Symbole)

Machen Sie sich keine Sorgen mehr darüber, dass Ihre Symbole mit Ihrer Textformatierung funktionieren. Dieses Open-Source-Icon-Set enthält über 230 praktische und technische Icons in verschiedenen Formaten; von SVG bis WOFF. Sie können sie leicht an Ihre Bedürfnisse mit CSS anpassen und sie sind auch bei 8px perfekt lesbar.

Pictypo Icon Font von Typogama (Envato Elements)

Pictypo bietet unterhaltsame und ansprechende Symbole, die mit Dingbat-Schriftarten gerendert wurden. Der abgerundete Stil fügt einen Hauch von Freundlichkeit hinzu, und Sie werden viel zu tun haben. Von Wettersymbolen bis hin zu Bürosymbolen bietet Pictypo alles, was Sie brauchen. Die Linien sind fett, so dass sie auch auf großen Displays gut aussehen.

Ionicons Icon Pack für Ionic Framework (1.100+ Icons)

Ionicons ist ein abgerundetes Icon Pack für Ionic Framework. Sie erhalten zahlreiche App-Symbole (Benachrichtigungen, Pfeile, Lebensmittel und mehr) sowie Symbole mit Logos bekannter Marken (z. B. Pinterest). Je nach Bedarf können Sie Outline-, Filled- und / oder Sharp-Icon-Renderings als SVG- und Web-Font-Dateien herunterladen.

Icoframe Wireframe Icon Set (60 Symbole, Envato Elements)

Machen Sie Ihr nächstes Projekt dynamischer und ansprechender mit Icoframe – schönen und modernen Wireframe-Symbolen. Sie erhalten 60 minimalistische Drahtgittersymbole. von Symbolen für Anmeldeseiten bis hin zu Raster-, Zeitleisten- und Typografiesymbolen. Das Design ist sehr intuitiv und Sie können sie einfach in Adobe Illustrator anpassen.

Font Awesome (1,500+ Icons)

Font Awesome ist ein massives und sehr beliebtes Icon-Set. Sie bieten über 1.600 kostenlose Symbole, die alle sorgfältig entworfen wurden, um Freundlichkeit und Benutzerfreundlichkeit zu demonstrieren. In der FA-Galerie finden Sie alles von AWS und anderen Markenlogos bis hin zu Business- und Lifestyle-Symbolen.

Wirebet Wireframe-Schriftarten (Envato Elements)

Wirebet-Schriftarten sind eine gute Wahl, wenn Sie Ihren Workflow optimieren und ansprechende Symbole in Ihre Materialien integrieren möchten, ohne Ihre Designsuite zu booten. Sie erhalten eine Vielzahl von technischen Symbolen; von Symbolen für Portfolioseiten bis hin zu Pfeilen und Gerätesymbolen. Wirebet ist perfekt für Wireframes!

Line Awesome Icon Font (1.380 Symbole)

Fügen Sie Ihren Materialien mit Line Awesome moderne Liniensymbole in einer Codezeile hinzu. Es verbessert das Angebot von Font Awesome und ermöglicht das Hinzufügen aller Arten von Symbolen (von Barrierefreiheit und Gebäude bis hin zu Pfeilen und Markensymbolen) zu Ihrer Website (über CDN), Figma-Prototypen und vielem mehr.

Die Crafty Font Collection (24 Schriftarten, Envato Elements)

Die Crafty Collection bietet 24 ansprechende und unterhaltsame Schriftarten, mit denen Sie Ihr nächstes Design noch aufregender gestalten können. Von Sternen und Streifen bis hin zu groben Konturen und Streuseln bietet die Crafty-Kollektion Schriftkombinationen, die gut zusammenspielen, sodass Ihre Designs immer zusammenhängend und interessant aussehen.

Dashicons, die WordPress Admin Icon Font (300 Icons)

Dashicons ist eine Icon-Schriftart für WordPress. Wenn Sie den charakteristischen WP-Stil in anderen Projekten emulieren möchten, werden Sie ihn lieben. Es ist sehr technisch im Stil, aber es bringt den Punkt rüber, und es ist einfach zu bedienen. Von Markenlogos zu TinyMCE, lauf wild!

Vector Line Icon Font (130 Icons, Envato Elements)

Dieser Satz von Line Icons kommt in zwei Formaten: leicht bearbeitbare Vektoren, die Sie in Adobe Illustrator anpassen können, und eine Plug-and-Play-Web-Schriftart. Sie erhalten 130 minimalistische, dünne Symbole, mit denen Sie arbeiten können. von Messaging-Symbolen bis hin zu Kamera- und Mikrofonsymbolen, die der Microsoft Windows 10-Ästhetik ähneln.

Remix Icon Open Source Library (2,000+ Icons)

Remix Icon ist eine Open-Source-Symbolbibliothek mit über 2,200 Symbolen. Alle Symbole sind sowohl für den persönlichen als auch für den kommerziellen Gebrauch kostenlos. Sie sehen eine Vielzahl von Symbolen; von dünnen Kontursymbolen bis hin zu gefüllten Symbolen für eine zusätzliche Betonung. Holen Sie sie als PNG, SVG oder Code.

Line Icon Flat Font (26 Icons, Envato Elements)

Wenn Sie nach einem anderen Icon-Set suchen, werden Sie diese Icon-Font-Sammlung lieben! Es passt perfekt zum modernen Infografik-Design, bietet aber eine kreative Darstellung typischer Symbole, die Ihre Marke differenzieren werden. Von der Analyse bis zum Kundensupport gibt es viel zu lieben!

Themify Icon Font (320 Icons)

Inspiriert von Apple iOS bieten Themify Icons über 300 schöne und minimalistische Icons. Von Pfeilen bis zu App-Symbolen erhalten Sie alles, was Sie benötigen, entweder als Symbolschrift für eine einfachere Workflow-Integration (SVG enthalten) oder als Plugin für WordPress. Themify Icons sind perfekt für modernes UI-Design!

Dripicons Line-Icon Schriftart v.2 (200 Symbole)

Wenn Sie keine Gartensorten-Liniensymbole möchten, schauen Sie sich Dripicons an. Diese kostenlose Icon-Schriftart ist unglaublich einfach zu bedienen, aber das Beste daran ist, dass sie wunderschön sind! Sie erhalten eine Reihe vielseitiger fettgedruckter Liniensymbole. von Pfeilen und Technik bis hin zu Bildung und Musik.

GitHub’s Octicons Icons (180 Icons)

Wenn Sie GitHub’s Ästhetik mögen, werden Sie ihre Octicons lieben. Diese Symbole sind in zwei Größen (16px und 24px) erhältlich und enthalten auch einige Sonderfallsymbole wie Pull Requests. Sie können zwischen Umriss- und gefüllten Symbolen umschalten. Sie arbeiten perfekt mit verschiedenen Programmiersprachen.

Foundation Icon Fonts (280 Icons)

Los geht’s mit ein paar Zeilen Code und Foundation Icons. Diese Sammlung besteht aus verschiedenen Sets; Von allgemeinen Symbolen bis hin zu Barrierefreiheitssymbolen ist für jedes Projekt etwas dabei. Foundation-Symbole funktionieren als Webschriftart, sodass Sie nicht durch Reifen springen müssen.

Devicons Iconic Font für Entwickler (78 Icons)

Devicons ist eine Icon-Schriftart, die speziell für Entwickler und eine Vielzahl von Projekten entwickelt wurde. Die Schriftart enthält 85 Symbole, hauptsächlich Markenlogos für Dienste wie Dropbox und Codierungsplattformen wie PostgreSQL. Devicons können integriert werden, indem eine einzelne Codezeile in den HTML-Header des Projekts eingefügt wird.

Die elegante Symbolschrift (360 Symbole)

Schön, elegant und ansprechend – diese Symbolschrift enthält über 300 verschiedene Symbole. Sie sind einfach zu integrieren und zu verwenden, insbesondere wenn Sie in der Vergangenheit elegante Designs oder den Divi Builder verwendet haben. Von Dateisymbolen bis zu Pfeilen finden Sie in diesem Set alles, was Sie brauchen.

Feather Open Source Icon Set (282 Icons)

Halten Sie es einfach und zugänglich mit Feather, einer riesigen Sammlung von Open-Source-Icons. Von Pfeilen und Chevrons bis hin zu App-UI-Symbolen ist Feather eine großartige Ergänzung zu Ihrer Standard-Design-Toolbox. Sie können die Größe, Strichstärke und Farbe jedes Symbols so anpassen, dass es perfekt zu Ihrem Branding passt.

Typicons Icon Font (336 Icons)

Einfach, freundlich und perfekt für eine Vielzahl von Projekten, Typicons sind eine gute Wahl. Sie sind in eine Webschrift eingebettet, sodass sie einfach zu verwenden sind. Sie erhalten 336 Symbole; von Zahnrädern und Pfeilen bis hin zu Markenlogos. Sie können zwischen gefüllten Symbolen oder Konturen wählen.

IcoMoon’s Free Icon Pack (490 Icons)

Erfrischen Sie Ihr Standard Icon Toolkit mit IcoMoon’s free Icons. Sie erhalten 490 Vektor-Icons, die perfekt für App und Web-UI sind. Diese Symbole sind einfach und minimalistisch mit ein bisschen Persönlichkeit. Von Home-Icons zu Smiley-Gesichtern, es ist das ganze Paket!

Genericons Neue Icon Font (100 Icons)

Vereinfachen Sie Ihr Design mit Genericons, einer Reihe einfacher und minimalistischer Symbole für das Web- und App-Design. Sie eignen sich perfekt für Blogs oder einfache Websites, auf denen Sie den Fokus auf Ihre Nachrichten legen möchten. Sie erhalten viele Symbole für die wichtigsten Funktionen. von Sitemaps bis hin zu RSS-Feeds.

Icon-Works Free Icon Font (136 Icons)

Eine kostenlose und stilvolle Icon-Schriftart, Icon-Works ist eine gute Wahl, wenn Sie Ihr nächstes Design hervorheben möchten. Sie erhalten viele schöne, Retina-fähige Symbole, die Sie anpassen können. Sie sind skalierbar, sodass Sie sich nicht einmal um die Größenänderung kümmern müssen.

Microns Icon Font (108 Symbole)

Microns Icons sind stolz auf ihre Einfachheit. Die Sammlung enthält alle Symbole für die häufigsten Anwendungsfälle; von Diagrammen und Pfeilen bis hin zu Navigationssymbolen. Sie sind einfach zu kodieren und die Datei selbst ist nur 5 KB groß, sodass sie perfekt für die Verwendung in Ihrem Projektportfolio geeignet sind.

Stroke 7 Icon Font (202 Icons)

Stroke 7 stammt direkt aus dem Pixeden-Workshop und ist eine Sammlung von Thin-Line-Symbolen. Das Set bietet mehr als 200 Symbole, die mit CSS angepasst werden können. Sie wurden von den frühen 00-Symbolen inspiriert, sodass sie nicht auffallen und die Aufmerksamkeit von Ihrer Hauptbotschaft ablenken.

Schlaganfall Icon Font Vol.1 (80 Icons)

Petras Nargela entwarf eine Reihe von 80 Stroke Icons, und es ist kostenlos. Diese schönen Symbole sind frisch, sauber und bereit, Ihre Designs aufzupeppen. Sie können sie als PSD-, AI- oder Webschriftartdateien herunterladen. Wenn Sie etwas anderes brauchen, haben Sie es gefunden!

Material Design Ikonische Schriftart

Das von Google erstellte Material Design Icon Set enthält viele Symbole, die Sie in Ihren Projekten verwenden können. Sie müssen nur eine Zeile Code zu Ihrer Website hinzufügen und schon kann es losgehen! Da Community-Mitglieder ständig ihre eigenen Symbole hinzufügen, gibt es viel Abwechslung.

Minimal Outline Essential Icons (77 Icons)

Wenn Ihre Benutzeroberfläche minimalistisch ist, wählen Sie Symbole, die denselben ästhetischen Hinweisen folgen. Dieses Minimal Outline Icon Set enthält über 70 saubere und scharfe Symbole. Die Vektoren sind skalierbar und Sie können die Farben der Symbole leicht an Ihren Stil anpassen. Sie können sie kostenlos in verschiedenen Formaten herunterladen.

Tonicons Outline Icons (300 Icons)

Tonicons ist ein fantastischer Satz von Icon-Fonts, die nicht nur einfach zu bedienen, sondern auch schön sind! Sie erhalten 300 saubere und minimalistische Umrisssymbole für das App- und Web-UI-Design. Von allen Arten von Dateien bis hin zu Messaging-Symbolen deckt das Tonicons-Set jeden einzelnen Anwendungsfall ab.

Metrize Metro-Style Icons (300 Icons)

Metrize Icons bringen Sie 300 Metro-Style Icons, die Ihrem nächsten Projekt einen Schub geben wird. Sie können sie für Apps und Websites verwenden, und es ist alles sehr einfach, da sie auch als Webschriftart verfügbar sind. Von Markenlogos bis zu Pfeilen, Metrize hat Sie abgedeckt!

CSSans Pro CSS Font

CSSans ist eine farbenfrohe und dynamische CSS-Schriftart. CSSans besteht aus mehreren farbenfrohen geometrischen Elementen, die Ihren Designs Lebendigkeit verleihen, und dreht sich alles um Persönlichkeit! Sie erhalten eindeutige Groß- und Kleinbuchstaben, Ziffern und andere Symbole. Es ist unendlich anpassbar und erregt Aufmerksamkeit von Anfang an!

MFG Labs Icon Set (120 Icons)

MFG Labs Icon Set wurde ursprünglich für ein internes Projekt entwickelt, aber das Team konnte nicht widerstehen, dieses vielseitige Icon-Set zu teilen. Sie sind leicht einbettbar und anpassbar mit CSS. Hier finden Sie alle Symbole, die Sie benötigen, um die richtige Atmosphäre für Ihr nächstes Design zu schaffen.

Ligature Symbols Icon Font (240 Symbole)

Ligature Symbols ist eine Symbolschrift mit lustigen und minimalistischen Symbolen. Einzelne Symbole können kombiniert werden, um Ligaturen zu erstellen (z. B. Kombinieren Sie Tabellen- und Zellensymbole, um Raster zu erstellen), was die Benutzerfreundlichkeit dieser Sammlung verbessert. Hier finden Sie alles, was Sie brauchen, also probieren Sie diese kostenlose Icon-Schriftart aus!

Devicon 2,0 Programmierung & Entwicklung Icon Font (78 Icons)

Devicons sind freundliche, dev-freundliche icons erstellt zu vertreten programmierung und entwicklung werkzeuge. Von Chrome und Confluence bis hin zu Django und Adobe Illustrator finden Sie das Symbol, nach dem Sie gesucht haben. Sie können sie einfach kopieren und in Ihre Projekte einfügen, indem Sie entweder die Schriftversionen oder die SVG-Versionen verwenden.

Mini Icon Font Set (80 Icons)

Einfach und sauber, diese mini icons sind perfekt für eine vielzahl von projekten, vor allem diejenigen mehr formale in ton. Diese Symbolsammlung enthält 80 präzise erstellte Symbole in PSD- und Symbolschriftformaten. Von Download- / Upload-Symbolen bis hin zu Standort- und Wettersymbolen bietet dieses Set jedes Symbol, das Sie benötigen!

Helium Icon Set & Schriftart (100 Symbole)

Taras Shypkas Helium Icon Set bietet viele Symbole. Sie kommen nicht nur in jedem erdenklichen Format, sondern Sie können sie auch als Symbolschrift verwenden. Sie erhalten 112 Symbole mit fein schattierten Linien, die Glanz hinzufügen. Helium ist definitiv die Wahl eines Ästheten!

Gonzocons 2.0 Line Icons (100 Icons)

Das von Jan Rajtoral entworfene Gonzocons-Set bietet 100 Line Icons, die moderne Icon-Design-Trends perfekt nachbilden. Von simplen Pfeilen bis hin zu schwimmenden Herzen und Sanduhren haben Gonzocons-Symbole definitiv eine Persönlichkeit. Sie können sie als SVG-Dateien oder als Webschriftart erhalten, um die Integration in Ihre App / Site zu vereinfachen.

Map Icon Marker Font (180 Icons)

Map Icons ist eine Icon-Schriftart für Google Maps und Orte. Sie können die Symbole ganz einfach mit CSS anpassen und aus über 175 Symbolen auswählen. Von allgemeinen Symbolen für Friseursalons bis hin zu Symbolen für Aktivitäten bietet Ihnen dieses Set eine große Auswahl, um Ihr nächstes Projekt erstaunlich zu machen.

Skizzierte Symbole Webfont (150 Symbole)

Einfach und unterhaltsam bietet dieses Set 150 skizzierte Symbole. Sie können sie als PSD-, AI-, SVG- oder Webschriftartdateien erhalten. Die Icons von Dario Ferrando sind vom zeitgenössischen Web-Icon-Design inspiriert, aber sie haben viel Persönlichkeit, um Ihr nächstes Projekt hervorzuheben und Ihr Publikum zu begeistern.

Infinity Space Icons (230 Icons)

Schießen Sie mit diesen wunderschönen Space Icons auf den Mond. Sie erhalten über 230 Symbole, darunter Raumschiffe, Planeten und mehr! Sie sind sehr einfach zu bedienen, da sie eine Dingbat-Schriftart sind, und wenn Sie anfangen, die Zahlen einzugeben, finden Sie das gesamte Sonnensystem.

Wettersymbole & Schriftart (32 Symbole, Envato Elements)

Diese Sammlung von Symbolen ist perfekt für jede Situation, unabhängig vom Wetter. Wortspiele beiseite, dieses Wetter-Icon-Set kann auch als Schriftart für eine einfachere Verwendung heruntergeladen werden, und Sie finden 32 Symbole, die jeden Zustand darstellen. Sie erhalten auch ein vollständig bearbeitbares AI-Icon-Set.

Wetter Themed Icon Font (222 Icons)

Wenn genaue Prognosen ein Imperativ für Ihr nächstes Projekt sind, werden Sie diesen Satz von Wetter-Themen-Icons lieben. Mit über 200 Symbolen (einschließlich Spezialsymbolen wie 28 Mondphasen) sind Sie bereit, etwas Erstaunliches zu kreieren! Sie können sie ganz einfach mit CSS an Ihre Bedürfnisse anpassen.

Meteocons Wetter Icon Font (40 Icons)

Holen Sie sich mehr als 40 minimalistische und freundliche Wettersymbole mit Meteocons. Dieses Set bietet jedes erdenkliche Format; von SVG bis hin zu Desktop- und Webfonts. Sie können kostenlos persönlich und kommerziell verwendet werden, und Sie können sogar Ihre benutzerdefinierte Schriftart mit den Symbolen erstellen, die Sie häufig verwenden. Icon-Updates sind auch kostenlos!

Stackicons Social Icon Font (75 Icons)

Fügen Sie Ihren Designs mit Stackicons, einer Sammlung von über 60 aktualisierten Icons mit Markenlogos, mehr Farbe hinzu; von Dribbble bis Reddit. Sie verleihen Ihrem Standard-Design-Kit mehr Persönlichkeit. Sie können reguläre Symbole, verschiedene abgerundete Variationen oder quadratische Symbole auswählen. Es ist für jeden etwas dabei!

Socialicious Social Media Icon Library (74 Icons)

Wenn Sie auf der Suche nach unglaublichen sozialen Symbolen sind, schauen Sie sich Socialicious an. Es gibt Ihnen Social-Media-Symbole in der Schriftform, so dass sie unglaublich einfach zu bedienen und noch einfacher anzupassen sind. Integrieren Sie sie mit einer einzigen Codezeile und passen Sie sie mit CSS an.

Mono Social Icons Schriftart (100 Symbole)

Mono Social ist eine ansprechende und dynamische Social Media-Ikone mit einer lustigen Persönlichkeit. Sie können sie kostenlos verwenden und eine der 3 Präsentationsoptionen (abgerundet, Kreis, normal) auswählen, die zu Ihrem Stil passen. Verwenden Sie athem mit CSS, HTML und SCSS. Sie sind für den persönlichen und kommerziellen Gebrauch kostenlos.

Fontfabric Social Media Icons Pack (74 Icons)

Socialico wurde von Jelio Dimitrov erstellt und ist ein Paket von 74 lebendigen und ansprechenden Social Media Icons. Sie sind als Webschriftart verpackt, sodass jedes Zeichen auf Ihrer Tastatur ein schönes Symbol mit vielen Präsentationswechseln generiert. Da diese Schriftsymbole kostenlos sind, fügen Sie sie Ihrer Toolbox hinzu!