Text Direction Rotate 90 RTL icon

Use the Text Direction Rotate 90 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 { TextDirectionRotate90Rtl24Regular, TextDirectionRotate90Rtl24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextDirectionRotate90Rtl24Regular aria-label="Text Direction Rotate 90 RTL" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_direction_rotate_90_rtl_24_regular.svg" width="24" height="24" alt="Text Direction Rotate 90 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="M6.75 21C6.33579 21 6 20.6642 6 20.25V5.56066L5.28033 6.28033C4.98744 6.57322 4.51256 6.57322 4.21967 6.28033C3.92678 5.98744 3.92678 5.51256 4.21967 5.21967L6.21967 3.21967C6.51256 2.92678 6.98744 2.92678 7.28033 3.21967L9.28033 5.21967C9.57322 5.51256 9.57322 5.98744 9.28033 6.28033C8.98744 6.57322 8.51256 6.57322 8.21967 6.28033L7.5 5.56066V20.25C7.5 20.6642 7.16421 21 6.75 21ZM11.0306 20.9472L20.5257 17.1936C21.1212 16.9582 21.1559 16.1511 20.6302 15.8489L20.5251 15.7984L11.0246 12.052C10.6393 11.9 10.2038 12.0892 10.0518 12.4746C9.91251 12.8278 10.0599 13.2232 10.3822 13.4037L10.4744 13.4474L13 14.4437V18.5567L10.4791 19.5522C10.126 19.6918 9.93792 20.0696 10.0263 20.4283L10.0574 20.5254C10.197 20.8785 10.5747 21.0666 10.9334 20.9782L11.0306 20.9472ZM18.2077 16.497L14.5 17.9637V15.0357L18.2077 16.497ZM15.5 11.25C15.5 11.6642 15.8358 12 16.25 12C16.6642 12 17 11.6642 17 11.25V5.56066L17.7197 6.28033C18.0126 6.57322 18.4874 6.57322 18.7803 6.28033C19.0732 5.98744 19.0732 5.51256 18.7803 5.21967L16.7803 3.21967C16.4874 2.92678 16.0126 2.92678 15.7197 3.21967L13.7197 5.21967C13.4268 5.51256 13.4268 5.98744 13.7197 6.28033C14.0126 6.57322 14.4874 6.57322 14.7803 6.28033L15.5 5.56066V11.25Z" 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/text_direction_rotate_90_rtl_24_regular.svg";

Details