Cliquez, sauvegardez, modifiez et stylisez vos icônes

avec les Collections Flaticon

Les collections sont utiles à tous ceux qui veulent organiser leurs icônes, les visualiser et maintenir la cohérence de leur projet. Elles sont simples à utiliser et peuvent être utiles aussi bien aux débutants qu'aux professionnels.

Voir plus
Organisez

Stockez les icônes dont vous avez besoin des différents packs au même endroit. Séparez vos collections par projets, ajoutez, supprimez, modifiez et renommez les icônes.

Sauvegardez

Cliquez sur " sauvegarde des icônes " et téléchargez une copie de votre collection. Partagez-la avec vos collaborateurs ou utilisez-la vous-même plus tard.

Modifiez

Pour peindre toutes les icônes monochromes dans des couleurs différentes, utilisez la fonction "Collection à peindre" et choisissez le ton qui convient le mieux.

Fonctionnalités exclusives

En dehors des formats PNG, SVG, EPS et PSD, vous pouvez télécharger votre collection en tant qu' "Icon font" ou "Sprite SVG" . Ces fonctionnalités sont utilisées par les web designers et vous permettent de télécharger un fichier qui contient toutes les icônes sous forme de code. C'est une façon simple de travailler pour un design réactif et facile à utiliser avec CSS3.

Icon font

Il est pris en charge par tous les navigateurs et facile à utiliser : vous pouvez changer la couleur ou ajouter une ombre à la forme d'une icon font. Toutefois, cette fonction ne fonctionne qu'avec des icônes monochromes.
Pour utiliser des icônes en couleur sur votre site web, cliquez sur Sprite SVG.

<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

Sprite SVG

Très similaire à Icon font, le Sprite SVG vous permet de télécharger la police sous forme de code et de l'utiliser sur votre site web. Il est également entièrement personnalisable avec CSS3, mais contrairement à "Icon font", il fonctionne avec des icônes de couleur.

<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

Essayez dès maintenant

Vous avez envie de démarrer votre nouveau projet et d'utiliser les collections dès maintenant ? Consultez notre guide étape par étape.

Explorer Flaticon