Text Direction Horizontal Left icon
Used to choose text direction in editor scenarios. Contains directional, rotation and locale specific variants. The Text Direction Horizontal Left 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 Left 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 { TextDirectionHorizontalLeft24Regular, TextDirectionHorizontalLeft24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextDirectionHorizontalLeft24Regular aria-label="Text Direction Horizontal Left" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_direction_horizontal_left_24_regular.svg" width="24" height="24" alt="Text Direction Horizontal Left"> 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="M20.9473 12.9694L17.1937 3.47427C16.9583 2.87883 16.1512 2.84415 15.849 3.36975L15.7985 3.47487L12.0521 12.9754C11.9001 13.3607 12.0893 13.7962 12.4747 13.9482C12.8279 14.0875 13.2233 13.9401 13.4038 13.6178L13.4475 13.5256L14.4438 11H18.5568L19.5523 13.5209C19.6919 13.874 20.0697 14.0621 20.4284 13.9737L20.5255 13.9426C20.8786 13.803 21.0667 13.4253 20.9783 13.0666L20.9473 12.9694ZM16.4971 5.79226L17.9638 9.5H15.0358L16.4971 5.79226ZM12 7.75C12 8.16421 11.6642 8.5 11.25 8.5H5.56066L6.28033 9.21967C6.57322 9.51256 6.57322 9.98744 6.28033 10.2803C5.98744 10.5732 5.51256 10.5732 5.21967 10.2803L3.21967 8.28033C2.92678 7.98744 2.92678 7.51256 3.21967 7.21967L5.21967 5.21967C5.51256 4.92678 5.98744 4.92678 6.28033 5.21967C6.57322 5.51256 6.57322 5.98744 6.28033 6.28033L5.56066 7H11.25C11.6642 7 12 7.33579 12 7.75ZM21 17.25C21 17.6642 20.6642 18 20.25 18H5.56066L6.28033 18.7197C6.57322 19.0126 6.57322 19.4874 6.28033 19.7803C5.98744 20.0732 5.51256 20.0732 5.21967 19.7803L3.21967 17.7803C2.92678 17.4874 2.92678 17.0126 3.21967 16.7197L5.21967 14.7197C5.51256 14.4268 5.98744 14.4268 6.28033 14.7197C6.57322 15.0126 6.57322 15.4874 6.28033 15.7803L5.56066 16.5H20.25C20.6642 16.5 21 16.8358 21 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_left_24_regular.svg";Details
| Name | Text Direction Horizontal Left |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_direction_horizontal_left_24_regular.svg |
| Filled file | ic_fluent_text_direction_horizontal_left_24_filled.svg |
| React components | TextDirectionHorizontalLeft24Regular, TextDirectionHorizontalLeft24Filled |
| License | MIT (© Microsoft Corporation) |