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>
.flaticon-airplane
SVG Sprite
SVG Sprite ist der Iconfont 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