Hilfe Registrieren

Icons - die Ikonen für den perfekten Web-Auftritt


Icons - wozu eigentlich Icons? Sie sind die heimlichen Ikonen und das Salz in der Suppe für euren perfekten Web-Auftritt! Icons sind kleine und meist symbolische Bilder und dienen als optische Wegweiser. Sie führen die Besucher eurer Webseite zu den gewünschten Inhalten und helfen so grundlegend bei der Orientierung. In diesem Blog-Beitrag verraten wir euch, wo ihr die besten kostenlosen Icons im Netz findet, diese bearbeitet und an der richtigen Stelle platziert.

Warum sind Icons so wichtig für eure Webseite?

Die drei großen Vorteile von Icons:

  1. Sie sind schnell zu erkennen. Der Besucher kann auf einen Blick den Inhalt erfassen und muss nicht lange suchen. Ein simples Symbol führt den Nutzer schneller und einfacher zum Ziel.
  2. Icons werten das Web-Design von Seiten auf. Sie lassen eure Webseite übersichtlich, klar und strukturiert erscheinen und helfen dabei aus einer guten eine großartige Webseite zu machen. 
  3. Jeder versteht sie. Egal, welche Sprache die Besucher deiner Web-Seite sprechen, die Icons versteht jeder! 
icons

Vier Erfolgsfaktoren für Icons

Natürlich heißt das nicht, dass ihr jetzt wahllos bunte Icons auf eurer Webseite platzieren solltet – aber wenn ihr euch die vier folgenden Erfolgsfaktoren zu Herzen nehmt, dann steht dem großen Durchbruch euer Jimdo-Seite nichts mehr im Wege. 

  1. Farbe: Wählt am besten eine markante Farbe. Wenn ihr eine spezielle Farbe in eurem Logo verwendet, ist eine gute Idee, diese Farbe auch für Icons zu nutzen. Die richtige Farbauswahl kann ein mächtiges Werkzeug sein, sie geben deiner Webseite einen einzigartigen Charakter und macht sie schön übersichtlich.
  2. Größe: Die gewählten Icons sollten nicht zu klein sein, dass man sie mit der Lupe suchen muss, aber auch nicht zu groß, dass sie alle andere Inhalte in den Hintergrund drängen.
  3. Platzierung: Um die Icons optimal zu platzieren, wählt das Spalten-Element, es garantiert, dass ihr ein einheitliches Layout erhaltet. Es hat sich bewährt die Icons links oder auch über dem Textbaustein zu platzieren.
  4. Konsistenz: Wählt Symbole, die alle eine ähnliche Optik aufweisen. Je weniger ihr unterschiedliche Stile verwendet, desto besser für Übersichtlichkeit und Dynamik der Webseite

Hier auf dieser Beispielseite seht ihr ein einheitliches Design, die Icons ergänzen den Text und bieten eine gute Orientierung auf der Seite.

icons
Tipp: Wenn möglich, greift am besten immer auf die bewährten Icon-Klassiker zurück. Wenn ihr zum Beispiel ein Icon für “Kontakt” sucht, ist es sinnvoll den “Briefumschlag” auszuwählen. Oder wenn ihr die Besucher eurer Webseite wieder zurück zu eurer "Homepage" leiten möchtet, ist das "Haus-Symbol" sicher eine gute Wahl. Ein Icon soll den Inhalt eurer Texte nicht ersetzen, aber er kann ihn super ergänzen und dem Besucher helfen, die Inhalte leichter zu finden und einzuordnen.

Unsere besten Tipps für kostenlose Icons

Es gibt wahnsinnig viele Icon-Bibliotheken im Netz. Und damit ihr nicht stundenlang selbst recherchieren müsst, haben wir euch unsere Lieblings-Quellen für Icons aufgelistet.

Wichtig: Ihr könnt die Icons in verschiedenen Datei-Formaten herunterladen, wir empfehlen euch für Icons immer das PNG-Format auszuwählen, da dieses Icons in bester Qualität darstellt und es schnelle Ladezeiten auf eurer Webseite garantiert. Trotz unserer sorgfältig geprüften Tipps: Lest euch immer gut die Lizenzbedingungen des jeweiligen Anbieters durch, bevor ihr die Icons verwendet! Denn diese Bedingungen können sich von Zeit zu Zeit auch mal ändern.

Iconmonstr

Iconmonstr hat 3000 verschiedene Icons zur Auswahl.

icons iconmonstr

Die Vorteile:

  • Ihr könnt die Farbe und Größe ganz simpel anpassen
  • Die Icons sind über vorgegebene Kategorien einfach finden

Die Nachteile:

  • Beim Herunterladen werden die Informationen zur Farbe und Größe eurer Icons nicht gespeichert, ihr müsst euch also den Farben-Code sowie die Größe separat notieren, damit ihr die Icons beim nächsten Mal wieder in derselben Farbe und Größe erstellen könnt.

Flaticon.com

Flaticon.com bietet einen großartigen Marktplatz für diverse kostenlose Icons an.

icons flaticon

Die Vorteile:

  • Ihr könnt eure Icons über Kategorien leicht finden
  • Ihr könnt dort direkt auf der Seite, die ausgewählten Icons abspeichern. Das ist sehr hilfreich, während des Auswahlprozesses am Anfang. Man kann eine eigene Bibliothek mit seinen Favoriten erstellen und braucht bereits ausgewählte Icons nicht wieder aufs Neue zu suchen.  

Die Nachteile:

  • Flaticon.com ist zwar kostenlos, es gibt aber eine Einschränkung: Die Verwendung der Icons von Flaticon.com müssen auf der Webseite gekennzeichnet werden. Wer seine Website frei von solchen Attributen möchte, kann ein monatliches Paket erwerben.
  • Alle Symbole sind schwarz, um die Farbe zu verändern muss man im Anschluss selbst mit Photoshop oder einem anderen Grafikprogramm Farbanpassungen vornehmen.

Flaticons.net 

Flaticons.net ist eine sehr gute Quelle, um tolle Icons zu finden und individuell anzupassen.

Die Vorteile:

  • Größe und Farbe individuell anpassbar
  • Es gibt die Möglichkeit, das Icon zweifarbig zu gestalten, einmal die Farbe des Icons sowie eine Hintergrundfarbe
  • Man kann die Icons innerhalb von Kategorien heraussuchen

Die Nachteile:

  • Wie auch bei iconmonstr könnt ihr ausgewählte und von euch angepasste Icons nach dem Herunterladen auf der Plattform für spätere Zwecke nicht speichern.

Ihr möchtet lieber etwas mehr Einzigartigkeit? Dann könnt ihr auch mal auf Webseiten wie freepik.com oder Behance unter dem Suchbegriff “free vector icons” suchen. Viele Künstler und Web-Designer bieten dort eigene Icons zur freien Verwendung an. 

Auch hier gilt: Vorher immer die Lizenzbedingungen sorgfältig prüfen!  

Icons auf eurer Webseite richtig platzieren

Lieblings-Icons gefunden und im PNG-Format heruntergeladen? Perfekt. Der nächste Schritt: Überlegt euch, wo ihr die Icons auf eurer Jimdo-Webseite platzieren möchtet.

Tipp: Wählt das Spalten-Element und ladet die Icons nebeneinander in den Spalten als Bilder hoch. Anschließend könnt ihr die Größe und Position des Icons noch einmal anpassen. Als nächstes erhalten die Icons noch den entprechenden Link zur gewünschten Zielseite.

Wem das zu wenig ist, der kann in den Spalten unterhalb der Icons noch einen kurzen Beschreibungstext hinzufügen (wie ihr auch in unserem kleinen Beispiel-Bild sehen könnt). Damit kann sich garantiert kein Besucher mehr auf eurer Seite verirren.

icons
Im Beispiel haben wir das neue Icon als Bild hochgeladen und anschließend noch richtig verlinkt. Fertig!

Unser Fazit: Mit den vorgestellten Icons könnt ihr das Design und die Lesbarkeit eurer Jimdo-Website maßgeblich verbessern. Die Lesbarkeit ist einer der wichtigsten Faktoren, um Besuchern ein optimales Webseiten-Erlebnis zu bieten. Dann kommen sie auch gerne wieder – und viele Besucher wirken sich positiv auf das Ranking eurer Webseite bei Google & Co. aus. In diesem Sinne – wir wünschen euch viel Spaß und Erfolg beim Ausprobieren!  


henriette webredakteurin

Henriette Lüth 

Web-Redakteurin bei Jimdo

Ähnliche Artikel:

de.jimdo.com Blog Feed

Das neue Menü von Jimdo: klar, einfach, schnell
>> mehr lesen

Findet mit den richtigen Farben die perfekte Design-Sprache für eure Webseite!
>> mehr lesen

Erreicht eure Webseiten-Ziele schneller mit diesen 3 Webdesign-Prinzipien!
>> mehr lesen

Unsere Lieblings-Seiten im Design "Malaga"
>> mehr lesen


Kommentar schreiben

Kommentare: 38
  • #1

    christine (Dienstag, 22 September 2015 12:00)

    yay - danke!

  • #2

    Françoise (Dienstag, 22 September 2015 12:08)

    Super, vielen Dank für die tollen Infos.

    Liebe Grüße und weiter so!
    Eure Françoise von manufra - feines aus filz

  • #3

    jayouts.tv - JIMDO Profi Tutorials (Dienstag, 22 September 2015 12:58)

    Vielen Dank! Wie immer sehr hilfreich!

  • #4

    Andreas (Dienstag, 22 September 2015 14:12)

    Super Idee mit den Icons. Hier bei Jimdo lernt man immer viel neues dazu!! Super + ein dickes Dankeschön!

  • #5

    Dan (Dienstag, 22 September 2015 15:21)

    top

  • #6

    Bauer (Dienstag, 22 September 2015 15:24)

    Das sind ja tolle Möglichkeiten und das alles kostenlos. Guter Tipp.

    Weiter so Jimdo

  • #7

    Rob (Dienstag, 22 September 2015 18:08)

    Wunderbar, da kann mal meine irgendwie selbst zusammengebastelte Icon's auf meiner Homeseite ersetzten :)

    Jimdo-App mit Horizontaler Ansicht/Bedienung wäre mal toll :)

    Gruss
    Rob

  • #8

    Thomas (Dienstag, 22 September 2015 18:11)

    Danke für den informativen Beitrag ;-)

  • #9

    HLS (Dienstag, 22 September 2015 18:55)

    Bitte mal auf wünsche von shops eingehen.. DANKE

  • #10

    Tom (Dienstag, 22 September 2015 19:32)

    Kuhl ;)

  • #11

    Helena (Dienstag, 22 September 2015 19:55)

    ... sehr informativ, hilfreich, einfach gut ...Danke

  • #12

    MICHAEL ABRAHAM (Dienstag, 22 September 2015 22:23)

    SUPER!

    VIELEN DANK UND VIELE GRÜSSE AUS HOLZWICKEDE.

    www.abraham-photography.com

  • #13

    Andreas Glück (Dienstag, 22 September 2015 22:53)

    DANKE :)

  • #14

    www.xterior-windschutz.de (Mittwoch, 23 September 2015 05:22)

    lange gesucht !

  • #15

    www.tansunonline.de (Mittwoch, 23 September 2015 05:24)

    Danke für die Tipps !

  • #16

    Wolf (Mittwoch, 23 September 2015 05:40)

    Danke schön für die Tipps!

  • #17

    Merli (Mittwoch, 23 September 2015 06:08)

    Wow, das sind ja mal wieder tolle Infos. Darauf habe ich gewartet. Vielen Dank und liebe Grüße Merli

  • #18

    Annette Kölln (Mittwoch, 23 September 2015 08:08)

    Super, das werde ich gleich mal ausprobieren! Hübscht meine Website bestimmt wunderbar auf. Vielen Dank für die Ico-Info!

    LG, Eure Kinderpartyexpertin
    www.kokolores-aus-der-kiste.de

  • #19

    Christian Esche (Mittwoch, 23 September 2015 09:14)

    Sehr schönes Tool, werde ich auf meiner Webseite ausprobieren.
    Danke für die Info.
    Grüße Chrsitian

  • #20

    Ulrich (Mittwoch, 23 September 2015 11:25)

    Vielen Dank für die Infos. Ich habe die Icons bereits auf unserer Webseite. Sieht toll aus.

  • #21

    Travelmaus (Mittwoch, 23 September 2015 11:57)

    ♥ DANKE ♥ ... für den tollen Denkanstoß!!! Na, da werde ich als Maus direkt mal aktiv und setzte den Gedanken mal um!

  • #22

    Daniela Schöfl (Mittwoch, 23 September 2015 14:26)

    Danke für diese prima Informationen

  • #23

    Oldie (Mittwoch, 23 September 2015 18:23)

    Schöne Sache, zur optischen Auflockerung sehr empfehlenswert.

    www.im-ohr-manufaktur.de

  • #24

    byzumen (Donnerstag, 24 September 2015 08:41)

    Habt vielen Dank für den großartigen Tipp. Schätze ich werde mir auch von den in Zukunft noch Gebrauch machen. Hab ich wieder was neues zu Erschaffen :)

  • #25

    Susi (Donnerstag, 24 September 2015 13:42)

    Frage: muss man denn auch ein copyright angeben? z.B. im unteren ICON-Bild-Rand - © copyright fotolia.com oder im Impressum, z.B. Startseite: Icon © blablabla. com ???

  • #26

    Henriette (Donnerstag, 24 September 2015 14:37)

    Liebe @Susi,

    das kann ich dir so im Einzelnen nicht genau beantworten. Wir haben dazu aber einen sehr guten Artikel zum Thema Urheberrecht, der dir sicher Aufschluss geben wird: http://de.jimdo.com/2014/10/06/urheberrecht-copyright-co-experten-interview-mit-magda-papede/

    Viel Erfolg und liebe Grüße,
    Henriette

  • #27

    David Kieffer (Donnerstag, 24 September 2015 17:10)

    Super das habe ich mir schon lange gewünscht :)

  • #28

    SchreibereiGraf (Freitag, 25 September 2015 11:23)

    Danke für die Info. Eine Frage hätte ich allerdings: Wenn Icons "das Salz in der Suppe für euren perfekten Web-Auftritt" sind, warum finde ich auf den Jimdo-Seite dann keine? Kann es sein, dass es eben nicht für alle Web-Auftritte passt? Meinen zum Beispiel. Liebe Grüße, Achim

  • #29

    Gerald (Dienstag, 29 September 2015 13:15)

    Werde ich mir mal anaschauen :)

  • #30

    Andrea (Donnerstag, 01 Oktober 2015 15:04)

    Schöne Tipps, danke.
    Schade, dass ihr von Jimdo nicht selbst Icons anbietet, dann müsste man sich als zahlender Jimdo Kunde nicht auf die Suche machen und sich nicht um das Ganze Lizenzthema kümmern!

  • #31

    Michael (Donnerstag, 01 Oktober 2015 18:18)

    DANKE! Wir verwenden auf unserer Seite www.boooo.com bereits Icons. Ist es auch möglich diese als Ergänzung in die Navigation einzufügen.

  • #32

    www.highlifestyle.ch (Freitag, 02 Oktober 2015 14:33)

    wie zum teufel wurde die seite http://qdivision.jimdo.com/ gemacht ?????????????????????

  • #33

    Jimdo-Team (Montag, 12 Oktober 2015 09:15)

    @hihjlifestyle.ch: Mit Jimdo auf Grundlage des Designs "Cape Town". ;) Hier wurde, wie man sieht, noch einiges an eigenem Code gebastelt. Fragen dazu kannst du gern direkt an http://qdivision.jimdo.com/contact/ richten.

    Viele Grüße,
    Tim

  • #34

    Schöfl (Donnerstag, 15 Oktober 2015 23:53)

    Prima Idee mit den Icons, mann muss aus der Vielzahl erst mal die Wichtigsten für seine Seite finden! Puh.... ist gar nicht so einfach ????

  • #35

    Norbert (Dienstag, 20 Oktober 2015 10:10)

    Ich habe es gleich mal ausprobiert. Gefällt mir sehr gut und ist einfach zu handhaben!

  • #36

    Norbert (Mittwoch, 18 November 2015 18:59)

    Ich werde die Icons auf meiner HP einbinden

  • #37

    Sabine (Mittwoch, 03 Februar 2016 16:47)

    Yeah - was für ein Schatzkästchen :)

  • #38

    crucion (Donnerstag, 28 April 2016 16:50)

    Bei Flaticon kann man sehr wohl die Farbe ändern, allerdings nur für alle Icons in einer Collection gemeinsam.