Drücke die Tasten ◄ ► für weitere Artikel  

Icon-Fonts: 12 kostenlose Schriftarten für dein Projekt

Icon-Fonts haben viele Vorteile, die Bild-Icons aus technischer Sicht nicht bieten können. Zwölf nützliche dieser Schriftarten, die kostenlos verwendet werden können, haben wir für euch zusammengestellt.

Icon-Fonts: 12 kostenlose Schriftarten für dein Projekt

Icon-Fonts sind toll, denn wie der Name schon sagt, handelt es sich hierbei um Schriftarten und nicht um Bilder, was ihnen eine ganze Reihe von Vorteilen gegenüber klassischen Icon-Implementationen verschafft. So kann man zum Beispiel ohne große Umstände die Farbe im CSS ändern, während man sonst ein Bildbearbeitungsprogramm bemühen müsste. Auch die Skalierbarkeit oder das Hinzufügen von Effekten sind bei Icon-Bildern stark limitiert.

Damit ihr gleich loslegen könnt, haben wir zwölf nützliche und kostenlose Icon-Fonts für euch zusammengestellt:

MFG Labs

MFG-Lab ist ein Icon-Set, das ursprünglich für ein internes Projekt entwickelt wurde. Das Set ist Retina Ready, wird konstant erweitert und verwendet einen eigenen Satz von Unicode-Codes um Überschneidungen mit anderen Zeichen, anderer Fonts zu vermeiden. Auf der Offiziellen Seite vom MFG Labs Icon Set erfährst du mehr.

Entypo

Entypo ist ein Set von mehr als 250 Piktogrammen als OpenType, TrueType für den Desktop-Einsatz und über @font-face nutzbare Formate. Auf der Webseite von Entypo erfährst du mehr über den unter Creative Commons Lizenz stehenden .

Ligature

Ligature ist ein kostenloser Icon-Font unter der SIL-Open-Font-Lizenz des Designers Kazuyuki Motoyama. Das Set enthält über 240 Icons und steht auf der offiziellen Webseite von Ligature zum Download zur Verfügung.

Linecons

Linecons Free ist ein Set von 48 Vektor-Icons im Outline-Stil für die Erstellung von Web- und mobilen Interfaces. Das Set steht kostenlos – auch für kommerzielle Zwecke – in verschiedenen Schrift- und Grafikformaten bei Designmodo zum Download zur Verfügung.

Elusive Icons

Der Elusive-Icons-Webfont wurde aus der Not heraus erstellt, einen nicht mit Lizenzen belasteten Font für den Einsatz in Web-Projekten zu finden. Das Resultat sind 283 kleine Piktogramme, die sich gut in fast jedes Design einfügen können. Mehr zum Font erfährst du im offiziellen GitHub Repository von Elusive Icons.

Brandico

Brandico ist ein durch Crowdsourcing entstandener Font von bekannten Logos wie verschiedenen Social Networks, Messengern und vielem mehr. Der Font steht unter der Creative-Commons-Lizenz und im GitHub Repository von Brandico zum Download zur Verfügung.

Batch

Batch besteht aus über 300 Piktogrammen im PSD-, SVG-, PNG- und Webfont-Format. Den kostenlosen Icon-Font kannst du auf der offiziellen Webseite des Batch-Icon-Fonts herunterladen.

Modern Pictograms

modern_icons_icon_font

Moden Pictogramms Pro ist eine Erweiterung des ehemals kostenlosen Icon-Font-Sets Modern Pictogramms. Der Font wurde komplett überarbeitet und um 130 zusätzliche Icons erweitert. Auf der Offiziellen Webseite von Modernpictograms ist der Font für 25 US-Dollar erhältlich.

Typicons

typicons

Typicons enthält über 300 Icons für fast jede Lebenslage. Das Set wurde vor Kurzem um 220 neue Icons ergänzt und steht kostenlos auf der offiziellen Seite zum Download zur Verfügung.

Iconic Icon Set

iconic_icon_font

Iconic ist ein kostenloser Open-Source-Icon-Font mit über 170 minimalistischen Icons, die streng nach einem eigenen Gestaltungsraster aufgebaut sind. Den Icon-Font als PNG, SVG, TTF, EOT und in anderen Formaten erhältst du auf der offiziellen Seite von Iconic.

Octicons

octicons_icon_font

Octicons ist eine Icon-Font von den Machern von GitHub. Bei der Erstellung der Schrift ging das Designer-Team unkonventionelle Wege: Statt die Icons direkt im Vektorprogramm zu entwerfen, begann das Team die Layouts in Photoshop. So konnte von vornherein sichergestellt werden, dass die Icons in den von GitHub benötigten Größen (16 und 32 Pixel) perfekt funktionieren. Selbstverständlich ist der Font im Endeffekt trotzdem vektorisiert worden, sodass er auch in anderen Größen gut funktioniert. Den fast 180-Zeichen starken Icon-Font findet ihr auf der offiziellen GitHub Seite von Octicons.

Font Awesome

font_awesome_icon_font

Font Awesome ist speziell für Bootstrap entwickelt worden. Die Schriftart besteht aus rund 360 Icons, verträgt sich gut mit Screen Reader Software, funktioniert im Internet Explorer 7 und ist kostenlos auf der Projektseite von Font Awesome verfügbar.

Weiterführende Links zum Thema „Icon Fonts“

451 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
35 Antworten
  1. von ravetracer am 20.03.2013 (10:34Uhr)

    Webfont Icons sind klasse und ich habe sie auch schon mehrmals eingesetzt.
    Danke für den Artikel.
    Ein toller Dienst ist auch die Webseite http://www.fontello.com.
    Dort sind die meisten hier aufgeführten Fonts ebenfalls verfügbar und man kann sich die gewünschten Icons aussuchen und daraus eine neue Font (inkl. CSS etc.) erstellen lassen.
    Der Vorteil ist, dass man nicht alle Fonts laden muss, Speicher und auch Ladezeiten einspart.

  2. von Bruno Jennrich via facebook am 20.03.2013 (10:43Uhr)

    und vor allem sind die so schön monochrom....

  3. von Benjamin Rau via facebook am 20.03.2013 (10:51Uhr)

    Kann mir jmd erklären warum hier Font Awesome fehlt?

  4. von Patrickkudla am 20.03.2013 (10:56Uhr)

    Ich benutze immer http://fortawesome.github.com/Font-Awesome/ die haben echt ne Menge Icons. Zudem kann auch eine eigene abgespeckte Version erstellt werden.

  5. von Fabian am 20.03.2013 (11:05Uhr)

    Schön, bei der Brandico-Font muss erstmal nach der Download-Seite von Github gegooglelt werden.

    Desweiteren finde ich auf der Webseite von "Modern Pictograms" keinen Hinweis, dass die Font kostenlos zu haben ist.

  6. von Andreas Emer via facebook am 20.03.2013 (11:12Uhr)

    (bla)

  7. von Siggi Weide via facebook am 20.03.2013 (11:17Uhr)

    das mag ich ja eh! > "we have decided to share it with everyone." danke dafür!

  8. von Axel am 20.03.2013 (11:30Uhr)

    Auch sehr gut:

    Glyphicons Free http://glyphicons.com/
    Genericons http://genericons.com/

  9. von mah1987 am 20.03.2013 (12:15Uhr)

    Ein weiterer toller Dienst ist http://icomoon.io
    Sowohl kostenfrei wie auch kostenpflichtig (http://icomoon.io/#icons)
    Man kann sich auch sein eigenes Paket aus unterschiedlichen Fonts zusammenstellen http://icomoon.io/app/

  10. von Philip24 am 20.03.2013 (12:49Uhr)

    Schöne Sammlung! Habt ihr recherchiert, ob die auch für kommerzielle Einsätze genutzt werden können? Daran habert es ja häufig bei sonstigen ICON Sammlungen...

  11. von 10 Kostenlose Icon Fonts | TYPO3 und TYP… am 20.03.2013 (13:22Uhr)

    [...] t3n hat 10 kostenlose Icon Fonts zusammen gestellt. Die Icons machen soweit einen ordentlichen Eindruck: http://t3n.de/news/10-kostenlose-icon-fonts-450651/ Manfred RutschmannIch bin ein Vollblutprogrammierer und Geschäftsführer der [...]

  12. von Marc am 22.03.2013 (13:41Uhr)

    Hi,

    habe schon öfters von Icon Fonts gehört, aber noch nie in meinen Projekten verwendet. Vielleicht sind diese kostenlosen Icon Fonts mal ein Grund solche zu benutzen.

    Vielen Dank!

  13. von Montaglinks 15.04.2013 - Pixel-Monster.d… am 15.04.2013 (15:02Uhr)

    [...] von t3n kommt der folgende Tipp mit Icon Fonts zum selbst [...]

  14. von 10 kostenlose Icon Fonts | Mehr-Onl… am 19.04.2013 (07:51Uhr)

    [...] 10 kostenlose Icon Fonts [...]

  15. von Icon-Fonts für jedermann: IcoMoon, Font… am 24.05.2013 (16:45Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  16. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (13:36Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  17. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (13:50Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  18. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (14:47Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  19. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (16:32Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  20. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (16:40Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  21. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (17:19Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  22. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (18:20Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  23. von Icon Fonts im Webdesign: 3 Anbieter im V… am 25.05.2013 (19:30Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  24. von Icon Fonts im Webdesign: 3 Anbieter im V… am 26.05.2013 (01:52Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  25. von Icon Fonts im Webdesign: 3 Anbieter im V… am 26.05.2013 (23:17Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  26. von Icon Fonts im Webdesign: 3 Anbieter im V… am 27.05.2013 (02:50Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  27. von Icon Fonts im Webdesign: 3 Anbieter im V… am 27.05.2013 (03:04Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  28. von Icon Fonts im Webdesign: 3 Anbieter im V… am 27.05.2013 (03:57Uhr)

    [...] auch ohne Bildbearbeitungsprogramm anpassen und mit vielen Effekten versehen. Eine kleine Auswahl zehn kostenloser Icon-Fonts haben wir auf t3n.de schon vor einer Weile präsentiert. Im Rahmen dieses Artikels soll es jedoch [...]

  29. von pgierak am 27.05.2013 (07:55Uhr)

    Genericons ist auch noch ganz gut:
    http://genericons.com/

    Grüße
    Peter

  30. von Die 10 beliebtesten Artikel der Woche: I… am 18.08.2013 (12:00Uhr)

    […] Unser Artikel: Icon-Fonts: 12 kostenlose Schriftarten für dein Projekt […]

  31. von Pokeuser am 24.10.2013 (14:24Uhr)

    Octicons kann man kostenlos verwenden?
    Ich denke mal eher nicht, ich wüsste zumindest nicht, wo man einen Download oder eine Anleitung zum Einbinden findet.

  32. von Pokeuser am 28.10.2013 (17:27Uhr)

    Habe bezüglich der Octicons mal gesucht und gefragt, zu finden sind sie hier:
    https://github.com/github/government.github.com/tree/gh-pages/assets/fonts

    Der passende Stylesheet dazu:
    https://github.com/github/government.github.com/tree/gh-pages/assets/css

    Die Iconfont ist unter der Creative Commons Lizenz lizensiert und der Autor ist https://github.com/cameronmcefee

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Font
Google Zeitgeist 2013: Wonach wir in diesem Jahr gesucht haben
Google Zeitgeist 2013: Wonach wir in diesem Jahr gesucht haben

Google Zeitgeist 2013 bietet wie jedes Jahr einen Überblick über die am häufigsten gesuchten Begriffe. Wonach in Deutschland gesucht wurde, erfahrt ihr in unserem Artikel. » weiterlesen

Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen
Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen

Prototypo soll ein extrem einfaches Online-Tool zur Erstellung von Schriftarten werden. Zur Vollendung des Open-Source-Werkzeugs suchen die Macher derzeit nach Unterstützung auf Kickstarter. » weiterlesen

OpenType und CSS: Nützliche Snippets rund um font-feature-settings
OpenType und CSS: Nützliche Snippets rund um font-feature-settings

Mit dem relativ neuen CSS-Attribut font-feature-setting ist es möglich, die Möglichkeiten von OpenType-Schriftarten auszureizen. Ihr wollt Ligaturen, Brüche oder sogenannte „Swashes“ mit... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen