Icons für deine Webseite oder App

Diese kleinen Symbole, was Icons eigentlich sind, kann man immer brauchen, oder etwa nicht? Ich komme noch aus der Anfangszeit der grafischen Betriebssysteme und das Internet war erst viel später aktiv. Ja, damals hatte man hunderte Icons auf der Festplatte und war glücklich über jedes einzelne Icon. Heute gibt es DropBox, SSDs und das Internet und das Design und das User-Interface hat sich auch verändert.
Jetzt suchen wir uns schnell mal etwas aus dem Internet oder haben eben eine kleine, aber feine Sammlung an Icons zur Verfügung. Denn so überladen mit Grafiken sind die Websites heute nicht mehr, in Zeiten von Metro- und Flatdesign.

Daher habe ich mal meinen Blog durchforstet und so geschaut, was ich euch über die Jahre an Iconsets empfohlen habe. Da sind einige verschwunden und andere verwendet man heute wirklich nicht mehr und einige neue gute Lösungen sind aufgetaucht. Darum gibt es hier wieder eine neue Zusammenfassung für Iconsets.

Schriften für Icons

Falls du es klar strukturiert und mit wenigen farblichen Akzenten magst, dann sind Schriften die richtige Lösung für dich. Du kannst eben nur einfarbige Symbole einsetzen, wie ich eben auch auf diesem Blog unter den Posts oder in der Seitenleiste. Aber der große Vorteil ist, dass die Symbole responsiv sind. Du kannst sie ohne Verlust der Qualität in jede Größe skalieren. Für diese Technik gibt es verschiedene Anbieter, aber mein eindeutiger Liebling ist Font Awesome, weil er fast alle notwendigen Symbole hat, einfach einzubauen ist und stabil läuft.

• Font Awesome
  Über 600 Symbole in vordefinierten verschiedenen Größen, welche einfach mit CSS einzubauen sind. Manchmal fehlt genau das benötigte Symbol, dafür ist aber das Design durchgängig gleich.
• Genericons
  Knapp 100 Symbole, welche über das svg-Element eingebunden werden.
• Fontello
  Eine Seite mit hunderten Symbolen, aus denen du dir einen eigenen Font zusammenstellen kannst. Zusätzlich kannst du noch eigene SVG-Grafiken einbinden. Falls du sehr flexibel sein musst, ist dies die richtige Wahl für dich. Der Nachteil ist das nicht durchgängige Design der Symbole.

“Echte” Icons

Dann gibt es da noch die echten Iconsets. Also die netten kleinen Symbole, welche in verschiedenen festen Größen vorliegen. Üblicherweise sind diese 16×16, 32×32, 64×64, 96×96, 128×128, 256×256 und 512×512 Pixel. Du siehst sie sind immer quadratisch. Aber sie kommen auch in verschiedenen Dateiformaten vor und da musst du aufpassen. Denn gif, jpg und png sind jetzt wirklich kein Problem. Die psd-Dateien kannst du mit PhotoShop oder Gimp öffnen. Aber dann gibt es noch die ico, icn und icl-Dateien. Dies sind Icon(sets) welche für bestimmte System vorgesehen sind und die kannst du meistens nur mit einem speziellen Icondesigner öffnen

• Die Weltkugel
  35 verschiedene Symbole der Erde (frei für alle Zwecke)
• eCommerce
  18 verschiedene freie Iconsets für Online-Shops und eCommerce
• Abb-Bits
  Einfache und klar gezeichnete Icons im svg-Format.
• Office Iconsets
  mehr als 20 Iconsets mit Symbolen rund um das Büro in den Standardgrößen

Suchmaschinen für Icons

Eigentlich sind fertige Iconsets gar nicht so praktisch. Besser wäre es, wenn wir so etwas wie Google für Icons hätten und auch das gibt es.

• veryicon
  Durchsucht über 500.000 Icons in verschiedenen Dateiformaten.
• Iconspedia
  Sucht nicht nur, sondern bietet die verschiedenen Icons und Iconsets bereits in Kategorien zum Stöbern und schauen an.
• Iconfinder
  Ist mit fast 2 Millionen Icons eine der größten (und auch ältesten) Suchmaschinen für unsere netten, kleinen Symbole.
• IconSeeker
  Einer der Klassiker im Web, der auch Vektorgrafiken sucht.
• Mr. Icons
  Eine kleine und feine Suchmaschine, welche auch IconSets anbietet.
• iconshock
  Über 2 Millionen professionelle Icons zum Durchsuchen oder auch in fertigen IconSets.
• iconizer
  Eine Iconsuchmaschine, aber auch ein CSS-Generator und Animationstool für Icons