Data Bar Vertical icon

Use the Data Bar Vertical 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 { DataBarVertical24Regular, DataBarVertical24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DataBarVertical24Regular aria-label="Data Bar Vertical" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_data_bar_vertical_24_regular.svg" width="24" height="24" alt="Data Bar Vertical">

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="M5.74908 3C6.99122 3 7.99817 4.00695 7.99817 5.24908V18.7509C7.99817 19.9931 6.99122 21 5.74908 21C4.50695 21 3.5 19.9931 3.5 18.7509V5.24908C3.5 4.00695 4.50695 3 5.74908 3ZM12.2491 7C13.4912 7 14.4982 8.00695 14.4982 9.24908V18.7509C14.4982 19.9931 13.4912 21 12.2491 21C11.0069 21 10 19.9931 10 18.7509V9.24908C10 8.00695 11.0069 7 12.2491 7ZM18.7491 11C19.9912 11 20.9982 12.0069 20.9982 13.2491V18.7509C20.9982 19.9931 19.9912 21 18.7491 21C17.5069 21 16.5 19.9931 16.5 18.7509V13.2491C16.5 12.0069 17.5069 11 18.7491 11ZM5.74908 4.5C5.33538 4.5 5 4.83538 5 5.24908V18.7509C5 19.1646 5.33538 19.5 5.74908 19.5C6.16279 19.5 6.49817 19.1646 6.49817 18.7509V5.24908C6.49817 4.83538 6.16279 4.5 5.74908 4.5ZM12.2491 8.5C11.8354 8.5 11.5 8.83538 11.5 9.24908V18.7509C11.5 19.1646 11.8354 19.5 12.2491 19.5C12.6628 19.5 12.9982 19.1646 12.9982 18.7509V9.24908C12.9982 8.83538 12.6628 8.5 12.2491 8.5ZM18.7491 12.5C18.3354 12.5 18 12.8354 18 13.2491V18.7509C18 19.1646 18.3354 19.5 18.7491 19.5C19.1628 19.5 19.4982 19.1646 19.4982 18.7509V13.2491C19.4982 12.8354 19.1628 12.5 18.7491 12.5Z" 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_bar_vertical_24_regular.svg";

Details

Keywords

datavizvisualizationchartmaptrendinggraphreport.usedindatavizscenarios.