calendar circle icon
calendar-circle from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- calendar-circle
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Related icons in Framework7 Icons
Use the calendar circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m-8.578-8.344h17.156c2.625 0 3.938-1.289 3.938-3.89V20.336c0-2.602-1.313-3.89-3.938-3.89H19.422c-2.625 0-3.938 1.288-3.938 3.89v15.352c0 2.601 1.313 3.89 3.938 3.89m-.164-2.133c-1.078 0-1.617-.539-1.617-1.64v-11.86c0-1.172.609-1.758 1.71-1.758h17.25c1.126 0 1.758.586 1.758 1.758v11.86c0 1.101-.562 1.64-1.664 1.64Zm6.21-10.547h.868c.539 0 .703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.54 0-.704.164-.704.703v.89c0 .516.165.68.704.68m4.196 0h.867c.54 0 .703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.563 0-.727.164-.727.703v.89c0 .516.164.68.727.68m4.148 0h.868c.539 0 .726-.164.726-.68v-.89c0-.539-.187-.703-.726-.703h-.868c-.539 0-.726.164-.726.703v.89c0 .516.187.68.726.68M21.297 31h.867c.539 0 .726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.867c-.54 0-.703.164-.703.703v.89c0 .516.164.68.703.68m4.172 0h.867c.539 0 .703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.54 0-.704.164-.704.703v.89c0 .516.165.68.704.68m4.195 0h.867c.54 0 .703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.563 0-.727.164-.727.703v.89c0 .516.164.68.727.68m4.148 0h.868c.539 0 .726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.868c-.539 0-.726.164-.726.703v.89c0 .516.187.68.726.68m-12.515 4.125h.867c.539 0 .726-.187.726-.727v-.867c0-.539-.187-.68-.726-.68h-.867c-.54 0-.703.141-.703.68v.867c0 .54.164.727.703.727m4.172 0h.867c.539 0 .703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.54 0-.704.141-.704.68v.867c0 .54.165.727.704.727m4.195 0h.867c.54 0 .703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.563 0-.727.141-.727.68v.867c0 .54.164.727.727.727"/></svg>
React
import type { SVGProps } from "react";
export function F7CalendarCircle(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m-8.578-8.344h17.156c2.625 0 3.938-1.289 3.938-3.89V20.336c0-2.602-1.313-3.89-3.938-3.89H19.422c-2.625 0-3.938 1.288-3.938 3.89v15.352c0 2.601 1.313 3.89 3.938 3.89m-.164-2.133c-1.078 0-1.617-.539-1.617-1.64v-11.86c0-1.172.609-1.758 1.71-1.758h17.25c1.126 0 1.758.586 1.758 1.758v11.86c0 1.101-.562 1.64-1.664 1.64Zm6.21-10.547h.868c.539 0 .703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.54 0-.704.164-.704.703v.89c0 .516.165.68.704.68m4.196 0h.867c.54 0 .703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.563 0-.727.164-.727.703v.89c0 .516.164.68.727.68m4.148 0h.868c.539 0 .726-.164.726-.68v-.89c0-.539-.187-.703-.726-.703h-.868c-.539 0-.726.164-.726.703v.89c0 .516.187.68.726.68M21.297 31h.867c.539 0 .726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.867c-.54 0-.703.164-.703.703v.89c0 .516.164.68.703.68m4.172 0h.867c.539 0 .703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.54 0-.704.164-.704.703v.89c0 .516.165.68.704.68m4.195 0h.867c.54 0 .703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.563 0-.727.164-.727.703v.89c0 .516.164.68.727.68m4.148 0h.868c.539 0 .726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.868c-.539 0-.726.164-.726.703v.89c0 .516.187.68.726.68m-12.515 4.125h.867c.539 0 .726-.187.726-.727v-.867c0-.539-.187-.68-.726-.68h-.867c-.54 0-.703.141-.703.68v.867c0 .54.164.727.703.727m4.172 0h.867c.539 0 .703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.54 0-.704.141-.704.68v.867c0 .54.165.727.704.727m4.195 0h.867c.54 0 .703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.563 0-.727.141-.727.68v.867c0 .54.164.727.727.727"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m-8.578-8.344h17.156c2.625 0 3.938-1.289 3.938-3.89V20.336c0-2.602-1.313-3.89-3.938-3.89H19.422c-2.625 0-3.938 1.288-3.938 3.89v15.352c0 2.601 1.313 3.89 3.938 3.89m-.164-2.133c-1.078 0-1.617-.539-1.617-1.64v-11.86c0-1.172.609-1.758 1.71-1.758h17.25c1.126 0 1.758.586 1.758 1.758v11.86c0 1.101-.562 1.64-1.664 1.64Zm6.21-10.547h.868c.539 0 .703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.54 0-.704.164-.704.703v.89c0 .516.165.68.704.68m4.196 0h.867c.54 0 .703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.563 0-.727.164-.727.703v.89c0 .516.164.68.727.68m4.148 0h.868c.539 0 .726-.164.726-.68v-.89c0-.539-.187-.703-.726-.703h-.868c-.539 0-.726.164-.726.703v.89c0 .516.187.68.726.68M21.297 31h.867c.539 0 .726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.867c-.54 0-.703.164-.703.703v.89c0 .516.164.68.703.68m4.172 0h.867c.539 0 .703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.54 0-.704.164-.704.703v.89c0 .516.165.68.704.68m4.195 0h.867c.54 0 .703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.563 0-.727.164-.727.703v.89c0 .516.164.68.727.68m4.148 0h.868c.539 0 .726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.868c-.539 0-.726.164-.726.703v.89c0 .516.187.68.726.68m-12.515 4.125h.867c.539 0 .726-.187.726-.727v-.867c0-.539-.187-.68-.726-.68h-.867c-.54 0-.703.141-.703.68v.867c0 .54.164.727.703.727m4.172 0h.867c.539 0 .703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.54 0-.704.141-.704.68v.867c0 .54.165.727.704.727m4.195 0h.867c.54 0 .703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.563 0-.727.141-.727.68v.867c0 .54.164.727.727.727"/></svg> </template>
CSS
.icon-calendar-circle {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2051.906c13.055%200%2023.906-10.828%2023.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899%204.094%204.095%2014.945%204.095%2028c0%2013.078%2010.828%2023.906%2023.906%2023.906m0-3.984C16.937%2047.922%208.1%2039.062%208.1%2028c0-11.04%208.813-19.922%2019.876-19.922c11.039%200%2019.921%208.883%2019.945%2019.922c.023%2011.063-8.883%2019.922-19.922%2019.922m-8.578-8.344h17.156c2.625%200%203.938-1.289%203.938-3.89V20.336c0-2.602-1.313-3.89-3.938-3.89H19.422c-2.625%200-3.938%201.288-3.938%203.89v15.352c0%202.601%201.313%203.89%203.938%203.89m-.164-2.133c-1.078%200-1.617-.539-1.617-1.64v-11.86c0-1.172.609-1.758%201.71-1.758h17.25c1.126%200%201.758.586%201.758%201.758v11.86c0%201.101-.562%201.64-1.664%201.64Zm6.21-10.547h.868c.539%200%20.703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.54%200-.704.164-.704.703v.89c0%20.516.165.68.704.68m4.196%200h.867c.54%200%20.703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.563%200-.727.164-.727.703v.89c0%20.516.164.68.727.68m4.148%200h.868c.539%200%20.726-.164.726-.68v-.89c0-.539-.187-.703-.726-.703h-.868c-.539%200-.726.164-.726.703v.89c0%20.516.187.68.726.68M21.297%2031h.867c.539%200%20.726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.867c-.54%200-.703.164-.703.703v.89c0%20.516.164.68.703.68m4.172%200h.867c.539%200%20.703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.54%200-.704.164-.704.703v.89c0%20.516.165.68.704.68m4.195%200h.867c.54%200%20.703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.563%200-.727.164-.727.703v.89c0%20.516.164.68.727.68m4.148%200h.868c.539%200%20.726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.868c-.539%200-.726.164-.726.703v.89c0%20.516.187.68.726.68m-12.515%204.125h.867c.539%200%20.726-.187.726-.727v-.867c0-.539-.187-.68-.726-.68h-.867c-.54%200-.703.141-.703.68v.867c0%20.54.164.727.703.727m4.172%200h.867c.539%200%20.703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.54%200-.704.141-.704.68v.867c0%20.54.165.727.704.727m4.195%200h.867c.54%200%20.703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.563%200-.727.141-.727.68v.867c0%20.54.164.727.727.727%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M28%2051.906c13.055%200%2023.906-10.828%2023.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899%204.094%204.095%2014.945%204.095%2028c0%2013.078%2010.828%2023.906%2023.906%2023.906m0-3.984C16.937%2047.922%208.1%2039.062%208.1%2028c0-11.04%208.813-19.922%2019.876-19.922c11.039%200%2019.921%208.883%2019.945%2019.922c.023%2011.063-8.883%2019.922-19.922%2019.922m-8.578-8.344h17.156c2.625%200%203.938-1.289%203.938-3.89V20.336c0-2.602-1.313-3.89-3.938-3.89H19.422c-2.625%200-3.938%201.288-3.938%203.89v15.352c0%202.601%201.313%203.89%203.938%203.89m-.164-2.133c-1.078%200-1.617-.539-1.617-1.64v-11.86c0-1.172.609-1.758%201.71-1.758h17.25c1.126%200%201.758.586%201.758%201.758v11.86c0%201.101-.562%201.64-1.664%201.64Zm6.21-10.547h.868c.539%200%20.703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.54%200-.704.164-.704.703v.89c0%20.516.165.68.704.68m4.196%200h.867c.54%200%20.703-.164.703-.68v-.89c0-.539-.164-.703-.703-.703h-.867c-.563%200-.727.164-.727.703v.89c0%20.516.164.68.727.68m4.148%200h.868c.539%200%20.726-.164.726-.68v-.89c0-.539-.187-.703-.726-.703h-.868c-.539%200-.726.164-.726.703v.89c0%20.516.187.68.726.68M21.297%2031h.867c.539%200%20.726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.867c-.54%200-.703.164-.703.703v.89c0%20.516.164.68.703.68m4.172%200h.867c.539%200%20.703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.54%200-.704.164-.704.703v.89c0%20.516.165.68.704.68m4.195%200h.867c.54%200%20.703-.164.703-.68v-.89c0-.54-.164-.703-.703-.703h-.867c-.563%200-.727.164-.727.703v.89c0%20.516.164.68.727.68m4.148%200h.868c.539%200%20.726-.164.726-.68v-.89c0-.54-.187-.703-.726-.703h-.868c-.539%200-.726.164-.726.703v.89c0%20.516.187.68.726.68m-12.515%204.125h.867c.539%200%20.726-.187.726-.727v-.867c0-.539-.187-.68-.726-.68h-.867c-.54%200-.703.141-.703.68v.867c0%20.54.164.727.703.727m4.172%200h.867c.539%200%20.703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.54%200-.704.141-.704.68v.867c0%20.54.165.727.704.727m4.195%200h.867c.54%200%20.703-.187.703-.727v-.867c0-.539-.164-.68-.703-.68h-.867c-.563%200-.727.141-.727.68v.867c0%20.54.164.727.727.727%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/calendar-circle.svg?color=%231a73e8&size=48
