calendar clock icon

calendar-clock-sharp from Material Symbols Light by Google · Sharp · Actions · Apache-2.0 Free for personal and commercial use.

Name: calendar-clock-sharp
Set: Material Symbols Light
Style: Sharp
Category: Actions
Viewbox: 24×24
License: Apache 2.0

5 other variants in Material Symbols Light

calendar-clock calendar-clock-outline calendar-clock-outline-rounded calendar-clock-outline-sharp calendar-clock-rounded

The same icon in other sets

calendar-clock-16-filledFluent UI System Icons calendar-clock-16Fluent UI System Color Icons calendar-clockHuge Icons calendar-clockLucide calendar-clockMaterial Symbols calendar-clockMaterial Design Icons calendar-clockPrime Icons calendar-clockTabler Icons

More actions icons from Material Symbols Light

Use the calendar clock icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21V5h3.385V2.77h1.077V5h7.154V2.77h1V5H20v6.867q-.244-.09-.494-.134T19 11.652v-1.036H5V20h7.32q.078.28.2.521q.122.24.255.479zm11.549-.164Q14.385 19.67 14.385 18t1.164-2.835T18.384 14q1.672 0 2.836 1.165q1.165 1.164 1.165 2.835t-1.165 2.836T18.385 22t-2.836-1.164m4.492-.634l.546-.546l-1.818-1.818v-2.722H18v3.046z"/></svg>

React

import type { SVGProps } from "react";

export function MaterialSymbolsLightCalendarClockSharp(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21V5h3.385V2.77h1.077V5h7.154V2.77h1V5H20v6.867q-.244-.09-.494-.134T19 11.652v-1.036H5V20h7.32q.078.28.2.521q.122.24.255.479zm11.549-.164Q14.385 19.67 14.385 18t1.164-2.835T18.384 14q1.672 0 2.836 1.165q1.165 1.164 1.165 2.835t-1.165 2.836T18.385 22t-2.836-1.164m4.492-.634l.546-.546l-1.818-1.818v-2.722H18v3.046z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21V5h3.385V2.77h1.077V5h7.154V2.77h1V5H20v6.867q-.244-.09-.494-.134T19 11.652v-1.036H5V20h7.32q.078.28.2.521q.122.24.255.479zm11.549-.164Q14.385 19.67 14.385 18t1.164-2.835T18.384 14q1.672 0 2.836 1.165q1.165 1.164 1.165 2.835t-1.165 2.836T18.385 22t-2.836-1.164m4.492-.634l.546-.546l-1.818-1.818v-2.722H18v3.046z"/></svg>
</template>

CSS

.icon-calendar-clock-sharp {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2021V5h3.385V2.77h1.077V5h7.154V2.77h1V5H20v6.867q-.244-.09-.494-.134T19%2011.652v-1.036H5V20h7.32q.078.28.2.521q.122.24.255.479zm11.549-.164Q14.385%2019.67%2014.385%2018t1.164-2.835T18.384%2014q1.672%200%202.836%201.165q1.165%201.164%201.165%202.835t-1.165%202.836T18.385%2022t-2.836-1.164m4.492-.634l.546-.546l-1.818-1.818v-2.722H18v3.046z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4%2021V5h3.385V2.77h1.077V5h7.154V2.77h1V5H20v6.867q-.244-.09-.494-.134T19%2011.652v-1.036H5V20h7.32q.078.28.2.521q.122.24.255.479zm11.549-.164Q14.385%2019.67%2014.385%2018t1.164-2.835T18.384%2014q1.672%200%202.836%201.165q1.165%201.164%201.165%202.835t-1.165%202.836T18.385%2022t-2.836-1.164m4.492-.634l.546-.546l-1.818-1.818v-2.722H18v3.046z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/calendar-clock-sharp.svg?color=%231a73e8&size=48