Data Bar Vertical Ascending icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M18.251 3C17.0089 3 16.002 4.00695 16.002 5.24908V18.7509C16.002 19.9931 17.0089 21 18.251 21C19.4932 21 20.5001 19.9931 20.5001 18.7509V5.24908C20.5001 4.00695 19.4932 3 18.251 3ZM11.751 7C10.5089 7 9.50195 8.00695 9.50195 9.24908V18.7509C9.50195 19.9931 10.5089 21 11.751 21C12.9932 21 14.0001 19.9931 14.0001 18.7509V9.24908C14.0001 8.00695 12.9932 7 11.751 7ZM5.25104 11C4.0089 11 3.00195 12.0069 3.00195 13.2491V18.7509C3.00195 19.9931 4.0089 21 5.25104 21C6.49317 21 7.50012 19.9931 7.50012 18.7509V13.2491C7.50012 12.0069 6.49317 11 5.25104 11ZM18.251 4.5C18.6647 4.5 19.0001 4.83538 19.0001 5.24908V18.7509C19.0001 19.1646 18.6647 19.5 18.251 19.5C17.8373 19.5 17.502 19.1646 17.502 18.7509V5.24908C17.502 4.83538 17.8373 4.5 18.251 4.5ZM11.751 8.5C12.1647 8.5 12.5001 8.83537 12.5001 9.24908V18.7509C12.5001 19.1646 12.1647 19.5 11.751 19.5C11.3373 19.5 11.002 19.1646 11.002 18.7509V9.24908C11.002 8.83537 11.3373 8.5 11.751 8.5ZM5.25104 12.5C5.66474 12.5 6.00012 12.8354 6.00012 13.2491V18.7509C6.00012 19.1646 5.66474 19.5 5.25104 19.5C4.83733 19.5 4.50195 19.1646 4.50195 18.7509V13.2491C4.50195 12.8354 4.83733 12.5 5.25104 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_ascending_24_regular.svg";

Details

Keywords

databarverticalascendingmeasuregraph