Data Whisker icon

Use the Data Whisker 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 { DataWhisker24Regular, DataWhisker24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M14.75 4C14.3358 4 14 4.33579 14 4.75C14 5.16421 14.3358 5.5 14.75 5.5H15.75V7H15.25C14.0074 7 13 8.00736 13 9.25V16.25C13 17.4926 14.0074 18.5 15.25 18.5H15.75V20H14.75C14.3358 20 14 20.3358 14 20.75C14 21.1642 14.3358 21.5 14.75 21.5H18.25C18.6642 21.5 19 21.1642 19 20.75C19 20.3358 18.6642 20 18.25 20H17.25V18.5H17.75C18.9926 18.5 20 17.4926 20 16.25V9.25C20 8.00736 18.9926 7 17.75 7H17.25V5.5H18.25C18.6642 5.5 19 5.16421 19 4.75C19 4.33579 18.6642 4 18.25 4H14.75ZM14.5 9.25C14.5 8.83579 14.8358 8.5 15.25 8.5H17.75C18.1642 8.5 18.5 8.83579 18.5 9.25V11H14.5V9.25ZM14.5 12.5H18.5V16.25C18.5 16.6642 18.1642 17 17.75 17H15.25C14.8358 17 14.5 16.6642 14.5 16.25V12.5ZM5.75 2C5.33579 2 5 2.33579 5 2.75C5 3.16421 5.33579 3.5 5.75 3.5H6.75V5H6.25C5.00736 5 4 6.00736 4 7.25V14.25C4 15.4926 5.00736 16.5 6.25 16.5H6.75V18H5.75C5.33579 18 5 18.3358 5 18.75C5 19.1642 5.33579 19.5 5.75 19.5H9.25C9.66421 19.5 10 19.1642 10 18.75C10 18.3358 9.66421 18 9.25 18H8.25V16.5H8.75C9.99264 16.5 11 15.4926 11 14.25V7.25C11 6.00736 9.99264 5 8.75 5H8.25V3.5H9.25C9.66421 3.5 10 3.16421 10 2.75C10 2.33579 9.66421 2 9.25 2H5.75ZM6.25 15C5.83579 15 5.5 14.6642 5.5 14.25V12.5H9.5V14.25C9.5 14.6642 9.16421 15 8.75 15H6.25ZM9.5 11H5.5V7.25C5.5 6.83579 5.83579 6.5 6.25 6.5H8.75C9.16421 6.5 9.5 6.83579 9.5 7.25V11Z" 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_whisker_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraph.usedindatavizscenarios.