Arrow Bidirectional Left Right icon

Use the Arrow Bidirectional Left Right 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 { ArrowBidirectionalLeftRight24Regular, ArrowBidirectionalLeftRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowBidirectionalLeftRight24Regular aria-label="Arrow Bidirectional Left Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_bidirectional_left_right_24_regular.svg" width="24" height="24" alt="Arrow Bidirectional Left Right">

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="M9.03033 6.46967C9.32322 6.76256 9.32322 7.23744 9.03033 7.53033L5.56066 11H18.4393L14.9697 7.53033C14.6768 7.23744 14.6768 6.76256 14.9697 6.46967C15.2626 6.17678 15.7374 6.17678 16.0303 6.46967L20.7803 11.2197C21.0732 11.5126 21.0732 11.9874 20.7803 12.2803L16.0303 17.0303C15.7374 17.3232 15.2626 17.3232 14.9697 17.0303C14.6768 16.7374 14.6768 16.2626 14.9697 15.9697L18.4393 12.5H5.56066L9.03033 15.9697C9.32322 16.2626 9.32322 16.7374 9.03033 17.0303C8.73744 17.3232 8.26256 17.3232 7.96967 17.0303L3.21967 12.2803C2.92678 11.9874 2.92678 11.5126 3.21967 11.2197L7.96967 6.46967C8.26256 6.17678 8.73744 6.17678 9.03033 6.46967Z" 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/arrow_bidirectional_left_right_24_regular.svg";

Details

Keywords

leftrightarrowswidth