Arrow Turn Bidirectional Down Right icon
Used for directions. The Arrow Turn Bidirectional Down Right 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 Arrow Turn Bidirectional Down 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 { ArrowTurnBidirectionalDownRight24Regular, ArrowTurnBidirectionalDownRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowTurnBidirectionalDownRight24Regular aria-label="Arrow Turn Bidirectional Down Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_turn_bidirectional_down_right_24_regular.svg" width="24" height="24" alt="Arrow Turn Bidirectional Down 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="M17.2803 3.21964C16.9874 2.92676 16.5125 2.92679 16.2196 3.2197C15.9268 3.51261 15.9268 3.98748 16.2197 4.28036L19.4397 7.5H11.75C9.40279 7.5 7.5 9.40279 7.5 11.75V19.439L4.2803 16.2196C3.9874 15.9268 3.51252 15.9268 3.21964 16.2197C2.92676 16.5126 2.92679 16.9875 3.2197 17.2804L7.72015 21.7804C8.01306 22.0732 8.48792 22.0732 8.7808 21.7803L13.2803 17.2806C13.5732 16.9877 13.5732 16.5128 13.2803 16.22C12.9874 15.9271 12.5125 15.9271 12.2197 16.22L9 19.4398V11.75C9 10.2312 10.2312 9 11.75 9H19.439L16.2196 12.2197C15.9268 12.5126 15.9268 12.9875 16.2197 13.2804C16.5126 13.5732 16.9875 13.5732 17.2804 13.2803L21.7804 8.77985C21.921 8.63919 22 8.44842 22 8.2495C22 8.05059 21.921 7.85983 21.7803 7.71919L17.2803 3.21964Z" 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_turn_bidirectional_down_right_24_regular.svg";Details
| Name | Arrow Turn Bidirectional Down Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_turn_bidirectional_down_right_24_regular.svg |
| Filled file | ic_fluent_arrow_turn_bidirectional_down_right_24_filled.svg |
| React components | ArrowTurnBidirectionalDownRight24Regular, ArrowTurnBidirectionalDownRight24Filled |
| License | MIT (© Microsoft Corporation) |