Die 6 besten Webseiten für kostenlose Icons und Tipps wie du sie am besten verwenden kannst

Jedes Projekt braucht Icons. Ist es, um etwas auf einer Webseite zu visualisieren oder in Apps eine Menüleiste darzustellen. Icons werden als Abkürzung zur Navigation häufig verwendet. Jeder versteht sie, ohne etwas lesen zu müssen.

So wird ein Haus gerne als Hauptseite gesehen, eine Lupe als Suchoption oder ein Brief Icon für die virtuelle Inbox. Selbst ein einfacher Pfeil in einem Button Design wirkt bereits viel ansprechender auf Nutzer.

Aber welche Icons verwende ich am besten? Als Designer hat man die Qual der Wahl. Soll ich sie komplett selbst auf Illustrator designen? Sollen sie eckig sein? Oder doch lieber abgerundet? Wollen wir 3D-Icons verwenden?

Ich zeige dir meine Lieblingswebseiten für zeitlose Icons, die ihr in jedem Projekt problemlos verwenden könnt.

Die besten Webseiten für kostenlose und lizenzfreie Icons

1. Google Icons

Wahrscheinlich der Favorit bei vielen und eins der meist genutzten Icon-Libraries. Google stellt lizenzfreie Icons für die Nutzung zur Verfügung. Man kann aus 750 SVG-Icons wählen und die für kommerzielle und nicht kommerzielle Projekte verwenden. Die Icons sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

Du kannst Größe, Gewicht, Füllform einstellen und sie als SVG oder PNG herunterladen. Für die Entwickler unter euch, ihr könnt das Icon für das Web, Android oder iOS auch direkt einsetzen.

Zur License Agreement

2. Lordicon

Lordicon bietet unzählige Icons in unterschiedlichen Variationen an. Das beste an Lordicon ist, alle Icons können animiert heruntergeladen werden! Die Icons kannst du farblich in ihrem Editor anpassen und animiert als JSON, HTML, Gif, WebP, APNG oder MP4 heruntergeladen werden. Icons, perfekt für Entwickler. Aber auch statisch können die Icons als SVG oder PNG genutzt werden. Weitere Download-Optionen sind für Lottie, EPS oder After Effects zur verfügung.

Zur License Agreement

3. Iconmonstr

Iconmonstr war einer der ersten Libraries, die ich für Icons verwendet habe. Sie bietet einige standardmäßige Icons, die sehr schlicht in schwarz/weiß gehalten sind an. Alle Icons können als PNG oder SVG kostenlos heruntergeladen werden. Alle Icons können für kommerzielle und nicht kommerzielle Projekte verwendet werden. Die allermeisten Icons sind ausgefüllt oder nur mit Border verfügbar.

Zur License Agreement

4. Figma Community

Ähnlich wie bei Illustrationen findet man in der Figma Community unzählige Icon-Libraries, die ihr kostenlos verwenden könnt. Denkt aber bei Figma daran den ursprünglichen Creator bei der direkter Verwendung zu nennen. Ihr könnt diese Libraries aber auch problemlos verwenden, um sie als Inspiration für eigene Icons zu nutzen. Ich benutze sehr gerne die Nova-Library für meine Projekte. Ein modernes und rundes Icon-Set ist für mich in den meisten Projekten eine Baseline.

Zur License Agreement

5. Icons8, Flaticon und Co.

Mit unter sind Icons8 und Flaticon einer der größten Webseiten für Icons. Ich persönlich nutze sie aber sehr selten, da mir häufig die Auswahl der kostenlosen Icons nicht gefällt. Es werden viele Icons angeboten, die nicht kostenfrei sind. Das suchen nach einheitlichen und kostenlosen Icons wird da erschwert. Daher nutze ich persönlich lieber andere Platformen, die den Verkauf von Icons weniger präsent im Vordergrund stehen haben.

5 Tipps für das Verwenden von Icons

In meiner Anfangszeit als UI Designer, habe ich Icons häufig falsch verwendet. Deshalb hier ein paar Tipps, die mir geholfen haben eine bessere Designerin zu werden.

1. Nutze einheitliche Icons

Entscheide dich für einen style und behalte ihn bei. Nutzt du ein rundes Konzept, dann bleibe auch bei runden Icons. Entscheide dich zwischen, ausgefüllten Icons oder Borer-Icons. Sind Icons nicht einheitlich wirkt es schnell fehl am Platz und unruhig.

2. Nutze bekannte Icons

Nutzer lieben das Bekannte. Unbekanntes ist schwer zu etablieren. Das Icon für eine Hauptseite ist meistens ein Haus, das Icon für einen Chat sind Sprechblasen oder ein Brief. Wenn du gängige Icons nutzt dann können deine Nutzer sie auch schneller verstehen.

3. Beschrifte deine Icons

Das trifft insbesondere auf Apps zu. Die Menüleiste wird gerne nur aus Icons dargestellt, das kann aber zu Verwirrung führen. Insbesondere, wenn du dich nicht an Tipp Nummer 2 gehalten hast. Schreibe in etwas kleinerer Schrift unter oder neben dem Icon die Bedeutung hin. Ich verspreche dir, geübte Nutzer sehen diese Schrift gar nicht, aber für Neulinge hilft es enorm. Ist dir schon mal aufgefallen, dass die Menüleiste von Whatsapp eine Beschreibung hat?

4. Bringe Bewegung in deine Icons

Das ist besonders hilfreich auf Webseiten. Wenn du willst, dass sich der Fokus auf die Icons richtet dann bewege sie. Lordicon bietet kreative Möglichkeiten Icons zu verwenden, die sich bewegen.

5. Farbakzente setzen

Das ist wohlmöglich nur ein persönlichen Touch, den ich sehr gerne bei Icons nutze. Icons müssen nicht komplett einfarbig sein. Elemente des Icons, die ich besonders hervorheben möchte versehe ich mir ein bisschen Farbe. Meist einfach in der Primärfarbe. Dadurch wirkt es persönlicher und moderner.

Fazit

Ich nutze gerne Resourcen wie Lordicon, Figma Community oder Google Icons, um eigene Icons zu entwerfen. Man muss das Rad aber auch nicht neu erfinden und kann auf bestehende und funktionierende Icons zurückgreifen.