Icônes cloche gratuites (SVG)

48 icônes cloche gratuites issues de jeux open source : cliquez sur une icône pour modifier sa taille, sa couleur et son trait, puis copiez-la en SVG, JSX, URI de données ou CSS.

Mis à jour le

Utiliser les icônes cloche

Une cloche ouvre les notifications, souvent accompagnée d'un point ou d'un compteur pour signaler les éléments non lus.

Toutes les icônes ici suivent currentColor : elles prennent donc la couleur de texte de l'élément dans lequel elles se trouvent. Un seul SVG fonctionne ainsi sur fonds clairs et sombres, dans les liens comme dans les boutons. Définissez explicitement width et height (ou dimensionnez-les en CSS avec 1em) pour que la mise en page ne se décale pas pendant le chargement de la page.

Icônes accessibles

Si l'icône est décorative ou placée à côté d'un texte visible, ajoutez aria-hidden="true". Si elle est le seul contenu d'un bouton ou d'un lien, donnez à cet élément un aria-label tel que « Cloche ».

Licences

Ces icônes cloche proviennent de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir et Material Design Icons. Il s'agit de jeux open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage personnel et commercial. Besoin d'autre chose ? Recherchez parmi les 70,000+ icônes dans le SVG Icon Finder.

Questions fréquentes

Ces icônes cloche sont-elles gratuites pour un usage commercial ?
Oui. Elles proviennent de jeux d'icônes open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l'usage commercial. Conservez la mention de licence si vous redistribuez les fichiers d'icônes eux-mêmes.
Comment changer la couleur d'une icône cloche ?
Les SVG utilisent currentColor : définissez donc la couleur CSS de l'élément parent. Vous pouvez aussi ouvrir l'icône dans le moteur de recherche et choisir une couleur fixe avant de la copier.
Puis-je utiliser ces icônes dans Webflow ou React ?
Oui. Ouvrez une icône et utilisez Copy to Webflow (colle un Code Embed) ou Copy JSX pour un composant React.