devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Icônes calendrier gratuites (SVG)

48 icônes calendrier issues de bibliothèques open source : cliquez sur une icône pour modifier sa taille, sa couleur et son trait, puis copiez-la en SVG, JSX, data URI ou CSS.

Mis à jour le

calendar
Lucidecalendar
Tablercalendar
Heroiconscalendar
Phosphorcalendar
Bootstrap Iconscalendar
Iconoircalendar-12-filled
Fluent UIcalendar
Material Design Iconscalendar
Carboncalendar-1
Lucidecalendar-filled
Tablercalendar-16-solid
Heroiconscalendar-bold
Phosphorcalendar-fill
Bootstrap Iconscalendar-12-regular
Fluent UIcalendar-outline
Material Design Iconscalendar-add
Carboncalendar-x
Lucidecalendar-x
Tablercalendar-20-solid
Heroiconscalendar-duotone
Phosphorcalendar-x
Bootstrap Iconscalendar-16-filled
Fluent UIcalendar-end
Material Design Iconscalendar-cog
Lucidecalendar-up
Tablercalendar-solid
Heroiconscalendar-fill
Phosphorcalendar-x-fill
Bootstrap Iconscalendar-16-regular
Fluent UIcalendar-end-outline
Material Design Iconscalendar-off
Lucidecalendar-cog
Tablercalendar-light
Phosphorcalendar-day
Bootstrap Iconscalendar-20-filled
Fluent UIcalendar-x-2
Lucidecalendar-dot
Tablercalendar-thin
Phosphorcalendar-day-fill
Bootstrap Iconscalendar-20-regular
Fluent UIcalendar-due
Tablercalendar-x
Phosphorcalendar-24-filled
Fluent UIcalendar-off
Tablercalendar-x-bold
Phosphorcalendar-24-regular
Fluent UIcalendar-pin
Tabler

Utiliser les icônes calendrier

Les icônes calendrier signalent des dates, des réservations, des événements et des sélecteurs de date.

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 sur fonds clairs et sombres, dans les liens comme dans les boutons. Définissez un width et un height explicites (ou dimensionnez-les en CSS avec 1em) pour que la mise en page ne bouge pas pendant le chargement de la page.

Icônes accessibles

Si l’icône est décorative ou accompagnée 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 « Calendrier ».

Licences

Ces icônes calendrier proviennent de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Design Icons et Carbon. Ce sont des bibliothèques open source sous licences MIT, ISC ou Apache 2.0, qui autorisent un usage personnel comme commercial. Besoin d’autre chose ? Recherchez parmi plus de 70 000 icônes dans le SVG Icon Finder.

Questions fréquentes

Ces icônes calendrier sont-elles gratuites pour un usage commercial ?
Oui. Elles proviennent de bibliothèques 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 calendrier ?
Les SVG utilisent currentColor : définissez donc la propriété color CSS de l’élément parent, ou ouvrez l’icône dans le moteur de recherche et choisissez une couleur fixe avant de la copier.
Puis-je utiliser ces icônes dans Webflow ou React ?
Oui. Ouvrez une icône et utilisez le bouton « Copy to Webflow » (il colle un Code Embed) ou « Copy JSX » pour un composant React.