pie-chart icon

Pie chart: pie chart, proportion, pie graph. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>

React

// Gentleface "pie-chart" (line-round), MIT. https://gentleface.com/icons/pie-chart
import type { SVGProps } from 'react';

export function PieChartIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path 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" />
    </svg>
  );
}

Vue

Vue: see /icons/pie-chart.md

Svelte

Svelte: see /icons/pie-chart.md

HTML img

HTML img: see /icons/pie-chart.md

CSS

CSS: see /icons/pie-chart.md

Data URL

Data URL: see /icons/pie-chart.md

Sprite

Sprite: see /icons/pie-chart.md

SwiftUI

SwiftUI: see /icons/pie-chart.md

Compose

Compose: see /icons/pie-chart.md

Android XML

Android XML: see /icons/pie-chart.md

Flutter

Flutter: see /icons/pie-chart.md

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. 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. More in how to use.

Meaning

Use it for

pie chart, proportion, pie graph

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)

Tags

chart, pie, donut, statistics, percentage, report

Category

Charts & data

Component name

PieChartIcon

History

2026-10-14 added

Family 33

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

More charts & data icons

chart-legend flowchart gauge node-graph word-cloud · all charts & data icons

For agents

Metadata: /icons/pie-chart.json · Markdown: /icons/pie-chart.md · SVG: https://gentleface.com/svg/{style}/16/pie-chart.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/pie-chart.png

pie-chart icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp