Data Bar Vertical Arrow Down icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.24908V11.1735C16.4829 11.06 16.9844 11 17.5 11H17.502V5.24908C17.502 4.83538 17.8373 4.5 18.251 4.5C18.6647 4.5 19.0001 4.83538 19.0001 5.24908V11.174C19.5279 11.2986 20.0308 11.4877 20.5001 11.7323V5.24908C20.5001 4.00695 19.4932 3 18.251 3ZM14.0001 9.24908V12.0217C13.4342 12.384 12.9282 12.8316 12.5001 13.3463V9.24908C12.5001 8.83537 12.1647 8.5 11.751 8.5C11.3373 8.5 11.002 8.83537 11.002 9.24908V17.3391C11.0007 17.3926 11 17.4462 11 17.5C11 17.5538 11.0007 17.6074 11.002 17.6609V18.7509C11.002 18.975 11.1004 19.1761 11.2563 19.3134C11.4294 19.9105 11.6859 20.4722 12.0122 20.985C11.9265 20.9949 11.8394 21 11.751 21C10.5089 21 9.50195 19.9931 9.50195 18.7509V9.24908C9.50195 8.00695 10.5089 7 11.751 7C12.9932 7 14.0001 8.00695 14.0001 9.24908ZM5.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 11ZM5.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.5ZM23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5ZM18 14.5C18 14.2239 17.7761 14 17.5 14C17.2239 14 17 14.2239 17 14.5V19.2929L15.3536 17.6464C15.1583 17.4512 14.8417 17.4512 14.6464 17.6464C14.4512 17.8417 14.4512 18.1583 14.6464 18.3536L17.1464 20.8536C17.3417 21.0488 17.6583 21.0488 17.8536 20.8536L20.3536 18.3536C20.5488 18.1583 20.5488 17.8417 20.3536 17.6464C20.1583 17.4512 19.8417 17.4512 19.6464 17.6464L18 19.2929V14.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_arrow_down_24_regular.svg";

Details

Keywords

databarverticalascendingmeasuregraphdownloadarrow