Icônes

324 icônes Heroicons en outline et solid. Cliquez sur une icône pour copier le snippet ou le SVG brut.

Utilisation

Ajoutez l'attribut data-icon sur n'importe quel élément :

<span data-icon="heart"></span>

<!-- Avec options -->
<span data-icon="heart"
      data-icon-type="solid"
      data-icon-size="32"
      data-icon-color="#ef4444"
      data-icon-animate="no"></span>

Attributs

Attribut	Valeur	Description
`data-icon="nom"`	Nom de l'icône	Requis — nom du fichier SVG (sans extension)
`data-icon-type`	`outline` \| `solid`	Style (défaut : `outline`)
`data-icon-size`	Nombre en px	Taille (défaut : `24`)
`data-icon-color`	Couleur CSS	Couleur (défaut : `currentColor`)
`data-icon-animate`	`draw-fade` \| `draw` \| `fade-up` \| `no`	Animation SVG au scroll (défaut : aucune)

Animation

Par défaut, les icônes sont statiques. Ajoutez data-icon-animate pour activer une animation au scroll :

Valeur	Effet	Idéal pour
`draw-fade`	Dessin progressif + fondu (défaut outline)	Icônes outline
`draw`	Dessin progressif seul	Icônes outline
`fade-up`	Fondu + montée (défaut solid)	Icônes solid
`fade`	Fondu simple	Tous types
`fill`	Remplissage progressif	Icônes solid
`no`	Aucune animation	—

En plus, un léger scale(1.15) s'applique au survol du parent (<a>, <button>).

<!-- Icône statique (par défaut) -->
<span data-icon="heart"></span>

<!-- Activer l'animation au scroll -->
<span data-icon="heart" data-icon-animate="true"></span>

<!-- Animation spécifique -->
<span data-icon="heart" data-icon-animate="draw"></span>

<!-- Sans animation (explicite) -->
<span data-icon="heart" data-icon-animate="no"></span>

Inclure dans une page

<link rel="stylesheet" href="core/css/icons.css">
<script src="core/js/icons.js" defer></script>

Toutes les icônes

Problèmes courants

L'icône ne s'affiche pas : vérifiez que icons.js est chargé avec defer et que le nom de l'icône existe dans assets/icons/.
L'icône reste invisible : ne pas ajouter data-icon-animate sur de petites icônes (<24px) dans des boutons — l'animation démarre à opacity: 0 et attend le scroll.
La couleur ne change pas : l'icône hérite de currentColor via CSS. Appliquez la couleur sur le parent (color: red) ou utilisez data-icon-color.

Voir aussi