calendar date icon

calendar-date-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.

Name
calendar-date-20-regular
Set
Fluent UI System Icons
Style
20 Regular
Viewbox
20×20
License
MIT

5 other variants in Fluent UI System Icons

calendar-date-20-filledcalendar-date-24-filledcalendar-date-24-regularcalendar-date-28-filledcalendar-date-28-regular

The same icon in other sets

calendar-dateBootstrap Iconscalendar-date-boldSolar

Related icons in Fluent UI System Icons

calendar-3-day-16-filledcalendar-add-16-filledcalendar-agenda-16-filledcalendar-agenda-clock-16-filledcalendar-arrow-counterclockwise-16-filledcalendar-arrow-down-20-filledcalendar-arrow-repeat-all-16-filledcalendar-arrow-right-16-filledcalendar-assistant-16-filledcalendar-cancel-16-filledcalendar-chat-16-filledcalendar-checkmark-16-filledcalendar-checkmark-center-16-filledcalendar-checkmark-sparkle-16-filledcalendar-clock-16-filledcalendar-data-bar-16-filledcalendar-day-16-filledcalendar-edit-16-filledcalendar-empty-16-filledcalendar-error-16-filledcalendar-eye-16-filledcalendar-info-16-filledcalendar-later-24-filledcalendar-link-24-filled

Use the calendar date icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14.5 3a2.5 2.5 0 0 1 2.495 2.336L17 5.5v9a2.5 2.5 0 0 1-2.336 2.495L14.5 17h-9a2.5 2.5 0 0 1-2.495-2.336L3 14.5v-9a2.5 2.5 0 0 1 2.336-2.495L5.5 3zM16 7H4v7.5a1.5 1.5 0 0 0 1.356 1.493L5.5 16h9a1.5 1.5 0 0 0 1.493-1.355L16 14.5zm-4.484 1.234q.8 0 1.27.426q.469.426.469 1.152q0 .419-.215.745a1.5 1.5 0 0 1-.586.513q.445.207.685.567t.24.812q0 .75-.507 1.19q-.509.44-1.352.44q-.847 0-1.357-.442t-.51-1.188q0-.457.242-.82t.68-.559a1.5 1.5 0 0 1-.58-.513a1.33 1.33 0 0 1-.213-.745q0-.726.469-1.152t1.265-.426m-3.02.059V14h-.945V9.434l-1.395.476v-.8l2.219-.817zm3.016 3.168q-.413 0-.662.258q-.248.258-.248.683q0 .419.245.668q.244.25.673.25t.67-.242t.24-.676q0-.42-.252-.681q-.252-.26-.666-.26m.004-2.465q-.363 0-.574.229q-.21.228-.21.623q0 .39.212.62q.213.231.576.231q.364 0 .577-.23t.212-.621a.88.88 0 0 0-.214-.612a.74.74 0 0 0-.579-.24M14.5 4h-9a1.5 1.5 0 0 0-1.493 1.356L4 5.5V6h12v-.5a1.5 1.5 0 0 0-1.355-1.493z"/></svg>

React

import type { SVGProps } from "react";

export function FluentCalendarDate20Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14.5 3a2.5 2.5 0 0 1 2.495 2.336L17 5.5v9a2.5 2.5 0 0 1-2.336 2.495L14.5 17h-9a2.5 2.5 0 0 1-2.495-2.336L3 14.5v-9a2.5 2.5 0 0 1 2.336-2.495L5.5 3zM16 7H4v7.5a1.5 1.5 0 0 0 1.356 1.493L5.5 16h9a1.5 1.5 0 0 0 1.493-1.355L16 14.5zm-4.484 1.234q.8 0 1.27.426q.469.426.469 1.152q0 .419-.215.745a1.5 1.5 0 0 1-.586.513q.445.207.685.567t.24.812q0 .75-.507 1.19q-.509.44-1.352.44q-.847 0-1.357-.442t-.51-1.188q0-.457.242-.82t.68-.559a1.5 1.5 0 0 1-.58-.513a1.33 1.33 0 0 1-.213-.745q0-.726.469-1.152t1.265-.426m-3.02.059V14h-.945V9.434l-1.395.476v-.8l2.219-.817zm3.016 3.168q-.413 0-.662.258q-.248.258-.248.683q0 .419.245.668q.244.25.673.25t.67-.242t.24-.676q0-.42-.252-.681q-.252-.26-.666-.26m.004-2.465q-.363 0-.574.229q-.21.228-.21.623q0 .39.212.62q.213.231.576.231q.364 0 .577-.23t.212-.621a.88.88 0 0 0-.214-.612a.74.74 0 0 0-.579-.24M14.5 4h-9a1.5 1.5 0 0 0-1.493 1.356L4 5.5V6h12v-.5a1.5 1.5 0 0 0-1.355-1.493z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M14.5 3a2.5 2.5 0 0 1 2.495 2.336L17 5.5v9a2.5 2.5 0 0 1-2.336 2.495L14.5 17h-9a2.5 2.5 0 0 1-2.495-2.336L3 14.5v-9a2.5 2.5 0 0 1 2.336-2.495L5.5 3zM16 7H4v7.5a1.5 1.5 0 0 0 1.356 1.493L5.5 16h9a1.5 1.5 0 0 0 1.493-1.355L16 14.5zm-4.484 1.234q.8 0 1.27.426q.469.426.469 1.152q0 .419-.215.745a1.5 1.5 0 0 1-.586.513q.445.207.685.567t.24.812q0 .75-.507 1.19q-.509.44-1.352.44q-.847 0-1.357-.442t-.51-1.188q0-.457.242-.82t.68-.559a1.5 1.5 0 0 1-.58-.513a1.33 1.33 0 0 1-.213-.745q0-.726.469-1.152t1.265-.426m-3.02.059V14h-.945V9.434l-1.395.476v-.8l2.219-.817zm3.016 3.168q-.413 0-.662.258q-.248.258-.248.683q0 .419.245.668q.244.25.673.25t.67-.242t.24-.676q0-.42-.252-.681q-.252-.26-.666-.26m.004-2.465q-.363 0-.574.229q-.21.228-.21.623q0 .39.212.62q.213.231.576.231q.364 0 .577-.23t.212-.621a.88.88 0 0 0-.214-.612a.74.74 0 0 0-.579-.24M14.5 4h-9a1.5 1.5 0 0 0-1.493 1.356L4 5.5V6h12v-.5a1.5 1.5 0 0 0-1.355-1.493z"/></svg>
</template>

CSS

.icon-calendar-date-20-regular {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.5%203a2.5%202.5%200%200%201%202.495%202.336L17%205.5v9a2.5%202.5%200%200%201-2.336%202.495L14.5%2017h-9a2.5%202.5%200%200%201-2.495-2.336L3%2014.5v-9a2.5%202.5%200%200%201%202.336-2.495L5.5%203zM16%207H4v7.5a1.5%201.5%200%200%200%201.356%201.493L5.5%2016h9a1.5%201.5%200%200%200%201.493-1.355L16%2014.5zm-4.484%201.234q.8%200%201.27.426q.469.426.469%201.152q0%20.419-.215.745a1.5%201.5%200%200%201-.586.513q.445.207.685.567t.24.812q0%20.75-.507%201.19q-.509.44-1.352.44q-.847%200-1.357-.442t-.51-1.188q0-.457.242-.82t.68-.559a1.5%201.5%200%200%201-.58-.513a1.33%201.33%200%200%201-.213-.745q0-.726.469-1.152t1.265-.426m-3.02.059V14h-.945V9.434l-1.395.476v-.8l2.219-.817zm3.016%203.168q-.413%200-.662.258q-.248.258-.248.683q0%20.419.245.668q.244.25.673.25t.67-.242t.24-.676q0-.42-.252-.681q-.252-.26-.666-.26m.004-2.465q-.363%200-.574.229q-.21.228-.21.623q0%20.39.212.62q.213.231.576.231q.364%200%20.577-.23t.212-.621a.88.88%200%200%200-.214-.612a.74.74%200%200%200-.579-.24M14.5%204h-9a1.5%201.5%200%200%200-1.493%201.356L4%205.5V6h12v-.5a1.5%201.5%200%200%200-1.355-1.493z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14.5%203a2.5%202.5%200%200%201%202.495%202.336L17%205.5v9a2.5%202.5%200%200%201-2.336%202.495L14.5%2017h-9a2.5%202.5%200%200%201-2.495-2.336L3%2014.5v-9a2.5%202.5%200%200%201%202.336-2.495L5.5%203zM16%207H4v7.5a1.5%201.5%200%200%200%201.356%201.493L5.5%2016h9a1.5%201.5%200%200%200%201.493-1.355L16%2014.5zm-4.484%201.234q.8%200%201.27.426q.469.426.469%201.152q0%20.419-.215.745a1.5%201.5%200%200%201-.586.513q.445.207.685.567t.24.812q0%20.75-.507%201.19q-.509.44-1.352.44q-.847%200-1.357-.442t-.51-1.188q0-.457.242-.82t.68-.559a1.5%201.5%200%200%201-.58-.513a1.33%201.33%200%200%201-.213-.745q0-.726.469-1.152t1.265-.426m-3.02.059V14h-.945V9.434l-1.395.476v-.8l2.219-.817zm3.016%203.168q-.413%200-.662.258q-.248.258-.248.683q0%20.419.245.668q.244.25.673.25t.67-.242t.24-.676q0-.42-.252-.681q-.252-.26-.666-.26m.004-2.465q-.363%200-.574.229q-.21.228-.21.623q0%20.39.212.62q.213.231.576.231q.364%200%20.577-.23t.212-.621a.88.88%200%200%200-.214-.612a.74.74%200%200%200-.579-.24M14.5%204h-9a1.5%201.5%200%200%200-1.493%201.356L4%205.5V6h12v-.5a1.5%201.5%200%200%200-1.355-1.493z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/calendar-date-20-regular.svg?color=%231a73e8&size=48