pie chart icon
pie-chart from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- pie-chart
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
pie-chart-filledAnt Design Iconspie-chartBootstrap Iconspie-chartBoxIcons v2pie-chartBoxIcons v2 Solidpie-chartCodiconspie-chartElement Pluspie-chart-fillEva Iconspie-chartFont Awesome Solidpie-chartFeather Iconspie-chart-solidFlowbite Iconspie-chartHumbleiconspie-chartIonIconspie-chartJam Iconspie-chartLucidepie-chartMaterial Symbolspie-chartMaterial Symbols Lightpie-chartRadix Iconspie-chart-fillRemix Iconpie-chart-boldSolarpie-chart-outlineTeenyicons
Related icons in Huge Icons
Use the pie chart icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M20.5 15.828c-2.501 5.928-10.636 7.656-15.299 3.036C.63 14.334 2.045 6.13 8.057 3.5"/><path d="M17.683 12.5c1.888 0 2.832 0 3.441-.845c.023-.032.06-.088.081-.121c.548-.887.266-1.568-.299-2.93a10.18 10.18 0 0 0-5.51-5.51c-1.362-.565-2.043-.847-2.93-.3c-.033.021-.09.06-.121.082c-.845.61-.845 1.553-.845 3.44v2.111c0 1.92 0 2.88.596 3.477c.597.596 1.557.596 3.476.596z"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsPieChart(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path strokeLinecap="round" d="M20.5 15.828c-2.501 5.928-10.636 7.656-15.299 3.036C.63 14.334 2.045 6.13 8.057 3.5"/><path d="M17.683 12.5c1.888 0 2.832 0 3.441-.845c.023-.032.06-.088.081-.121c.548-.887.266-1.568-.299-2.93a10.18 10.18 0 0 0-5.51-5.51c-1.362-.565-2.043-.847-2.93-.3c-.033.021-.09.06-.121.082c-.845.61-.845 1.553-.845 3.44v2.111c0 1.92 0 2.88.596 3.477c.597.596 1.557.596 3.476.596z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M20.5 15.828c-2.501 5.928-10.636 7.656-15.299 3.036C.63 14.334 2.045 6.13 8.057 3.5"/><path d="M17.683 12.5c1.888 0 2.832 0 3.441-.845c.023-.032.06-.088.081-.121c.548-.887.266-1.568-.299-2.93a10.18 10.18 0 0 0-5.51-5.51c-1.362-.565-2.043-.847-2.93-.3c-.033.021-.09.06-.121.082c-.845.61-.845 1.553-.845 3.44v2.111c0 1.92 0 2.88.596 3.477c.597.596 1.557.596 3.476.596z"/></g></svg> </template>
CSS
.icon-pie-chart {
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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M20.5%2015.828c-2.501%205.928-10.636%207.656-15.299%203.036C.63%2014.334%202.045%206.13%208.057%203.5%22%2F%3E%3Cpath%20d%3D%22M17.683%2012.5c1.888%200%202.832%200%203.441-.845c.023-.032.06-.088.081-.121c.548-.887.266-1.568-.299-2.93a10.18%2010.18%200%200%200-5.51-5.51c-1.362-.565-2.043-.847-2.93-.3c-.033.021-.09.06-.121.082c-.845.61-.845%201.553-.845%203.44v2.111c0%201.92%200%202.88.596%203.477c.597.596%201.557.596%203.476.596z%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M20.5%2015.828c-2.501%205.928-10.636%207.656-15.299%203.036C.63%2014.334%202.045%206.13%208.057%203.5%22%2F%3E%3Cpath%20d%3D%22M17.683%2012.5c1.888%200%202.832%200%203.441-.845c.023-.032.06-.088.081-.121c.548-.887.266-1.568-.299-2.93a10.18%2010.18%200%200%200-5.51-5.51c-1.362-.565-2.043-.847-2.93-.3c-.033.021-.09.06-.121.082c-.845.61-.845%201.553-.845%203.44v2.111c0%201.92%200%202.88.596%203.477c.597.596%201.557.596%203.476.596z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/pie-chart.svg?color=%231a73e8&size=48
