Data Pie icon

Use the Data Pie icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { DataPie24Regular, DataPie24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataPie24Regular aria-label="Data Pie" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_pie_24_regular.svg" width="24" height="24" alt="Data Pie">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.7276 2.2155C12.8731 2.07426 13.0696 1.99796 13.2723 2.00399C18.0267 2.1455 21.8545 5.97326 21.996 10.7276C22.002 10.9303 21.9257 11.1268 21.7844 11.2723C21.6432 11.4178 21.4491 11.4999 21.2463 11.4999H13.25C12.8358 11.4999 12.5 11.1642 12.5 10.7499V2.75366C12.5 2.55088 12.5821 2.35674 12.7276 2.2155ZM14 3.566V9.99995H20.434C19.9888 6.65788 17.3421 4.01119 14 3.566ZM11 4.76465C11 4.55403 10.9114 4.35312 10.756 4.21103C10.6005 4.06894 10.3925 3.99877 10.1827 4.01768C5.59476 4.43112 2 8.28584 2 12.981C2 17.9516 6.02944 21.981 11 21.981C15.6881 21.981 19.5383 18.3971 19.9615 13.819C19.9809 13.609 19.9109 13.4005 19.7688 13.2447C19.6267 13.0888 19.4256 13 19.2146 13H13.25C12.0074 13 11 11.9926 11 10.75V4.76465ZM3.5 12.981C3.5 9.35271 6.07693 6.32555 9.5 5.63092V10.75C9.5 12.8211 11.1789 14.5 13.25 14.5H18.3462C17.6443 17.9136 14.6216 20.481 11 20.481C6.85786 20.481 3.5 17.1232 3.5 12.981Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/data_pie_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatavizscenarios.