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

Iconos de calendario gratis (SVG)

48 iconos de calendario de conjuntos de código abierto: haz clic en uno para cambiar su tamaño, color y trazo, y cópialo como SVG, JSX, data URI o CSS.

Actualizado el

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

Cómo usar los iconos de calendario

Los iconos de calendario marcan fechas, reservas, eventos y selectores de fecha.

Todos los iconos de aquí siguen currentColor, así que toman el color de texto del elemento en el que se encuentran: un mismo SVG funciona en fondos claros y oscuros, en enlaces y en botones. Define un width y un height explícitos (o ajústalos en CSS con 1em) para que el diseño no se desplace mientras carga la página.

Iconos accesibles

Si el icono es decorativo o está junto a texto visible, añade aria-hidden="true". Si es el único contenido de un botón o enlace, dale a ese elemento un aria-label, como “Calendario”.

Licencias

Estos iconos de calendario provienen de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Design Icons y Carbon: conjuntos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso personal y comercial. ¿Necesitas otra cosa? Busca entre más de 70,000 iconos en el SVG Icon Finder.

Preguntas frecuentes

¿Son gratis estos iconos de calendario para uso comercial?
Sí. Provienen de conjuntos de iconos de código abierto bajo licencias MIT, ISC o Apache 2.0, que permiten el uso comercial. Conserva el aviso de licencia si redistribuyes los propios archivos de los iconos.
¿Cómo cambio el color de un icono de calendario?
Los SVG usan currentColor, así que define el color CSS del elemento padre; también puedes abrir el icono en el buscador y elegir un color fijo antes de copiarlo.
¿Puedo usar estos iconos en Webflow o React?
Sí. Abre un icono y usa Copy to Webflow (pega un Code Embed) o Copy JSX para un componente de React.