chart pie icon
chart-pie from Font Awesome 6 Solid by Dave Gandy · Regular · Business · CC-BY-4.0 Attribution required.
- Name
- chart-pie
- Set
- Font Awesome 6 Solid
- Style
- Regular
- Category
- Business
- Viewbox
- 576×512
- License
- CC BY 4.0
The same icon in other sets
chart-pieCarbonchart-pieFramework7 Iconschart-pieFont Awesome Solidchart-pie-outlineFlowbite Iconschart-pieHealth Iconschart-pieHeroIconschart-pieIconParkchart-pieIconPark Outlinechart-pieIconPark Solidchart-pieIconPark TwoTonechart-pieLine Awesomechart-pieLucidechart-pieMajesticonschart-pieMaterial Design Iconschart-pie-fillMingCute Iconchart-pieMyna UI Iconschart-piePhosphorchart-piePrime Iconschart-pieTabler Iconschart-pieTDesign Iconschart-pieUniconschart-pieUnicons Monochromechart-pieUnicons Solid
More business icons from Font Awesome 6 Solid
Use the chart pie icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M304 240V16.6c0-9 7-16.6 16-16.6c123.7 0 224 100.3 224 224c0 9-7.6 16-16.6 16zM32 272c0-121.3 90.1-221.7 207-237.7c9.2-1.3 17 6.1 17 15.4V288l156.5 156.5c6.7 6.7 6.2 17.7-1.5 23.1c-39.2 28-87.2 44.4-139 44.4c-132.5 0-240-107.4-240-240m526.4 16c9.3 0 16.6 7.8 15.4 17c-7.7 55.9-34.6 105.6-73.9 142.3c-6 5.6-15.4 5.2-21.2-.7L320 288z"/></svg>
React
import type { SVGProps } from "react";
export function Fa6SolidChartPie(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M304 240V16.6c0-9 7-16.6 16-16.6c123.7 0 224 100.3 224 224c0 9-7.6 16-16.6 16zM32 272c0-121.3 90.1-221.7 207-237.7c9.2-1.3 17 6.1 17 15.4V288l156.5 156.5c6.7 6.7 6.2 17.7-1.5 23.1c-39.2 28-87.2 44.4-139 44.4c-132.5 0-240-107.4-240-240m526.4 16c9.3 0 16.6 7.8 15.4 17c-7.7 55.9-34.6 105.6-73.9 142.3c-6 5.6-15.4 5.2-21.2-.7L320 288z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M304 240V16.6c0-9 7-16.6 16-16.6c123.7 0 224 100.3 224 224c0 9-7.6 16-16.6 16zM32 272c0-121.3 90.1-221.7 207-237.7c9.2-1.3 17 6.1 17 15.4V288l156.5 156.5c6.7 6.7 6.2 17.7-1.5 23.1c-39.2 28-87.2 44.4-139 44.4c-132.5 0-240-107.4-240-240m526.4 16c9.3 0 16.6 7.8 15.4 17c-7.7 55.9-34.6 105.6-73.9 142.3c-6 5.6-15.4 5.2-21.2-.7L320 288z"/></svg> </template>
CSS
.icon-chart-pie {
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%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M304%20240V16.6c0-9%207-16.6%2016-16.6c123.7%200%20224%20100.3%20224%20224c0%209-7.6%2016-16.6%2016zM32%20272c0-121.3%2090.1-221.7%20207-237.7c9.2-1.3%2017%206.1%2017%2015.4V288l156.5%20156.5c6.7%206.7%206.2%2017.7-1.5%2023.1c-39.2%2028-87.2%2044.4-139%2044.4c-132.5%200-240-107.4-240-240m526.4%2016c9.3%200%2016.6%207.8%2015.4%2017c-7.7%2055.9-34.6%20105.6-73.9%20142.3c-6%205.6-15.4%205.2-21.2-.7L320%20288z%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%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M304%20240V16.6c0-9%207-16.6%2016-16.6c123.7%200%20224%20100.3%20224%20224c0%209-7.6%2016-16.6%2016zM32%20272c0-121.3%2090.1-221.7%20207-237.7c9.2-1.3%2017%206.1%2017%2015.4V288l156.5%20156.5c6.7%206.7%206.2%2017.7-1.5%2023.1c-39.2%2028-87.2%2044.4-139%2044.4c-132.5%200-240-107.4-240-240m526.4%2016c9.3%200%2016.6%207.8%2015.4%2017c-7.7%2055.9-34.6%20105.6-73.9%20142.3c-6%205.6-15.4%205.2-21.2-.7L320%20288z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/chart-pie.svg?color=%231a73e8&size=48
