calendar emoji
calendar from Twitter Emoji by Twitter · Default · Objects · CC-BY-4.0 Attribution required.
- Name
- calendar
- Set
- Twitter Emoji
- Style
- Default
- Category
- Objects
- Viewbox
- 36×36
- License
- CC BY 4.0
The same emoji in other sets
calendarAkar Iconscalendar-filledAnt Design IconscalendarBootstrap IconscalendarBoxIcons v2calendarBoxIcons v2 SolidcalendarCarboncalendarCodiconscalendarEmoji One (Colored)calendarElement Pluscalendar-fillEva IconscalendarFramework7 IconscalendarFont Awesome 6 RegularcalendarFont Awesome 6 SolidcalendarFont Awesome RegularcalendarFont Awesome SolidcalendarFeather Iconscalendar-12-filledFluent UI System Iconscalendar-16Fluent UI System Color IconscalendarFluent EmojicalendarFluent Emoji FlatcalendarFluent Emoji High ContrastcalendarFirefox OS Emojicalendarcss.ggcalendarHealth Icons
More objects icons from Twitter Emoji
Use the calendar emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#e0e7ec" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"/><path fill="#66757f" d="M23.657 19.12H17.87c-1.22 0-1.673-.791-1.673-1.56c0-.791.429-1.56 1.673-1.56h8.184c1.154 0 1.628 1.04 1.628 1.628c0 .452-.249.927-.52 1.492l-5.607 11.395c-.633 1.266-.882 1.717-1.899 1.717c-1.244 0-1.877-.949-1.877-1.605c0-.271.068-.474.226-.791zM10.889 19h-.5c-1.085 0-1.538-.731-1.538-1.5c0-.792.565-1.5 1.538-1.5h2.015c.972 0 1.515.701 1.515 1.605V30.47c0 1.13-.558 1.763-1.53 1.763s-1.5-.633-1.5-1.763z"/><path fill="#dd2f45" d="M34 0h-3.277c.172.295.277.634.277 1a2 2 0 0 1-4 0c0-.366.105-.705.277-1H8.723C8.895.295 9 .634 9 1a2 2 0 0 1-4 0c0-.366.105-.705.277-1H2a2 2 0 0 0-2 2v11h36V2a2 2 0 0 0-2-2"/><path fill="#f5f8fa" d="M13.182 4.604c0-.5.32-.78.75-.78c.429 0 .749.28.749.78v5.017h1.779c.51 0 .73.38.72.72a.7.7 0 0 1-.72.659h-2.498c-.49 0-.78-.319-.78-.819zm-6.91 0c0-.5.32-.78.75-.78s.75.28.75.78v3.488c0 .92.589 1.649 1.539 1.649c.909 0 1.529-.769 1.529-1.649V4.604c0-.5.319-.78.749-.78s.75.28.75.78v3.568c0 1.679-1.38 2.949-3.028 2.949c-1.669 0-3.039-1.25-3.039-2.949zM5.49 9.001c0 1.679-1.069 2.119-1.979 2.119c-.689 0-1.839-.27-1.839-1.14c0-.269.23-.609.56-.609c.4 0 .75.37 1.199.37c.56 0 .56-.52.56-.84V4.604c0-.5.32-.78.749-.78c.431 0 .75.28.75.78z"/><path fill="#f4abba" d="M32 10a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 0a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0"/></svg>
React
import type { SVGProps } from "react";
export function TwemojiCalendar(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#e0e7ec" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"/><path fill="#66757f" d="M23.657 19.12H17.87c-1.22 0-1.673-.791-1.673-1.56c0-.791.429-1.56 1.673-1.56h8.184c1.154 0 1.628 1.04 1.628 1.628c0 .452-.249.927-.52 1.492l-5.607 11.395c-.633 1.266-.882 1.717-1.899 1.717c-1.244 0-1.877-.949-1.877-1.605c0-.271.068-.474.226-.791zM10.889 19h-.5c-1.085 0-1.538-.731-1.538-1.5c0-.792.565-1.5 1.538-1.5h2.015c.972 0 1.515.701 1.515 1.605V30.47c0 1.13-.558 1.763-1.53 1.763s-1.5-.633-1.5-1.763z"/><path fill="#dd2f45" d="M34 0h-3.277c.172.295.277.634.277 1a2 2 0 0 1-4 0c0-.366.105-.705.277-1H8.723C8.895.295 9 .634 9 1a2 2 0 0 1-4 0c0-.366.105-.705.277-1H2a2 2 0 0 0-2 2v11h36V2a2 2 0 0 0-2-2"/><path fill="#f5f8fa" d="M13.182 4.604c0-.5.32-.78.75-.78c.429 0 .749.28.749.78v5.017h1.779c.51 0 .73.38.72.72a.7.7 0 0 1-.72.659h-2.498c-.49 0-.78-.319-.78-.819zm-6.91 0c0-.5.32-.78.75-.78s.75.28.75.78v3.488c0 .92.589 1.649 1.539 1.649c.909 0 1.529-.769 1.529-1.649V4.604c0-.5.319-.78.749-.78s.75.28.75.78v3.568c0 1.679-1.38 2.949-3.028 2.949c-1.669 0-3.039-1.25-3.039-2.949zM5.49 9.001c0 1.679-1.069 2.119-1.979 2.119c-.689 0-1.839-.27-1.839-1.14c0-.269.23-.609.56-.609c.4 0 .75.37 1.199.37c.56 0 .56-.52.56-.84V4.604c0-.5.32-.78.749-.78c.431 0 .75.28.75.78z"/><path fill="#f4abba" d="M32 10a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 0a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#e0e7ec" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4z"/><path fill="#66757f" d="M23.657 19.12H17.87c-1.22 0-1.673-.791-1.673-1.56c0-.791.429-1.56 1.673-1.56h8.184c1.154 0 1.628 1.04 1.628 1.628c0 .452-.249.927-.52 1.492l-5.607 11.395c-.633 1.266-.882 1.717-1.899 1.717c-1.244 0-1.877-.949-1.877-1.605c0-.271.068-.474.226-.791zM10.889 19h-.5c-1.085 0-1.538-.731-1.538-1.5c0-.792.565-1.5 1.538-1.5h2.015c.972 0 1.515.701 1.515 1.605V30.47c0 1.13-.558 1.763-1.53 1.763s-1.5-.633-1.5-1.763z"/><path fill="#dd2f45" d="M34 0h-3.277c.172.295.277.634.277 1a2 2 0 0 1-4 0c0-.366.105-.705.277-1H8.723C8.895.295 9 .634 9 1a2 2 0 0 1-4 0c0-.366.105-.705.277-1H2a2 2 0 0 0-2 2v11h36V2a2 2 0 0 0-2-2"/><path fill="#f5f8fa" d="M13.182 4.604c0-.5.32-.78.75-.78c.429 0 .749.28.749.78v5.017h1.779c.51 0 .73.38.72.72a.7.7 0 0 1-.72.659h-2.498c-.49 0-.78-.319-.78-.819zm-6.91 0c0-.5.32-.78.75-.78s.75.28.75.78v3.488c0 .92.589 1.649 1.539 1.649c.909 0 1.529-.769 1.529-1.649V4.604c0-.5.319-.78.749-.78s.75.28.75.78v3.568c0 1.679-1.38 2.949-3.028 2.949c-1.669 0-3.039-1.25-3.039-2.949zM5.49 9.001c0 1.679-1.069 2.119-1.979 2.119c-.689 0-1.839-.27-1.839-1.14c0-.269.23-.609.56-.609c.4 0 .75.37 1.199.37c.56 0 .56-.52.56-.84V4.604c0-.5.32-.78.749-.78c.431 0 .75.28.75.78z"/><path fill="#f4abba" d="M32 10a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0-3a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3 0a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0 3a1 1 0 1 0 2 0a1 1 0 0 0-2 0"/></svg> </template>
CSS
.icon-calendar {
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%2036%2036%22%3E%3Cpath%20fill%3D%22%23e0e7ec%22%20d%3D%22M36%2032a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V9a4%204%200%200%201%204-4h28a4%204%200%200%201%204%204z%22%2F%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M23.657%2019.12H17.87c-1.22%200-1.673-.791-1.673-1.56c0-.791.429-1.56%201.673-1.56h8.184c1.154%200%201.628%201.04%201.628%201.628c0%20.452-.249.927-.52%201.492l-5.607%2011.395c-.633%201.266-.882%201.717-1.899%201.717c-1.244%200-1.877-.949-1.877-1.605c0-.271.068-.474.226-.791zM10.889%2019h-.5c-1.085%200-1.538-.731-1.538-1.5c0-.792.565-1.5%201.538-1.5h2.015c.972%200%201.515.701%201.515%201.605V30.47c0%201.13-.558%201.763-1.53%201.763s-1.5-.633-1.5-1.763z%22%2F%3E%3Cpath%20fill%3D%22%23dd2f45%22%20d%3D%22M34%200h-3.277c.172.295.277.634.277%201a2%202%200%200%201-4%200c0-.366.105-.705.277-1H8.723C8.895.295%209%20.634%209%201a2%202%200%200%201-4%200c0-.366.105-.705.277-1H2a2%202%200%200%200-2%202v11h36V2a2%202%200%200%200-2-2%22%2F%3E%3Cpath%20fill%3D%22%23f5f8fa%22%20d%3D%22M13.182%204.604c0-.5.32-.78.75-.78c.429%200%20.749.28.749.78v5.017h1.779c.51%200%20.73.38.72.72a.7.7%200%200%201-.72.659h-2.498c-.49%200-.78-.319-.78-.819zm-6.91%200c0-.5.32-.78.75-.78s.75.28.75.78v3.488c0%20.92.589%201.649%201.539%201.649c.909%200%201.529-.769%201.529-1.649V4.604c0-.5.319-.78.749-.78s.75.28.75.78v3.568c0%201.679-1.38%202.949-3.028%202.949c-1.669%200-3.039-1.25-3.039-2.949zM5.49%209.001c0%201.679-1.069%202.119-1.979%202.119c-.689%200-1.839-.27-1.839-1.14c0-.269.23-.609.56-.609c.4%200%20.75.37%201.199.37c.56%200%20.56-.52.56-.84V4.604c0-.5.32-.78.749-.78c.431%200%20.75.28.75.78z%22%2F%3E%3Cpath%20fill%3D%22%23f4abba%22%20d%3D%22M32%2010a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0-3a1%201%200%201%200%202%200a1%201%200%200%200-2%200m-3%203a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0-3a1%201%200%201%200%202%200a1%201%200%200%200-2%200m-3%203a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0-3a1%201%200%201%200%202%200a1%201%200%200%200-2%200m-3%200a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0%203a1%201%200%201%200%202%200a1%201%200%200%200-2%200%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%2036%2036%22%3E%3Cpath%20fill%3D%22%23e0e7ec%22%20d%3D%22M36%2032a4%204%200%200%201-4%204H4a4%204%200%200%201-4-4V9a4%204%200%200%201%204-4h28a4%204%200%200%201%204%204z%22%2F%3E%3Cpath%20fill%3D%22%2366757f%22%20d%3D%22M23.657%2019.12H17.87c-1.22%200-1.673-.791-1.673-1.56c0-.791.429-1.56%201.673-1.56h8.184c1.154%200%201.628%201.04%201.628%201.628c0%20.452-.249.927-.52%201.492l-5.607%2011.395c-.633%201.266-.882%201.717-1.899%201.717c-1.244%200-1.877-.949-1.877-1.605c0-.271.068-.474.226-.791zM10.889%2019h-.5c-1.085%200-1.538-.731-1.538-1.5c0-.792.565-1.5%201.538-1.5h2.015c.972%200%201.515.701%201.515%201.605V30.47c0%201.13-.558%201.763-1.53%201.763s-1.5-.633-1.5-1.763z%22%2F%3E%3Cpath%20fill%3D%22%23dd2f45%22%20d%3D%22M34%200h-3.277c.172.295.277.634.277%201a2%202%200%200%201-4%200c0-.366.105-.705.277-1H8.723C8.895.295%209%20.634%209%201a2%202%200%200%201-4%200c0-.366.105-.705.277-1H2a2%202%200%200%200-2%202v11h36V2a2%202%200%200%200-2-2%22%2F%3E%3Cpath%20fill%3D%22%23f5f8fa%22%20d%3D%22M13.182%204.604c0-.5.32-.78.75-.78c.429%200%20.749.28.749.78v5.017h1.779c.51%200%20.73.38.72.72a.7.7%200%200%201-.72.659h-2.498c-.49%200-.78-.319-.78-.819zm-6.91%200c0-.5.32-.78.75-.78s.75.28.75.78v3.488c0%20.92.589%201.649%201.539%201.649c.909%200%201.529-.769%201.529-1.649V4.604c0-.5.319-.78.749-.78s.75.28.75.78v3.568c0%201.679-1.38%202.949-3.028%202.949c-1.669%200-3.039-1.25-3.039-2.949zM5.49%209.001c0%201.679-1.069%202.119-1.979%202.119c-.689%200-1.839-.27-1.839-1.14c0-.269.23-.609.56-.609c.4%200%20.75.37%201.199.37c.56%200%20.56-.52.56-.84V4.604c0-.5.32-.78.749-.78c.431%200%20.75.28.75.78z%22%2F%3E%3Cpath%20fill%3D%22%23f4abba%22%20d%3D%22M32%2010a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0-3a1%201%200%201%200%202%200a1%201%200%200%200-2%200m-3%203a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0-3a1%201%200%201%200%202%200a1%201%200%200%200-2%200m-3%203a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0-3a1%201%200%201%200%202%200a1%201%200%200%200-2%200m-3%200a1%201%200%201%200%202%200a1%201%200%200%200-2%200m0%203a1%201%200%201%200%202%200a1%201%200%200%200-2%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/calendar.svg?color=%231a73e8&size=48
