Data Bar Vertical Edit icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M19.0996 12.6699C19.9922 11.7773 21.4394 11.7773 22.332 12.6699C23.2245 13.5625 23.2246 15.0098 22.332 15.9023L16.4297 21.8047C16.0856 22.1486 15.6546 22.3927 15.1826 22.5107L13.3516 22.9688C12.5556 23.1676 11.8345 22.4463 12.0332 21.6504L12.4912 19.8193C12.6092 19.3473 12.8533 18.9163 13.1973 18.5723L19.0996 12.6699ZM5.24902 11C6.49114 11 7.49802 12.0069 7.49805 13.249V18.751C7.49801 19.9931 6.49114 21 5.24902 21C4.00694 21 3.00003 19.9931 3 18.751V13.249C3.00003 12.0069 4.00694 11 5.24902 11ZM11.749 7C12.9911 7 13.998 8.00692 13.998 9.24902V16.3574L12.498 17.8574V9.24902C12.498 8.83534 12.1627 8.5 11.749 8.5C11.3354 8.50003 11 8.83536 11 9.24902V18.751C11 19.096 11.2343 19.3828 11.5518 19.4697C11.5417 19.5054 11.5305 19.5412 11.5215 19.5771L11.1846 20.9248C10.2161 20.674 9.50003 19.7978 9.5 18.751V9.24902C9.50003 8.00694 10.5069 7.00003 11.749 7ZM5.24902 12.5C4.83536 12.5 4.50003 12.8354 4.5 13.249V18.751C4.50003 19.1646 4.83536 19.5 5.24902 19.5C5.66271 19.5 5.99801 19.1647 5.99805 18.751V13.249C5.99802 12.8353 5.66271 12.5 5.24902 12.5ZM18.249 3C19.4911 3 20.498 4.00692 20.498 5.24902V11.0078C19.9752 11.0425 19.4593 11.2017 18.998 11.4854V5.24902C18.998 4.83534 18.6627 4.5 18.249 4.5C17.8354 4.50003 17.5 4.83536 17.5 5.24902V12.8555L16 14.3555V5.24902C16 4.00694 17.0069 3.00003 18.249 3Z" 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_edit_24_regular.svg";

Details