Chart Multiple icon

Use the Chart Multiple 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 { ChartMultiple24Regular, ChartMultiple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChartMultiple24Regular aria-label="Chart Multiple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chart_multiple_24_regular.svg" width="24" height="24" alt="Chart Multiple">

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="M19.9993 9.53713C19.9997 9.50986 19.9999 9.48255 20 9.4552V9.40194C19.9856 5.3115 16.6653 2 12.5715 2C12.5352 2 12.499 2.00026 12.4629 2.00078C12.2015 2.00452 12 2.22363 12 2.48506V9.5C12 9.77614 12.2239 10 12.5 10H19.515C19.7764 10 19.9955 9.79854 19.9993 9.53713ZM13.5 3.57229C16.0307 3.97035 18.0297 5.9694 18.4278 8.5H13.5V3.57229ZM9 10.5V5.68879C6.41263 6.35455 4.5 8.70439 4.5 11.5C4.5 14.8137 7.18629 17.5 10.5 17.5C11.0214 17.5 11.5274 17.4335 12.0098 17.3084C11.4439 17.6939 11.035 18.2929 10.8991 18.9896C10.767 18.9965 10.6339 19 10.5 19C6.35786 19 3 15.6421 3 11.5C3 7.52591 6.09093 4.27375 9.9999 4.0164C10.2754 3.99826 10.5 4.22385 10.5 4.5V10.5C10.5 11.0523 10.9477 11.5 11.5 11.5L17.5 11.5C17.7761 11.5 18.0017 11.7245 17.9836 12.0001C17.9413 12.6432 17.8179 13.2641 17.6235 13.8528C17.5826 13.851 17.5414 13.85 17.5 13.85C16.7633 13.85 16.0967 14.1507 15.6164 14.636C15.9244 14.1346 16.1608 13.5845 16.3112 13L11.5 13C10.1193 13 9 11.8807 9 10.5ZM20 13.5C20 12.6716 20.6716 12 21.5 12C22.3284 12 23 12.6716 23 13.5V21.5C23 22.3284 22.3284 23 21.5 23C20.6716 23 20 22.3284 20 21.5V13.5ZM17.5 15C16.6716 15 16 15.6716 16 16.5V21.5C16 22.3284 16.6716 23 17.5 23C18.3284 23 19 22.3284 19 21.5V16.5C19 15.6716 18.3284 15 17.5 15ZM13.5 18C12.6716 18 12 18.6716 12 19.5V21.5C12 22.3284 12.6716 23 13.5 23C14.3284 23 15 22.3284 15 21.5V19.5C15 18.6716 14.3284 18 13.5 18Z" 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/chart_multiple_24_regular.svg";

Details

Keywords

piechartdatabargraph