Text Direction Rotate 315 Right icon
Used to choose text direction in editor scenarios. Contains directional, rotation and locale specific variants. The Text Direction Rotate 315 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 Text Direction Rotate 315 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 { TextDirectionRotate315Right24Regular, TextDirectionRotate315Right24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextDirectionRotate315Right24Regular aria-label="Text Direction Rotate 315 Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_direction_rotate_315_right_24_regular.svg" width="24" height="24" alt="Text Direction Rotate 315 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="M10.5 2.75C10.5 3.16421 10.8358 3.5 11.25 3.5H12.4394L8.21969 7.71967C7.9268 8.01256 7.9268 8.48744 8.21969 8.78033C8.51258 9.07322 8.98746 9.07322 9.28035 8.78033L13.5 4.56066V5.75C13.5 6.16421 13.8358 6.5 14.25 6.5C14.6642 6.5 15 6.16421 15 5.75V2.75C15 2.33579 14.6642 2 14.25 2H11.25C10.8358 2 10.5 2.33579 10.5 2.75ZM3.0711 8.0722C2.78464 7.93651 2.44381 7.99554 2.21968 8.21968C1.99555 8.44382 1.93653 8.78465 2.07224 9.0711L6.57224 18.5698C6.74957 18.9441 7.19679 19.1038 7.57112 18.9265C7.94545 18.7491 8.10515 18.3019 7.92781 17.9276L6.70801 15.3528L9.35307 12.7078L11.9285 13.9278C12.3029 14.1051 12.7501 13.9454 12.9274 13.5711C13.1047 13.1967 12.945 12.7495 12.5707 12.5722L3.0711 8.0722ZM7.91362 12.0259L6.0261 13.9134L4.32699 10.3269L7.91362 12.0259ZM18.25 9C17.8358 9 17.5 9.33579 17.5 9.75C17.5 10.1642 17.8358 10.5 18.25 10.5H19.4394L9.21969 20.7197C8.9268 21.0126 8.9268 21.4874 9.21969 21.7803C9.51258 22.0732 9.98746 22.0732 10.2804 21.7803L20.5 11.5607V12.75C20.5 13.1642 20.8358 13.5 21.25 13.5C21.6642 13.5 22 13.1642 22 12.75V9.75C22 9.33579 21.6642 9 21.25 9H18.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_315_right_24_regular.svg";Details
| Name | Text Direction Rotate 315 Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_direction_rotate_315_right_24_regular.svg |
| Filled file | ic_fluent_text_direction_rotate_315_right_24_filled.svg |
| React components | TextDirectionRotate315Right24Regular, TextDirectionRotate315Right24Filled |
| License | MIT (© Microsoft Corporation) |