Klicke, speichere, bearbeite und gestalte deine Icons

mit Flaticon-Sammlungen

Sammlungen helfen jedem, der seine Icons ordnen und visualisieren und die Einheitlichkeit des eigenen Projekts bewahren möchte. Sie sind einfach zu verwenden und können sowohl Anfängern als auch Profis von Nutzen sein.

Mehr anzeigen
Ordnen

Speicher alle Icons, die du aus verschiedenen Packs benötigst, an einem Ort. Unterteile deine Sammlungen nach Projekten. Du kannst Icons hinzufügen, entfernen, bearbeiten und umbenennen.

Speichern

Klicke auf „Icons-Backup“ und lade eine Kopie deiner Sammlungen herunter. Teile sie mit deinen Kollegen oder verwende sie zu einem späteren Zeitpunkt selbst.

Bearbeiten

Verwende die Funktion „Farbkollektion“, um alle einfarbigen Icons in verschiedenen Farben zu bemalen und wähle den Farbton aus, der am besten passt.

Exklusive Funktionen

Du kannst deine Sammlungen nicht nur im PNG-, SVG-, EPS- oder PSD-Format, sondern auch als „Icon-Font“ oder als „SVG-Sprite“ herunterladen. Diese Funktionen werden von Webdesignern verwendet und erlauben es dir, eine Datei herunterzuladen, die alle Icons in Form eines Codes enthält. Es ist eine einfache Art, ein zugängliches Design zu erstellen, das leicht mit CSS3 bearbeitet werden kann.

Icon-Font

Sie wird von allen Browsern unterstützt und erlaubt ein einfaches Arbeiten: Du kannst die Farbe ändern oder der Icon-Font einen Schatten hinzufügen. Das funktioniert allerdings nur mit einfarbigen Icons.
Klicke auf „SVG-Sprite“, um farbige Icons zu verwenden.

<head>
…
<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css"> 
…
</head>
<i class="flaticon-airplane49"></i>
<span class="flaticon-airplane49"></span>

.flaticon-airplane

SVG Sprite

SVG Sprite ist der Icon-Font sehr ähnlich und ermöglicht es dir, die Font in Form eines Codes herunterzuladen und in deinem Web zu verwenden. Es ist auch vollständig mit CSS3 anpassbar, aber im Gegensatz zu "Icon-Font" arbeitet es mit Farbicons.

<div hidden>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"> <symbol id="blueberries" viewbox="0 0 53.308 53.308">
<title>
blueberries
</title>
<path d="M39.685,2.953c-7.524,0-13.623,6.099-13.623,13.623c0,2.243, 0.552,4.353,1.512,6.219 c1.496-0.565,3.11-0.888,4.804-0.888c5.281,0,9.851,3.011,12.111,7.404c5.15-1.944,8.819-6.905,8.819-12.735 C53.308,9.052,47.208,2.953,39.685,2.953z" style="fill:#003879;">
</path> 
…
</svg> 
</div>
<svg class="icon">
<use xlink:href="#blueberries"/>
</svg>

#blueberries

Jetzt testen

Möchtest du dein neues Projekt direkt beginnen und deine Sammlungen verwenden? Sieh dir unsere Schritt-für-Schritt-Anleitung an.

Flaticon erkunden