chart pie slice icon

chart-pie-slice from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: chart-pie-slice
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

chart-pie-slice-bold chart-pie-slice-duotone chart-pie-slice-fill chart-pie-slice-light chart-pie-slice-thin

Related icons in Phosphor

chart-bar chart-bar-horizontal chart-donut chart-line chart-line-down chart-line-up chart-pie chart-polar chart-scatter

Use the chart pie slice icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M100 116.43a8 8 0 0 0 4-6.93v-72A8 8 0 0 0 93.34 30a104.06 104.06 0 0 0-67.61 117a8 8 0 0 0 4.52 5.81a7.9 7.9 0 0 0 3.35.74a8 8 0 0 0 4-1.07ZM88 49.62v55.26l-47.88 27.63C40 131 40 129.48 40 128a88.12 88.12 0 0 1 48-78.38M128 24a8 8 0 0 0-8 8v91.82l-78.81 45.91a8 8 0 0 0-2.87 11A104 104 0 1 0 128 24m0 192a88.47 88.47 0 0 1-71.49-36.68l75.52-44a8 8 0 0 0 4-6.92V40.36A88 88 0 0 1 128 216"/></svg>

React

import type { SVGProps } from "react";

export function PhChartPieSlice(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M100 116.43a8 8 0 0 0 4-6.93v-72A8 8 0 0 0 93.34 30a104.06 104.06 0 0 0-67.61 117a8 8 0 0 0 4.52 5.81a7.9 7.9 0 0 0 3.35.74a8 8 0 0 0 4-1.07ZM88 49.62v55.26l-47.88 27.63C40 131 40 129.48 40 128a88.12 88.12 0 0 1 48-78.38M128 24a8 8 0 0 0-8 8v91.82l-78.81 45.91a8 8 0 0 0-2.87 11A104 104 0 1 0 128 24m0 192a88.47 88.47 0 0 1-71.49-36.68l75.52-44a8 8 0 0 0 4-6.92V40.36A88 88 0 0 1 128 216"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M100 116.43a8 8 0 0 0 4-6.93v-72A8 8 0 0 0 93.34 30a104.06 104.06 0 0 0-67.61 117a8 8 0 0 0 4.52 5.81a7.9 7.9 0 0 0 3.35.74a8 8 0 0 0 4-1.07ZM88 49.62v55.26l-47.88 27.63C40 131 40 129.48 40 128a88.12 88.12 0 0 1 48-78.38M128 24a8 8 0 0 0-8 8v91.82l-78.81 45.91a8 8 0 0 0-2.87 11A104 104 0 1 0 128 24m0 192a88.47 88.47 0 0 1-71.49-36.68l75.52-44a8 8 0 0 0 4-6.92V40.36A88 88 0 0 1 128 216"/></svg>
</template>

CSS

.icon-chart-pie-slice {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M100%20116.43a8%208%200%200%200%204-6.93v-72A8%208%200%200%200%2093.34%2030a104.06%20104.06%200%200%200-67.61%20117a8%208%200%200%200%204.52%205.81a7.9%207.9%200%200%200%203.35.74a8%208%200%200%200%204-1.07ZM88%2049.62v55.26l-47.88%2027.63C40%20131%2040%20129.48%2040%20128a88.12%2088.12%200%200%201%2048-78.38M128%2024a8%208%200%200%200-8%208v91.82l-78.81%2045.91a8%208%200%200%200-2.87%2011A104%20104%200%201%200%20128%2024m0%20192a88.47%2088.47%200%200%201-71.49-36.68l75.52-44a8%208%200%200%200%204-6.92V40.36A88%2088%200%200%201%20128%20216%22%2F%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M100%20116.43a8%208%200%200%200%204-6.93v-72A8%208%200%200%200%2093.34%2030a104.06%20104.06%200%200%200-67.61%20117a8%208%200%200%200%204.52%205.81a7.9%207.9%200%200%200%203.35.74a8%208%200%200%200%204-1.07ZM88%2049.62v55.26l-47.88%2027.63C40%20131%2040%20129.48%2040%20128a88.12%2088.12%200%200%201%2048-78.38M128%2024a8%208%200%200%200-8%208v91.82l-78.81%2045.91a8%208%200%200%200-2.87%2011A104%20104%200%201%200%20128%2024m0%20192a88.47%2088.47%200%200%201-71.49-36.68l75.52-44a8%208%200%200%200%204-6.92V40.36A88%2088%200%200%201%20128%20216%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/chart-pie-slice.svg?color=%231a73e8&size=48