Text Direction Rotate 270 Right icon
Used to choose text direction in editor scenarios. Contains directional, rotation and locale specific variants. The Text Direction Rotate 270 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 270 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 { TextDirectionRotate270Right24Regular, TextDirectionRotate270Right24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextDirectionRotate270Right24Regular aria-label="Text Direction Rotate 270 Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_direction_rotate_270_right_24_regular.svg" width="24" height="24" alt="Text Direction Rotate 270 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="M5.21967 5.21967C4.92678 5.51256 4.92678 5.98744 5.21967 6.28033C5.51256 6.57322 5.98744 6.57322 6.28033 6.28033L7 5.56066V9.25C7 9.66421 7.33579 10 7.75 10C8.16421 10 8.5 9.66421 8.5 9.25V5.56066L9.21967 6.28033C9.51256 6.57322 9.98744 6.57322 10.2803 6.28033C10.5732 5.98744 10.5732 5.51256 10.2803 5.21967L8.28033 3.21967C7.98744 2.92678 7.51256 2.92678 7.21967 3.21967L5.21967 5.21967ZM12.9694 20.9472L3.47427 17.1935C2.87883 16.9582 2.84415 16.151 3.36975 15.8488L3.47487 15.7984L12.9754 12.052C13.3607 11.9 13.7962 12.0892 13.9482 12.4745C14.0875 12.8278 13.9401 13.2232 13.6178 13.4037L13.5256 13.4474L11 14.4437V18.5567L13.5209 19.5522C13.874 19.6918 14.0621 20.0695 13.9737 20.4282L13.9426 20.5254C13.803 20.8785 13.4253 21.0666 13.0666 20.9782L12.9694 20.9472ZM5.79226 16.4969L9.5 17.9637V15.0357L5.79226 16.4969ZM14.7197 6.28033C14.4268 5.98744 14.4268 5.51256 14.7197 5.21967L16.7197 3.21967C17.0126 2.92678 17.4874 2.92678 17.7803 3.21967L19.7803 5.21967C20.0732 5.51256 20.0732 5.98744 19.7803 6.28033C19.4874 6.57322 19.0126 6.57322 18.7197 6.28033L18 5.56066V20.25C18 20.6642 17.6642 21 17.25 21C16.8358 21 16.5 20.6642 16.5 20.25V5.56066L15.7803 6.28033C15.4874 6.57322 15.0126 6.57322 14.7197 6.28033Z" 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_270_right_24_regular.svg";Details
| Name | Text Direction Rotate 270 Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_direction_rotate_270_right_24_regular.svg |
| Filled file | ic_fluent_text_direction_rotate_270_right_24_filled.svg |
| React components | TextDirectionRotate270Right24Regular, TextDirectionRotate270Right24Filled |
| License | MIT (© Microsoft Corporation) |