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

Kostenlose Kalender-Icons (SVG)

48 kostenlose Kalender-Icons aus Open-Source-Sets — klick auf eins, um Größe, Farbe und Strichstärke anzupassen, und kopier es als SVG, JSX, Data-URI oder CSS.

Aktualisiert am

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

Kalender-Icons verwenden

Kalender-Icons markieren Daten, Buchungen, Termine und Datumsauswahlen.

Alle Icons hier folgen currentColor, nehmen also die Textfarbe des Elements an, in dem sie stehen — ein SVG funktioniert auf hellen und dunklen Hintergründen, in Links und in Buttons. Setz eine explizite width und height (oder passe sie per CSS mit 1em an), damit sich das Layout nicht verschiebt, während die Seite lädt.

Barrierefreie Icons

Wenn das Icon dekorativ ist oder neben sichtbarem Text steht, ergänze aria-hidden="true". Ist es der einzige Inhalt eines Buttons oder Links, gib diesem Element ein aria-label wie „Kalender“.

Lizenzen

Diese Kalender-Icons stammen aus Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Design Icons, Carbon — Open-Source-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die persönliche und kommerzielle Nutzung erlauben. Brauchst du etwas anderes? Durchsuche alle 70.000+ Icons im SVG Icon Finder.

Häufige Fragen

Sind diese Kalender-Icons kostenlos für kommerzielle Nutzung?
Ja. Sie stammen aus Open-Source-Icon-Sets unter MIT-, ISC- oder Apache-2.0-Lizenz, die kommerzielle Nutzung erlauben. Behalte den Lizenzhinweis bei, wenn du die Icon-Dateien selbst weitergibst.
Wie ändere ich die Farbe eines Kalender-Icons?
Die SVGs verwenden currentColor, also setz die CSS-Farbe des übergeordneten Elements — oder öffne das Icon im Finder und wähle vor dem Kopieren eine feste Farbe.
Kann ich diese Icons in Webflow oder React verwenden?
Ja. Öffne ein Icon und nutze Copy to Webflow (fügt ein Code Embed ein) oder Copy JSX für eine React-Komponente.