Text Direction Horizontal Right icon
Used to choose text direction in editor scenarios. Contains directional, rotation and locale specific variants. The Text Direction Horizontal 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 Horizontal 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 { TextDirectionHorizontalRight24Regular, TextDirectionHorizontalRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextDirectionHorizontalRight24Regular aria-label="Text Direction Horizontal Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_direction_horizontal_right_24_regular.svg" width="24" height="24" alt="Text Direction Horizontal 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="M3.05272 12.9694L6.80633 3.47427C7.04172 2.87883 7.84884 2.84415 8.15104 3.36975L8.20152 3.47487L11.9479 12.9754C12.0999 13.3607 11.9107 13.7962 11.5253 13.9482C11.1721 14.0875 10.7767 13.9401 10.5962 13.6178L10.5525 13.5256L9.5562 11H5.4432L4.44768 13.5209C4.30809 13.874 3.93033 14.0621 3.57164 13.9737L3.47447 13.9426C3.12137 13.803 2.93328 13.4253 3.02168 13.0666L3.05272 12.9694ZM7.50294 5.79226L6.0362 9.5H8.9642L7.50294 5.79226ZM12 7.75C12 8.16421 12.3358 8.5 12.75 8.5H18.4393L17.7197 9.21967C17.4268 9.51256 17.4268 9.98744 17.7197 10.2803C18.0126 10.5732 18.4874 10.5732 18.7803 10.2803L20.7803 8.28033C21.0732 7.98744 21.0732 7.51256 20.7803 7.21967L18.7803 5.21967C18.4874 4.92678 18.0126 4.92678 17.7197 5.21967C17.4268 5.51256 17.4268 5.98744 17.7197 6.28033L18.4393 7H12.75C12.3358 7 12 7.33579 12 7.75ZM3 17.25C3 17.6642 3.33579 18 3.75 18H18.4393L17.7197 18.7197C17.4268 19.0126 17.4268 19.4874 17.7197 19.7803C18.0126 20.0732 18.4874 20.0732 18.7803 19.7803L20.7803 17.7803C21.0732 17.4874 21.0732 17.0126 20.7803 16.7197L18.7803 14.7197C18.4874 14.4268 18.0126 14.4268 17.7197 14.7197C17.4268 15.0126 17.4268 15.4874 17.7197 15.7803L18.4393 16.5H3.75C3.33579 16.5 3 16.8358 3 17.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_horizontal_right_24_regular.svg";Details
| Name | Text Direction Horizontal Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_direction_horizontal_right_24_regular.svg |
| Filled file | ic_fluent_text_direction_horizontal_right_24_filled.svg |
| React components | TextDirectionHorizontalRight24Regular, TextDirectionHorizontalRight24Filled |
| License | MIT (© Microsoft Corporation) |