Calendar 17 Icon SVG
Calendar 17
Calendar 17 SVG Icon Code | Customize color
You can get svg icon calendar 17 in blue, white, red color and transparent color from below list. You can also customize color using color picker.
CustomizeSvg Code
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10H20V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V10Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.77778 5H4V10H20V5H18.2222M11.1111 5H12.8889" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <line x1="8" y1="4" x2="8" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <line x1="16" y1="4" x2="16" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.5 18V13L8 14.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13.5 18L15.5 13H12.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Svg Code
<svg style="color: white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10H20V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V10Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="white"></path> <path d="M5.77778 5H4V10H20V5H18.2222M11.1111 5H12.8889" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="white"></path> <line x1="8" y1="4" x2="8" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <line x1="16" y1="4" x2="16" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <path d="M9.5 18V13L8 14.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="white"></path> <path d="M13.5 18L15.5 13H12.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="white"></path> </svg> Svg Code
<svg style="color: red" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10H20V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V10Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="red"></path> <path d="M5.77778 5H4V10H20V5H18.2222M11.1111 5H12.8889" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="red"></path> <line x1="8" y1="4" x2="8" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <line x1="16" y1="4" x2="16" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <path d="M9.5 18V13L8 14.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="red"></path> <path d="M13.5 18L15.5 13H12.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="red"></path> </svg> Svg Code
<svg style="color: blue" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10H20V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V10Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path> <path d="M5.77778 5H4V10H20V5H18.2222M11.1111 5H12.8889" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path> <line x1="8" y1="4" x2="8" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <line x1="16" y1="4" x2="16" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <path d="M9.5 18V13L8 14.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path> <path d="M13.5 18L15.5 13H12.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path> </svg> Svg Code
<svg style="color: #f3da35" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10H20V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V10Z" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path> <path d="M5.77778 5H4V10H20V5H18.2222M11.1111 5H12.8889" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path> <line x1="8" y1="4" x2="8" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <line x1="16" y1="4" x2="16" y2="6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line> <path d="M9.5 18V13L8 14.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path> <path d="M13.5 18L15.5 13H12.5" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path> </svg> Advance Editor
You can edit calendar 17 as below. Change size color and background color of icon using below tool.
Advertisements
Advertisements