Data Funnel icon

Use the Data Funnel 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 { DataFunnel24Regular, DataFunnel24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M22.002 4.75187C22.002 6.27169 20.7699 7.50374 19.2501 7.50374L4.75155 7.50374C3.23173 7.50374 1.99968 6.27169 1.99968 4.75187C1.99968 3.23205 3.23173 2 4.75155 2L19.2501 2C20.7699 2 22.002 3.23205 22.002 4.75187ZM20.002 11.7519C20.002 13.2717 18.7699 14.5037 17.2501 14.5037L6.75155 14.5037C5.23173 14.5037 3.99968 13.2717 3.99968 11.7519C3.99968 10.2321 5.23173 9 6.75155 9H17.2501C18.7699 9 20.002 10.2321 20.002 11.7519ZM17.002 18.7519C17.002 20.2717 15.7699 21.5037 14.2501 21.5037H9.75155C8.23173 21.5037 6.99968 20.2717 6.99968 18.7519C6.99968 17.2321 8.23173 16 9.75155 16H14.2501C15.7699 16 17.002 17.2321 17.002 18.7519ZM20.502 4.75187C20.502 4.06048 19.9415 3.5 19.2501 3.5L4.75155 3.5C4.06016 3.5 3.49968 4.06048 3.49968 4.75187C3.49968 5.44326 4.06016 6.00374 4.75155 6.00374L19.2501 6.00374C19.9415 6.00374 20.502 5.44326 20.502 4.75187ZM18.502 11.7519C18.502 11.0605 17.9415 10.5 17.2501 10.5L6.75155 10.5C6.06016 10.5 5.49968 11.0605 5.49968 11.7519C5.49968 12.4433 6.06016 13.0037 6.75155 13.0037L17.2501 13.0037C17.9415 13.0037 18.502 12.4433 18.502 11.7519ZM15.502 18.7519C15.502 18.0605 14.9415 17.5 14.2501 17.5H9.75155C9.06016 17.5 8.49968 18.0605 8.49968 18.7519C8.49968 19.4433 9.06016 20.0037 9.75155 20.0037H14.2501C14.9415 20.0037 15.502 19.4433 15.502 18.7519Z" 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_funnel_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatavizscenarios.