Arrows Bidirectional icon
The Arrows Bidirectional icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrows Bidirectional 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 { ArrowsBidirectional24Regular, ArrowsBidirectional24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowsBidirectional24Regular aria-label="Arrows Bidirectional" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrows_bidirectional_24_regular.svg" width="24" height="24" alt="Arrows Bidirectional"> 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="M15.0017 8.99871H9.00469L9.00568 6.74954C9.00568 6.08985 8.21532 5.75151 7.73799 6.20686L2.23426 11.4572C1.92451 11.7527 1.92452 12.2471 2.23428 12.5426L7.73801 17.7926L7.82027 17.8612C8.30072 18.2093 9.00568 17.8729 9.00568 17.2499L9.00469 14.9997H15.0017L15.0023 17.2499C15.0023 17.9098 15.793 18.248 16.2703 17.7923L21.7674 12.5423C22.0768 12.2468 22.0768 11.7529 21.7675 11.4575L16.2703 6.20717C15.7931 5.75139 15.0023 6.08963 15.0023 6.74954L15.0017 8.99871ZM3.8377 11.9997L7.5047 8.50071L7.50568 9.74933C7.50568 10.1635 7.84147 10.4993 8.25568 10.4993H15.7523L15.854 10.4925C16.2201 10.4428 16.5023 10.129 16.5023 9.74933L16.5017 8.50271L20.1627 11.9997L16.5017 15.4957L16.5023 14.2504C16.5023 13.8362 16.1665 13.5004 15.7523 13.5004H8.25568L8.15391 13.5073C7.78783 13.5569 7.50568 13.8707 7.50568 14.2504L7.5047 15.4977L3.8377 11.9997Z" 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/arrows_bidirectional_24_regular.svg";Details
| Name | Arrows Bidirectional |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrows_bidirectional_24_regular.svg |
| Filled file | ic_fluent_arrows_bidirectional_24_filled.svg |
| React components | ArrowsBidirectional24Regular, ArrowsBidirectional24Filled |
| License | MIT (© Microsoft Corporation) |