Arrow Export RTL icon

Use the Arrow Export RTL 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 { ArrowExportRtl24Regular, ArrowExportRtl24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowExportRtl24Regular aria-label="Arrow Export RTL" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_export_rtl_24_regular.svg" width="24" height="24" alt="Arrow Export RTL">

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="M21.2436 4.5C20.8639 4.5 20.5502 4.78227 20.5006 5.14836L20.4937 5.25014L20.4961 18.2542C20.4962 18.6684 20.832 19.0041 21.2462 19.0041C21.6259 19.0041 21.9397 18.7218 21.9893 18.3557L21.9961 18.2539L21.9937 5.24986C21.9937 4.83565 21.6578 4.5 21.2436 4.5ZM8.349 6.30373L8.27637 6.21961C8.01008 5.95338 7.59341 5.92921 7.29982 6.1471L7.21571 6.21972L2.2191 11.2174C1.953 11.4835 1.9287 11.8999 2.14626 12.1935L2.21879 12.2776L7.2154 17.2811C7.50809 17.5742 7.98297 17.5745 8.27606 17.2818C8.54251 17.0157 8.567 16.5991 8.34935 16.3053L8.27679 16.2211L4.56609 12.504L18.2431 12.5049C18.6228 12.5049 18.9366 12.2228 18.9863 11.8567L18.9931 11.7549C18.9931 11.3753 18.711 11.0615 18.3449 11.0118L18.2431 11.0049L4.55309 11.004L8.27648 7.28028C8.54272 7.01398 8.56688 6.59732 8.349 6.30373L8.27637 6.21961L8.349 6.30373Z" 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_export_rtl_24_regular.svg";

Details