Menu

Beta
Sign in
Beta
Donut Chart SVG icon, line

Donut Chart SVG icon, line

Two concentric circles create a ring split into three unequal sections. This icon works on funding breakdowns and audience profile pages.

Free · from Charts and data icons, line · Set 2

Similar SVGs

More from Charts and data icons, line · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ch0IPsuUe2oQ/amnt.svg" alt="Donut 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="turquoise" data-name="Turquoise"><path d="M521 52v234c26-1 53 7 77 17 96 43 150 153 122 254-34 125-184 200-303 140l-120 193c25 10 48 23 74 32 110 36 234 28 338-24 111-56 200-157 234-278 63-222-56-455-271-538-45-18-103-32-151-30z" fill="#02a6c1" stroke="#02a6c1"/></g><g id="coral" data-name="Coral"><path d="M163 220c-84 107-120 245-89 379 23 98 80 190 161 251 14 11 30 23 46 31l120-193c-21-9-40-29-54-45-73-87-65-191-1-279z" fill="#fb715e" stroke="#fb715e"/></g><g id="midnight" data-name="Midnight"><path d="M497 34c-251 11-462 224-452 480 10 254 224 459 481 448 254-11 463-221 452-479-11-252-226-460-481-449zm6 17v235c-52-3-109 30-145 65l-183-145c15-16 30-32 47-46 60-51 134-87 212-101 23-4 46-4 69-8zm18 1c48-2 106 12 151 30 215 83 334 316 271 538-34 121-123 222-234 278-104 52-228 60-338 24-26-9-49-22-74-32l120-193c119 60 269-15 303-140 28-101-26-211-122-254-24-10-51-18-77-17zM163 220l183 144c-64 88-72 192 1 279 14 16 33 36 54 45l-120 193c-16-8-32-20-46-31-81-61-138-153-161-251-31-134 5-272 89-379zm338 83c104-6 201 77 208 183 7 110-79 206-188 213-188 13-279-224-139-346 33-29 75-47 119-50z" fill="#032136" stroke="#032136"/></g><g id="amber" data-name="Amber"><path d="M503 51c-23 4-46 4-69 8-78 14-152 50-212 101-17 14-32 30-47 46l183 145c36-35 93-68 145-65z" fill="#fcca21" stroke="#fcca21"/></g></svg>
CSS background-image
.donut-chart {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ch0IPsuUe2oQ/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.donut-chart {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ch0IPsuUe2oQ/amnt.svg") center / contain no-repeat;
}
React
import DonutChartSvg from "./donut-chart.jsx"; // from the React tab above

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

Tags

donutchartproportionsegmentschartsiconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Donut Chart: Two concentric circles form a ring divided into three unequal sections. 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