Menu

Calendar Chart SVG icon, line

Calendar Chart SVG icon, line

A calendar with two binding rings contains a small rising line. Use it on scheduling dashboards and monthly performance reports.

Similar SVGs

More from Charts and data icons, line · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/k2q3rlt1J8aR/amnt.svg" alt="Calendar Chart" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="white" data-name="White"><path d="M749 519c-22 23-44 46-66 69-6 6-18 14-21 21-2 6 0 12-1 18-4 22-27 28-46 24l-58 48c0 19-9 37-31 39-16 1-31-9-35-25-1-3 0-7-2-10-3-4-39-24-46-28-4-3-13-11-19-11-9-1-13 8-33 3-12 11-96 83-97 88-2 4 0 11-1 16-5 28-46 35-61 10-18-28 11-56 40-49l100-92c-12-31 46-57 63-19 2 4 2 11 5 15 2 2 60 37 66 40 12-5 19-5 31-2 14-16 34-28 50-42 2-1 6-3 7-6 2-4 0-10 1-14 4-18 19-25 35-26 4 0 6 1 9 0s77-78 86-88c-9-7-27-13-26-27 1-13 16-15 26-18 14-4 64-24 75-16 4 3 7 7 7 12 1 11-6 31-9 43-6 32-12 86-49 27zM172 375v413c-1 26 20 51 43 60 26 10 190 5 231 5 112 0 225 0 338 0l6-1c32 0 64-33 62-65v-412z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M676 246c-25 75 97 69 69-1-3 8-4 16-10 22-14 15-39 14-51-2-4-6-6-13-8-19z" fill="#fcfcfc" stroke="#fcfcfc"/><path d="M276 258v10c1 50 95 42 72-23-2 7-4 15-9 21-12 15-36 16-50 1-5-5-7-12-9-19-3 3-4 6-4 10z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="navy" data-name="Navy"><path d="M349 178c-7-27 11-75-35-76-49-1-26 51-36 76-17 0-35-1-51 1-46 7-85 45-89 92-2 24 0 49 0 74 0 102 0 204 0 307 0 28 0 57 0 86 0 20-2 41 1 61 6 40 37 73 76 83 32 8 69 3 102 3 65 0 129 0 194 0 36 0 72 1 108 1 27 0 54-2 80-1 28 1 85 4 111-3 40-11 72-47 76-90 1-17 0-36 0-53 0-29 0-58 0-87 0-103 0-205 0-307 0-25 2-51 0-75-4-44-40-81-83-90-19-3-39-2-58-2-5-27 11-76-35-76-40 0-34 49-34 76zm-68 33c-1 13-39 26-26 72 8 26 32 44 59 44 26 0 51-17 58-44 13-47-25-59-26-72l331 1c1 7-36 28-25 71 6 25 31 43 57 44 63 2 84-73 34-111l1-5c17 0 37-2 53 1 65 13 55 80 55 129-33 6-70 0-103 0-80 0-159 1-239 1-79 0-158-2-236-1-22 0-84 4-102 0 0-24-4-48 0-71 5-31 31-56 62-59 15-1 31 0 47 0zm395 35c2 6 4 13 8 19 12 16 37 17 51 2 6-6 7-14 10-22 28 70-94 76-69 1zM276 268v-10c0-4 1-7 4-10 2 7 4 14 9 19 14 15 38 14 50-1 5-6 7-14 9-21 23 65-71 73-72 23zM172 788v-413h680v412c2 32-30 65-62 65l-6 1c-113 0-226 0-338 0-41 0-205 5-231-5-23-9-44-34-43-60z" fill="#012152" stroke="#012152"/></g><g id="blue" data-name="Blue"><path d="M281 211c-16 0-32-1-47 0-31 3-57 28-62 59-4 23 0 47 0 71 18 4 80 0 102 0 78-1 157 1 236 1 80 0 159-1 239-1 33 0 70 6 103 0 0-49 10-116-55-129-16-3-36-1-53-1l-1 5c50 38 29 113-34 111-26-1-51-19-57-44-11-43 26-64 25-71l-331-1c1 13 39 25 26 72-7 27-32 44-58 44-27 0-51-18-59-44-13-46 25-59 26-72z" fill="#2da3fa" stroke="#2da3fa"/><path d="M172 788v-413z" fill="#2da3fa" stroke="#2da3fa"/><path d="M276 268v-10z" fill="#2da3fa" stroke="#2da3fa"/><path d="M784 853l6-1z" fill="#2da3fa" stroke="#2da3fa"/></g><g id="turquoise" data-name="Turquoise"><path d="M749 519c37 59 43 5 49-27 3-12 10-32 9-43 0-5-3-9-7-12-11-8-61 12-75 16-10 3-25 5-26 18-1 14 17 20 26 27-9 10-83 87-86 88s-5 0-9 0c-16 1-31 8-35 26-1 4 1 10-1 14-1 3-5 5-7 6-16 14-36 26-50 42-12-3-19-3-31 2-6-3-64-38-66-40-3-4-3-11-5-15-17-38-75-12-63 19l-100 92c-29-7-58 21-40 49 15 25 56 18 61-10 1-5-1-12 1-16 1-5 85-77 97-88 20 5 24-4 33-3 6 0 15 8 19 11 7 4 43 24 46 28 2 3 1 7 2 10 4 16 19 26 35 25 22-2 31-20 31-39l58-48c19 4 42-2 46-24 1-6-1-12 1-18 3-7 15-15 21-21 22-23 44-46 66-69z" fill="#02bda4" stroke="#02bda4"/><path d="M852 787v-412z" fill="#02bda4" stroke="#02bda4"/></g></svg>
CSS background-image
.calendar-chart {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/k2q3rlt1J8aR/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.calendar-chart {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/k2q3rlt1J8aR/amnt.svg") center / contain no-repeat;
}
React
import CalendarChartSvg from "./calendar-chart.jsx"; // from the React tab above

<CalendarChartSvg width={48} height={48} />

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Calendar Chart: A calendar outline has two top binding rings and a small rising line across its date area. A flat colour icon. as part of the pack Charts and data icons, line · Set 2. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings