Chart Ring Icon SVG
Chart Ring
Chart ring SVG Icon Code | Customize color
You can get svg icon chart ring in blue, white, red color and transparent color from below list. You can also customize color using color picker.
Chart ring
DownloadSvg Code
<?xml version="1.0" encoding="UTF-8"?><svg width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9757 4.22717C11.3651 5.68494 4 13.9824 4 24C4 34.0213 11.3705 42.3212 20.9863 43.7744C21.9692 43.923 22.9756 44 24 44C25.0209 44 26.024 43.9235 27.0038 43.7759C35.6458 42.4743 42.4762 35.6429 43.7764 27.0004" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.775 20.9939C42.4729 12.3556 35.6458 5.52785 27.0078 4.22476" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16Z" fill="none" stroke="#333" stroke-width="1" stroke-linejoin="round"/></svg>
Chart ring
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: white" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9757 4.22717C11.3651 5.68494 4 13.9824 4 24C4 34.0213 11.3705 42.3212 20.9863 43.7744C21.9692 43.923 22.9756 44 24 44C25.0209 44 26.024 43.9235 27.0038 43.7759C35.6458 42.4743 42.4762 35.6429 43.7764 27.0004" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M43.775 20.9939C42.4729 12.3556 35.6458 5.52785 27.0078 4.22476" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="white"></path><path d="M24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16Z" fill="white" stroke="#333" stroke-width="1" stroke-linejoin="round"></path></svg>
Chart ring
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: red" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9757 4.22717C11.3651 5.68494 4 13.9824 4 24C4 34.0213 11.3705 42.3212 20.9863 43.7744C21.9692 43.923 22.9756 44 24 44C25.0209 44 26.024 43.9235 27.0038 43.7759C35.6458 42.4743 42.4762 35.6429 43.7764 27.0004" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M43.775 20.9939C42.4729 12.3556 35.6458 5.52785 27.0078 4.22476" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="red"></path><path d="M24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16Z" fill="red" stroke="#333" stroke-width="1" stroke-linejoin="round"></path></svg>
Chart ring
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: blue" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9757 4.22717C11.3651 5.68494 4 13.9824 4 24C4 34.0213 11.3705 42.3212 20.9863 43.7744C21.9692 43.923 22.9756 44 24 44C25.0209 44 26.024 43.9235 27.0038 43.7759C35.6458 42.4743 42.4762 35.6429 43.7764 27.0004" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M43.775 20.9939C42.4729 12.3556 35.6458 5.52785 27.0078 4.22476" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="blue"></path><path d="M24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16Z" fill="blue" stroke="#333" stroke-width="1" stroke-linejoin="round"></path></svg>
Chart ring
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: #f3da35" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9757 4.22717C11.3651 5.68494 4 13.9824 4 24C4 34.0213 11.3705 42.3212 20.9863 43.7744C21.9692 43.923 22.9756 44 24 44C25.0209 44 26.024 43.9235 27.0038 43.7759C35.6458 42.4743 42.4762 35.6429 43.7764 27.0004" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M43.775 20.9939C42.4729 12.3556 35.6458 5.52785 27.0078 4.22476" stroke="#333" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#f3da35"></path><path d="M24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16Z" fill="#f3da35" stroke="#333" stroke-width="1" stroke-linejoin="round"></path></svg>
Advance Editor
You can edit chart ring as below. Change size color and background color of icon using below tool.
Advertisements
Advertisements