500.000+ Open-licensed SVG Vector and Icons
Search, explore and edit the best-fitting free icons or vectors for your projects using a wide variety vector library. Download free SVG vectors and icons for commercial use.
Etape 4 : Remote SVG Symbol§
Notre nouvelle solution devrait donc ajouter les contraintes suivantes :
qui évite des tonnes de requêtes
qui ne passe pas par une font pour des questions de poids et d’accessibilité
qui soit facile à changer lors d’une interaction
- qui puisse être téléchargé à la demande (ex : à l’ouverture d’une modale)
- qui puisse être mis en cache entre chaque page
Pour régler ces nouvelles contraintes, la solution est de faire en sorte que les icones soient récupérés de manière externe. En effet, si nous reprenons la manière dont on a écrit le SVG à l’endroit où on veut afficher l’icone, nous avions une balise use:
<use href="#icon-home"></use>
Celle-ci passe par un attribut href parce qu’en réalité on n’est pas obligé de définir une ancre dans la page courante. On peut aller chercher la définition SVG à une autre URL.
Ainsi plutôt que de mettre votre SVG qui contient la liste de <defs> au sein de la page, nous allons l’enregistrer dans son propre fichier:
<!-- /images/icon-defs.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<defs>...</defs>
</svg>
A ce moment là, nous pourrons changer notre balise use afin qu’elle utilise la nouvelle URL:
-<use href="#icon-home"></use>
+<use href="/images/icon-defs.svg#icon-home"></use>
Grâce à cela, la liste d’icone se retrouve en dehors de la page HTML et pourra donc être téléchargé et mis en cache au même titre que n’importe quel asset externe.
⚠️ Attention toutefois, il y a une contrainte forte : votre SVG distant doit impérativement être hébergé sur le même nom de domaine. Si ce n’est pas le cas, les navigateurs vont considérer que c’est une faille de sécurité et votre icone ne marchera pas.
Beaucoup d'icones téléchargeables au format SVG
Des icônes fil de fer libres de droit
Des icones vectorielles libres de droit
Plus de 100000 icônes libres de droit
Vous avez besoin d'une icône pour illustrer un texte, un document ? Ce site en a des milliers !
Des icônes de marqueurs de carte à gogo !
Comment gérer correctement les icones SVG dans un site web.
Des arguments pour ne pas utiliser les polices d'icones (en particulier, l'accessibilité)
Le générateur ultime de favicon
Un menu pour le multilinguisme intéressant ! Avec une icone pour présenter le multilinguisme magnifique !
Des icones libres de droits.
Personne - ou presque - ne lit les politiques de confidentialité. Pour simplifier les choses et rendre compréhensible ce que fait chaque site avec vos données, designers, citoyens et experts soutenus par la fondation Mozilla ont mis en place une liste d'icônes. Tour d'horizon de l'initiative.
Par exemple, les autistes comprennent difficilement le langage imagé. Donc si vous dîtes à un autiste que vous allez "manger un buffet froid", il comprendra plutôt que vous allez manger le meuble de votre grand-mère sans le réchauffer. Et ça, ça pose évidemment des problèmes dans la vie quotidienne, notamment face à des pictos.
Un police de caractère pour le web contenant uniquement des symboles visuels.
Apparemment une bonne idée, mais quid de l'accessibilité
350 icones en teintes de gris.
Pour trouver facilement des icones 16×16
SPIP 3 embarquera un nouveau jeu d’icônes. Utilisateur de ce CMS (système de gestion de contenus web) depuis plus de 5 ans, il était temps de contribuer à ce logiciel libre. Suite à une discussion à Paris Web 2010 et aux encouragements de Romy Duhem-Verdière et Jacques Pyrat, je me suis lancé dans l’aventure.