DÉMARRAGE RAPIDE

Un peu de mouvement. Trois étapes simples.

01 / Trouvez votre icône

Explorer la collection. Recherchez par nom ou mot-clé, puis filtrez par catégorie, source ou mouvement. Vous pouvez arrêter les aperçus à tout moment.

02 / Personnalisez-la

Ouvrez une icône pour modifier sa couleur, sa taille, l’épaisseur du trait, la durée, le délai, la courbe de vitesse, les répétitions, le sens et l’intensité du mouvement. Utilisez Lire, Pause, Recommencer ou le curseur pour examiner le résultat. Vos derniers réglages restent dans ce navigateur. Un lien partagé contient vos réglages sans nécessiter de compte.

03 / Emportez-la

Copiez le SVG pour coller le code dans votre HTML, ou téléchargez le .svg pour obtenir un fichier autonome. Il inclut les styles d’animation et ne nécessite ni JavaScript, ni bibliothèque, ni ressource externe.

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

Pour une image décorative à côté d’un texte, utilisez un alt="" vide. Pour un SVG décoratif intégré au HTML, supprimez role et aria-labelledby et ajoutez aria-hidden="true".

Animer avec soin

Chaque export respecte prefers-reduced-motion. L’éditeur démarre en pause si votre système demande moins de mouvement ; appuyez sur Lire pour examiner l’animation. Utilisez une seule répétition pour confirmer une action et des boucles limitées pour attirer l’attention.

Intégrer plusieurs copies au HTML

Chaque combinaison d’icône et de réglages possède des styles dédiés. Si vous collez plusieurs fois le même export dans un document, attribuez des identifiants uniques à chaque SVG et à son titre, puis adaptez les sélecteurs CSS et aria-labelledby. Les éléments image isolent automatiquement chaque fichier.

La liberté de créer

Les 50 icônes indiquent leur source et leur licence. Consultez la collection source pour connaître le créateur et les conditions d’utilisation. Les SVG téléchargés contiennent les mêmes informations. Sources · Licences