Text Direction Rotate 45 Right icon
Used to choose text direction in editor scenarios. Contains directional, rotation and locale specific variants. The Text Direction Rotate 45 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 45 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 { TextDirectionRotate45Right24Regular, TextDirectionRotate45Right24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextDirectionRotate45Right24Regular aria-label="Text Direction Rotate 45 Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_direction_rotate_45_right_24_regular.svg" width="24" height="24" alt="Text Direction Rotate 45 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="M21.25 10.5C20.8358 10.5 20.5 10.8358 20.5 11.25V12.4394L16.2803 8.21969C15.9874 7.9268 15.5126 7.9268 15.2197 8.21969C14.9268 8.51258 14.9268 8.98746 15.2197 9.28035L19.4393 13.5H18.25C17.8358 13.5 17.5 13.8358 17.5 14.25C17.5 14.6642 17.8358 15 18.25 15H21.25C21.6642 15 22 14.6642 22 14.25V11.25C22 10.8358 21.6642 10.5 21.25 10.5ZM15.9278 3.0711C16.0635 2.78464 16.0045 2.44381 15.7803 2.21968C15.5562 1.99555 15.2153 1.93653 14.9289 2.07224L5.43022 6.57224C5.05589 6.74957 4.89619 7.19679 5.07353 7.57112C5.25087 7.94545 5.69809 8.10515 6.07242 7.92781L8.64719 6.70801L11.2922 9.35307L10.0722 11.9285C9.89488 12.3029 10.0546 12.7501 10.4289 12.9274C10.8033 13.1047 11.2505 12.945 11.4278 12.5707L15.9278 3.0711ZM11.9741 7.91362L10.0866 6.0261L13.6731 4.32699L11.9741 7.91362ZM15 18.25C15 17.8358 14.6642 17.5 14.25 17.5C13.8358 17.5 13.5 17.8358 13.5 18.25V19.4394L3.28033 9.21969C2.98744 8.9268 2.51256 8.9268 2.21967 9.21969C1.92678 9.51258 1.92678 9.98746 2.21967 10.2804L12.4393 20.5H11.25C10.8358 20.5 10.5 20.8358 10.5 21.25C10.5 21.6642 10.8358 22 11.25 22H14.25C14.6642 22 15 21.6642 15 21.25V18.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_45_right_24_regular.svg";Details
| Name | Text Direction Rotate 45 Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_direction_rotate_45_right_24_regular.svg |
| Filled file | ic_fluent_text_direction_rotate_45_right_24_filled.svg |
| React components | TextDirectionRotate45Right24Regular, TextDirectionRotate45Right24Filled |
| License | MIT (© Microsoft Corporation) |