# pie-chart icon Pie chart. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/pie-chart - Category: Charts & data - Use it for: pie chart, proportion, pie graph - Tags: chart, pie, donut, statistics, percentage, report - Family: activity, activity-search, area-chart, area-chart-stacked, bar-chart, bar-chart-clock, bar-chart-grouped, bar-chart-grouped-filled, bar-chart-horizontal, bar-chart-off, bar-chart-pencil, bar-chart-plus, bar-chart-search, bar-chart-sparkle, bar-chart-stacked, bubble-chart, candlestick-chart, cohort-chart, combo-chart, donut-chart, funnel-chart, gantt-chart, heatmap, histogram, line-chart, radar-chart, scatter-chart, treemap, trending-down, trending-up, trending-up-down, venn-diagram, waterfall-chart - Component name: PieChartIcon - Added: 2026-10-14 ## Alternatives - `donut-chart`: a ring with a hole (donut-chart) - `percent`: a single percentage value (percent) ## Also fits - donut chart: a full pie (pie-chart) ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/pie-chart.svg · PNG https://gentleface.com/png/line-round/16/pie-chart.png · https://gentleface.com/png/line-round/32/pie-chart.png · https://gentleface.com/png/line-round/48/pie-chart.png - line-soft: https://gentleface.com/svg/line-soft/16/pie-chart.svg · PNG https://gentleface.com/png/line-soft/16/pie-chart.png · https://gentleface.com/png/line-soft/32/pie-chart.png · https://gentleface.com/png/line-soft/48/pie-chart.png - line-sharp: https://gentleface.com/svg/line-sharp/16/pie-chart.svg · PNG https://gentleface.com/png/line-sharp/16/pie-chart.png · https://gentleface.com/png/line-sharp/32/pie-chart.png · https://gentleface.com/png/line-sharp/48/pie-chart.png - solid-round: https://gentleface.com/svg/solid-round/16/pie-chart.svg · PNG https://gentleface.com/png/solid-round/16/pie-chart.png · https://gentleface.com/png/solid-round/32/pie-chart.png · https://gentleface.com/png/solid-round/48/pie-chart.png - solid-soft: https://gentleface.com/svg/solid-soft/16/pie-chart.svg · PNG https://gentleface.com/png/solid-soft/16/pie-chart.png · https://gentleface.com/png/solid-soft/32/pie-chart.png · https://gentleface.com/png/solid-soft/48/pie-chart.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/pie-chart.svg · PNG https://gentleface.com/png/solid-sharp/16/pie-chart.png · https://gentleface.com/png/solid-sharp/32/pie-chart.png · https://gentleface.com/png/solid-sharp/48/pie-chart.png The SVG of every style: https://gentleface.com/icons/pie-chart.json (`svg`). ## Code (line-round) The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "pie-chart" (line-round), MIT. https://gentleface.com/icons/pie-chart import type { SVGProps } from 'react'; export function PieChartIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "pie-chart" (line-round), MIT. https://gentleface.com/icons/pie-chart. Takes the text color. */ .icon-pie-chart { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8.293 6.707C8.098 6.512 8 6.276 8 6L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1C9.199 1 9.874 1.129 10.525 1.386C11.231 1.666 11.852 2.074 12.389 2.611C12.926 3.148 13.334 3.769 13.614 4.475C13.871 5.126 14 5.801 14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L9 7C8.724 7 8.488 6.902 8.293 6.707ZM12.684 4.844C12.455 4.266 12.121 3.757 11.682 3.318C11.243 2.879 10.734 2.545 10.156 2.316C9.781 2.167 9.395 2.071 9 2.027L9 6L12.973 6C12.929 5.605 12.833 5.219 12.684 4.844ZM11.856 8.144C11.952 8.241 12 8.359 12 8.5C12 9.199 11.871 9.874 11.614 10.525C11.334 11.231 10.926 11.852 10.389 12.389C9.852 12.926 9.231 13.334 8.525 13.614C7.874 13.871 7.199 14 6.5 14C5.801 14 5.126 13.871 4.475 13.614C3.769 13.334 3.148 12.926 2.611 12.389C2.074 11.852 1.666 11.231 1.386 10.525C1.129 9.874 1 9.199 1 8.5C1 7.801 1.129 7.126 1.386 6.475C1.666 5.769 2.074 5.148 2.611 4.611C3.148 4.074 3.769 3.666 4.475 3.386C5.126 3.129 5.801 3 6.5 3C6.641 3 6.759 3.048 6.856 3.144C6.952 3.241 7 3.359 7 3.5L7 7C7 7.276 7.098 7.512 7.293 7.707C7.488 7.902 7.724 8 8 8L11.5 8C11.641 8 11.759 8.048 11.856 8.144ZM7.264 8.86C7.007 8.758 6.781 8.609 6.586 8.414C6.391 8.219 6.242 7.993 6.14 7.736C6.047 7.5 6 7.254 6 7L6 4.027C5.605 4.071 5.219 4.167 4.844 4.316C4.266 4.545 3.757 4.879 3.318 5.318C2.879 5.757 2.545 6.266 2.316 6.844C2.105 7.376 2 7.928 2 8.5C2 9.072 2.105 9.624 2.316 10.156C2.545 10.734 2.879 11.243 3.318 11.682C3.757 12.121 4.266 12.455 4.844 12.684C5.376 12.895 5.928 13 6.5 13C7.072 13 7.624 12.895 8.156 12.684C8.734 12.455 9.243 12.121 9.682 11.682C10.121 11.243 10.455 10.734 10.684 10.156C10.833 9.781 10.929 9.395 10.973 9L8 9C7.746 9 7.5 8.953 7.264 8.86Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8.293 6.707C8.098 6.512 8 6.276 8 6L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1C9.199 1 9.874 1.129 10.525 1.386C11.231 1.666 11.852 2.074 12.389 2.611C12.926 3.148 13.334 3.769 13.614 4.475C13.871 5.126 14 5.801 14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L9 7C8.724 7 8.488 6.902 8.293 6.707ZM12.684 4.844C12.455 4.266 12.121 3.757 11.682 3.318C11.243 2.879 10.734 2.545 10.156 2.316C9.781 2.167 9.395 2.071 9 2.027L9 6L12.973 6C12.929 5.605 12.833 5.219 12.684 4.844ZM11.856 8.144C11.952 8.241 12 8.359 12 8.5C12 9.199 11.871 9.874 11.614 10.525C11.334 11.231 10.926 11.852 10.389 12.389C9.852 12.926 9.231 13.334 8.525 13.614C7.874 13.871 7.199 14 6.5 14C5.801 14 5.126 13.871 4.475 13.614C3.769 13.334 3.148 12.926 2.611 12.389C2.074 11.852 1.666 11.231 1.386 10.525C1.129 9.874 1 9.199 1 8.5C1 7.801 1.129 7.126 1.386 6.475C1.666 5.769 2.074 5.148 2.611 4.611C3.148 4.074 3.769 3.666 4.475 3.386C5.126 3.129 5.801 3 6.5 3C6.641 3 6.759 3.048 6.856 3.144C6.952 3.241 7 3.359 7 3.5L7 7C7 7.276 7.098 7.512 7.293 7.707C7.488 7.902 7.724 8 8 8L11.5 8C11.641 8 11.759 8.048 11.856 8.144ZM7.264 8.86C7.007 8.758 6.781 8.609 6.586 8.414C6.391 8.219 6.242 7.993 6.14 7.736C6.047 7.5 6 7.254 6 7L6 4.027C5.605 4.071 5.219 4.167 4.844 4.316C4.266 4.545 3.757 4.879 3.318 5.318C2.879 5.757 2.545 6.266 2.316 6.844C2.105 7.376 2 7.928 2 8.5C2 9.072 2.105 9.624 2.316 10.156C2.545 10.734 2.879 11.243 3.318 11.682C3.757 12.121 4.266 12.455 4.844 12.684C5.376 12.895 5.928 13 6.5 13C7.072 13 7.624 12.895 8.156 12.684C8.734 12.455 9.243 12.121 9.682 11.682C10.121 11.243 10.455 10.734 10.684 10.156C10.833 9.781 10.929 9.395 10.973 9L8 9C7.746 9 7.5 8.953 7.264 8.86Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M8.293 6.707C8.098 6.512 8 6.276 8 6L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1C9.199 1 9.874 1.129 10.525 1.386C11.231 1.666 11.852 2.074 12.389 2.611C12.926 3.148 13.334 3.769 13.614 4.475C13.871 5.126 14 5.801 14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L9 7C8.724 7 8.488 6.902 8.293 6.707ZM12.684 4.844C12.455 4.266 12.121 3.757 11.682 3.318C11.243 2.879 10.734 2.545 10.156 2.316C9.781 2.167 9.395 2.071 9 2.027L9 6L12.973 6C12.929 5.605 12.833 5.219 12.684 4.844ZM11.856 8.144C11.952 8.241 12 8.359 12 8.5C12 9.199 11.871 9.874 11.614 10.525C11.334 11.231 10.926 11.852 10.389 12.389C9.852 12.926 9.231 13.334 8.525 13.614C7.874 13.871 7.199 14 6.5 14C5.801 14 5.126 13.871 4.475 13.614C3.769 13.334 3.148 12.926 2.611 12.389C2.074 11.852 1.666 11.231 1.386 10.525C1.129 9.874 1 9.199 1 8.5C1 7.801 1.129 7.126 1.386 6.475C1.666 5.769 2.074 5.148 2.611 4.611C3.148 4.074 3.769 3.666 4.475 3.386C5.126 3.129 5.801 3 6.5 3C6.641 3 6.759 3.048 6.856 3.144C6.952 3.241 7 3.359 7 3.5L7 7C7 7.276 7.098 7.512 7.293 7.707C7.488 7.902 7.724 8 8 8L11.5 8C11.641 8 11.759 8.048 11.856 8.144ZM7.264 8.86C7.007 8.758 6.781 8.609 6.586 8.414C6.391 8.219 6.242 7.993 6.14 7.736C6.047 7.5 6 7.254 6 7L6 4.027C5.605 4.071 5.219 4.167 4.844 4.316C4.266 4.545 3.757 4.879 3.318 5.318C2.879 5.757 2.545 6.266 2.316 6.844C2.105 7.376 2 7.928 2 8.5C2 9.072 2.105 9.624 2.316 10.156C2.545 10.734 2.879 11.243 3.318 11.682C3.757 12.121 4.266 12.455 4.844 12.684C5.376 12.895 5.928 13 6.5 13C7.072 13 7.624 12.895 8.156 12.684C8.734 12.455 9.243 12.121 9.682 11.682C10.121 11.243 10.455 10.734 10.684 10.156C10.833 9.781 10.929 9.395 10.973 9L8 9C7.746 9 7.5 8.953 7.264 8.86Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "pie-chart" (line-round), MIT. https://gentleface.com/icons/pie-chart import SwiftUI struct PieChartIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 8.293, y: 6.707)) p.addCurve(to: CGPoint(x: 8, y: 6), control1: CGPoint(x: 8.098, y: 6.512), control2: CGPoint(x: 8, y: 6.276)) p.addLine(to: CGPoint(x: 8, y: 1.5)) p.addCurve(to: CGPoint(x: 8.144, y: 1.144), control1: CGPoint(x: 8, y: 1.359), control2: CGPoint(x: 8.048, y: 1.241)) p.addCurve(to: CGPoint(x: 8.5, y: 1), control1: CGPoint(x: 8.241, y: 1.048), control2: CGPoint(x: 8.359, y: 1)) p.addCurve(to: CGPoint(x: 10.525, y: 1.386), control1: CGPoint(x: 9.199, y: 1), control2: CGPoint(x: 9.874, y: 1.129)) p.addCurve(to: CGPoint(x: 12.389, y: 2.611), control1: CGPoint(x: 11.231, y: 1.666), control2: CGPoint(x: 11.852, y: 2.074)) p.addCurve(to: CGPoint(x: 13.614, y: 4.475), control1: CGPoint(x: 12.926, y: 3.148), control2: CGPoint(x: 13.334, y: 3.769)) p.addCurve(to: CGPoint(x: 14, y: 6.5), control1: CGPoint(x: 13.871, y: 5.126), control2: CGPoint(x: 14, y: 5.801)) p.addCurve(to: CGPoint(x: 13.856, y: 6.856), control1: CGPoint(x: 14, y: 6.641), control2: CGPoint(x: 13.952, y: 6.759)) p.addCurve(to: CGPoint(x: 13.5, y: 7), control1: CGPoint(x: 13.759, y: 6.952), control2: CGPoint(x: 13.641, y: 7)) p.addLine(to: CGPoint(x: 9, y: 7)) p.addCurve(to: CGPoint(x: 8.293, y: 6.707), control1: CGPoint(x: 8.724, y: 7), control2: CGPoint(x: 8.488, y: 6.902)) p.closeSubpath() p.move(to: CGPoint(x: 12.684, y: 4.844)) p.addCurve(to: CGPoint(x: 11.682, y: 3.318), control1: CGPoint(x: 12.455, y: 4.266), control2: CGPoint(x: 12.121, y: 3.757)) p.addCurve(to: CGPoint(x: 10.156, y: 2.316), control1: CGPoint(x: 11.243, y: 2.879), control2: CGPoint(x: 10.734, y: 2.545)) p.addCurve(to: CGPoint(x: 9, y: 2.027), control1: CGPoint(x: 9.781, y: 2.167), control2: CGPoint(x: 9.395, y: 2.071)) p.addLine(to: CGPoint(x: 9, y: 6)) p.addLine(to: CGPoint(x: 12.973, y: 6)) p.addCurve(to: CGPoint(x: 12.684, y: 4.844), control1: CGPoint(x: 12.929, y: 5.605), control2: CGPoint(x: 12.833, y: 5.219)) p.closeSubpath() p.move(to: CGPoint(x: 11.856, y: 8.144)) p.addCurve(to: CGPoint(x: 12, y: 8.5), control1: CGPoint(x: 11.952, y: 8.241), control2: CGPoint(x: 12, y: 8.359)) p.addCurve(to: CGPoint(x: 11.614, y: 10.525), control1: CGPoint(x: 12, y: 9.199), control2: CGPoint(x: 11.871, y: 9.874)) p.addCurve(to: CGPoint(x: 10.389, y: 12.389), control1: CGPoint(x: 11.334, y: 11.231), control2: CGPoint(x: 10.926, y: 11.852)) p.addCurve(to: CGPoint(x: 8.525, y: 13.614), control1: CGPoint(x: 9.852, y: 12.926), control2: CGPoint(x: 9.231, y: 13.334)) p.addCurve(to: CGPoint(x: 6.5, y: 14), control1: CGPoint(x: 7.874, y: 13.871), control2: CGPoint(x: 7.199, y: 14)) p.addCurve(to: CGPoint(x: 4.475, y: 13.614), control1: CGPoint(x: 5.801, y: 14), control2: CGPoint(x: 5.126, y: 13.871)) p.addCurve(to: CGPoint(x: 2.611, y: 12.389), control1: CGPoint(x: 3.769, y: 13.334), control2: CGPoint(x: 3.148, y: 12.926)) p.addCurve(to: CGPoint(x: 1.386, y: 10.525), control1: CGPoint(x: 2.074, y: 11.852), control2: CGPoint(x: 1.666, y: 11.231)) p.addCurve(to: CGPoint(x: 1, y: 8.5), control1: CGPoint(x: 1.129, y: 9.874), control2: CGPoint(x: 1, y: 9.199)) p.addCurve(to: CGPoint(x: 1.386, y: 6.475), control1: CGPoint(x: 1, y: 7.801), control2: CGPoint(x: 1.129, y: 7.126)) p.addCurve(to: CGPoint(x: 2.611, y: 4.611), control1: CGPoint(x: 1.666, y: 5.769), control2: CGPoint(x: 2.074, y: 5.148)) p.addCurve(to: CGPoint(x: 4.475, y: 3.386), control1: CGPoint(x: 3.148, y: 4.074), control2: CGPoint(x: 3.769, y: 3.666)) p.addCurve(to: CGPoint(x: 6.5, y: 3), control1: CGPoint(x: 5.126, y: 3.129), control2: CGPoint(x: 5.801, y: 3)) p.addCurve(to: CGPoint(x: 6.856, y: 3.144), control1: CGPoint(x: 6.641, y: 3), control2: CGPoint(x: 6.759, y: 3.048)) p.addCurve(to: CGPoint(x: 7, y: 3.5), control1: CGPoint(x: 6.952, y: 3.241), control2: CGPoint(x: 7, y: 3.359)) p.addLine(to: CGPoint(x: 7, y: 7)) p.addCurve(to: CGPoint(x: 7.293, y: 7.707), control1: CGPoint(x: 7, y: 7.276), control2: CGPoint(x: 7.098, y: 7.512)) p.addCurve(to: CGPoint(x: 8, y: 8), control1: CGPoint(x: 7.488, y: 7.902), control2: CGPoint(x: 7.724, y: 8)) p.addLine(to: CGPoint(x: 11.5, y: 8)) p.addCurve(to: CGPoint(x: 11.856, y: 8.144), control1: CGPoint(x: 11.641, y: 8), control2: CGPoint(x: 11.759, y: 8.048)) p.closeSubpath() p.move(to: CGPoint(x: 7.264, y: 8.86)) p.addCurve(to: CGPoint(x: 6.586, y: 8.414), control1: CGPoint(x: 7.007, y: 8.758), control2: CGPoint(x: 6.781, y: 8.609)) p.addCurve(to: CGPoint(x: 6.14, y: 7.736), control1: CGPoint(x: 6.391, y: 8.219), control2: CGPoint(x: 6.242, y: 7.993)) p.addCurve(to: CGPoint(x: 6, y: 7), control1: CGPoint(x: 6.047, y: 7.5), control2: CGPoint(x: 6, y: 7.254)) p.addLine(to: CGPoint(x: 6, y: 4.027)) p.addCurve(to: CGPoint(x: 4.844, y: 4.316), control1: CGPoint(x: 5.605, y: 4.071), control2: CGPoint(x: 5.219, y: 4.167)) p.addCurve(to: CGPoint(x: 3.318, y: 5.318), control1: CGPoint(x: 4.266, y: 4.545), control2: CGPoint(x: 3.757, y: 4.879)) p.addCurve(to: CGPoint(x: 2.316, y: 6.844), control1: CGPoint(x: 2.879, y: 5.757), control2: CGPoint(x: 2.545, y: 6.266)) p.addCurve(to: CGPoint(x: 2, y: 8.5), control1: CGPoint(x: 2.105, y: 7.376), control2: CGPoint(x: 2, y: 7.928)) p.addCurve(to: CGPoint(x: 2.316, y: 10.156), control1: CGPoint(x: 2, y: 9.072), control2: CGPoint(x: 2.105, y: 9.624)) p.addCurve(to: CGPoint(x: 3.318, y: 11.682), control1: CGPoint(x: 2.545, y: 10.734), control2: CGPoint(x: 2.879, y: 11.243)) p.addCurve(to: CGPoint(x: 4.844, y: 12.684), control1: CGPoint(x: 3.757, y: 12.121), control2: CGPoint(x: 4.266, y: 12.455)) p.addCurve(to: CGPoint(x: 6.5, y: 13), control1: CGPoint(x: 5.376, y: 12.895), control2: CGPoint(x: 5.928, y: 13)) p.addCurve(to: CGPoint(x: 8.156, y: 12.684), control1: CGPoint(x: 7.072, y: 13), control2: CGPoint(x: 7.624, y: 12.895)) p.addCurve(to: CGPoint(x: 9.682, y: 11.682), control1: CGPoint(x: 8.734, y: 12.455), control2: CGPoint(x: 9.243, y: 12.121)) p.addCurve(to: CGPoint(x: 10.684, y: 10.156), control1: CGPoint(x: 10.121, y: 11.243), control2: CGPoint(x: 10.455, y: 10.734)) p.addCurve(to: CGPoint(x: 10.973, y: 9), control1: CGPoint(x: 10.833, y: 9.781), control2: CGPoint(x: 10.929, y: 9.395)) p.addLine(to: CGPoint(x: 8, y: 9)) p.addCurve(to: CGPoint(x: 7.264, y: 8.86), control1: CGPoint(x: 7.746, y: 9), control2: CGPoint(x: 7.5, y: 8.953)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // PieChartIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "pie-chart" (line-round), MIT. https://gentleface.com/icons/pie-chart import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val PieChartIcon: ImageVector by lazy { ImageVector.Builder( name = "pie-chart", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M8.293 6.707C8.098 6.512 8 6.276 8 6L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1C9.199 1 9.874 1.129 10.525 1.386C11.231 1.666 11.852 2.074 12.389 2.611C12.926 3.148 13.334 3.769 13.614 4.475C13.871 5.126 14 5.801 14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L9 7C8.724 7 8.488 6.902 8.293 6.707ZM12.684 4.844C12.455 4.266 12.121 3.757 11.682 3.318C11.243 2.879 10.734 2.545 10.156 2.316C9.781 2.167 9.395 2.071 9 2.027L9 6L12.973 6C12.929 5.605 12.833 5.219 12.684 4.844ZM11.856 8.144C11.952 8.241 12 8.359 12 8.5C12 9.199 11.871 9.874 11.614 10.525C11.334 11.231 10.926 11.852 10.389 12.389C9.852 12.926 9.231 13.334 8.525 13.614C7.874 13.871 7.199 14 6.5 14C5.801 14 5.126 13.871 4.475 13.614C3.769 13.334 3.148 12.926 2.611 12.389C2.074 11.852 1.666 11.231 1.386 10.525C1.129 9.874 1 9.199 1 8.5C1 7.801 1.129 7.126 1.386 6.475C1.666 5.769 2.074 5.148 2.611 4.611C3.148 4.074 3.769 3.666 4.475 3.386C5.126 3.129 5.801 3 6.5 3C6.641 3 6.759 3.048 6.856 3.144C6.952 3.241 7 3.359 7 3.5L7 7C7 7.276 7.098 7.512 7.293 7.707C7.488 7.902 7.724 8 8 8L11.5 8C11.641 8 11.759 8.048 11.856 8.144ZM7.264 8.86C7.007 8.758 6.781 8.609 6.586 8.414C6.391 8.219 6.242 7.993 6.14 7.736C6.047 7.5 6 7.254 6 7L6 4.027C5.605 4.071 5.219 4.167 4.844 4.316C4.266 4.545 3.757 4.879 3.318 5.318C2.879 5.757 2.545 6.266 2.316 6.844C2.105 7.376 2 7.928 2 8.5C2 9.072 2.105 9.624 2.316 10.156C2.545 10.734 2.879 11.243 3.318 11.682C3.757 12.121 4.266 12.455 4.844 12.684C5.376 12.895 5.928 13 6.5 13C7.072 13 7.624 12.895 8.156 12.684C8.734 12.455 9.243 12.121 9.682 11.682C10.121 11.243 10.455 10.734 10.684 10.156C10.833 9.781 10.929 9.395 10.973 9L8 9C7.746 9 7.5 8.953 7.264 8.86Z"), fill = SolidColor(Color.Black), ).build() } // Icon(PieChartIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "pie-chart" (line-round), MIT. https://gentleface.com/icons/pie-chart import 'package:flutter/widgets.dart'; class PieChartIcon extends StatelessWidget { const PieChartIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _PieChartIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _PieChartIconPainter extends CustomPainter { _PieChartIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(8.293, 6.707) ..cubicTo(8.098, 6.512, 8, 6.276, 8, 6) ..lineTo(8, 1.5) ..cubicTo(8, 1.359, 8.048, 1.241, 8.144, 1.144) ..cubicTo(8.241, 1.048, 8.359, 1, 8.5, 1) ..cubicTo(9.199, 1, 9.874, 1.129, 10.525, 1.386) ..cubicTo(11.231, 1.666, 11.852, 2.074, 12.389, 2.611) ..cubicTo(12.926, 3.148, 13.334, 3.769, 13.614, 4.475) ..cubicTo(13.871, 5.126, 14, 5.801, 14, 6.5) ..cubicTo(14, 6.641, 13.952, 6.759, 13.856, 6.856) ..cubicTo(13.759, 6.952, 13.641, 7, 13.5, 7) ..lineTo(9, 7) ..cubicTo(8.724, 7, 8.488, 6.902, 8.293, 6.707) ..close() ..moveTo(12.684, 4.844) ..cubicTo(12.455, 4.266, 12.121, 3.757, 11.682, 3.318) ..cubicTo(11.243, 2.879, 10.734, 2.545, 10.156, 2.316) ..cubicTo(9.781, 2.167, 9.395, 2.071, 9, 2.027) ..lineTo(9, 6) ..lineTo(12.973, 6) ..cubicTo(12.929, 5.605, 12.833, 5.219, 12.684, 4.844) ..close() ..moveTo(11.856, 8.144) ..cubicTo(11.952, 8.241, 12, 8.359, 12, 8.5) ..cubicTo(12, 9.199, 11.871, 9.874, 11.614, 10.525) ..cubicTo(11.334, 11.231, 10.926, 11.852, 10.389, 12.389) ..cubicTo(9.852, 12.926, 9.231, 13.334, 8.525, 13.614) ..cubicTo(7.874, 13.871, 7.199, 14, 6.5, 14) ..cubicTo(5.801, 14, 5.126, 13.871, 4.475, 13.614) ..cubicTo(3.769, 13.334, 3.148, 12.926, 2.611, 12.389) ..cubicTo(2.074, 11.852, 1.666, 11.231, 1.386, 10.525) ..cubicTo(1.129, 9.874, 1, 9.199, 1, 8.5) ..cubicTo(1, 7.801, 1.129, 7.126, 1.386, 6.475) ..cubicTo(1.666, 5.769, 2.074, 5.148, 2.611, 4.611) ..cubicTo(3.148, 4.074, 3.769, 3.666, 4.475, 3.386) ..cubicTo(5.126, 3.129, 5.801, 3, 6.5, 3) ..cubicTo(6.641, 3, 6.759, 3.048, 6.856, 3.144) ..cubicTo(6.952, 3.241, 7, 3.359, 7, 3.5) ..lineTo(7, 7) ..cubicTo(7, 7.276, 7.098, 7.512, 7.293, 7.707) ..cubicTo(7.488, 7.902, 7.724, 8, 8, 8) ..lineTo(11.5, 8) ..cubicTo(11.641, 8, 11.759, 8.048, 11.856, 8.144) ..close() ..moveTo(7.264, 8.86) ..cubicTo(7.007, 8.758, 6.781, 8.609, 6.586, 8.414) ..cubicTo(6.391, 8.219, 6.242, 7.993, 6.14, 7.736) ..cubicTo(6.047, 7.5, 6, 7.254, 6, 7) ..lineTo(6, 4.027) ..cubicTo(5.605, 4.071, 5.219, 4.167, 4.844, 4.316) ..cubicTo(4.266, 4.545, 3.757, 4.879, 3.318, 5.318) ..cubicTo(2.879, 5.757, 2.545, 6.266, 2.316, 6.844) ..cubicTo(2.105, 7.376, 2, 7.928, 2, 8.5) ..cubicTo(2, 9.072, 2.105, 9.624, 2.316, 10.156) ..cubicTo(2.545, 10.734, 2.879, 11.243, 3.318, 11.682) ..cubicTo(3.757, 12.121, 4.266, 12.455, 4.844, 12.684) ..cubicTo(5.376, 12.895, 5.928, 13, 6.5, 13) ..cubicTo(7.072, 13, 7.624, 12.895, 8.156, 12.684) ..cubicTo(8.734, 12.455, 9.243, 12.121, 9.682, 11.682) ..cubicTo(10.121, 11.243, 10.455, 10.734, 10.684, 10.156) ..cubicTo(10.833, 9.781, 10.929, 9.395, 10.973, 9) ..lineTo(8, 9) ..cubicTo(7.746, 9, 7.5, 8.953, 7.264, 8.86) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_PieChartIconPainter old) => old.color != color; } ```