Text Direction Vertical icon
Used to choose text direction in editor scenarios. Contains directional, rotation and locale specific variants. The Text Direction Vertical 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 Vertical 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 { TextDirectionVertical24Regular, TextDirectionVertical24Filled } from "@fluentui/react-icons";
export function Example() {
return <TextDirectionVertical24Regular aria-label="Text Direction Vertical" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_text_direction_vertical_24_regular.svg" width="24" height="24" alt="Text Direction Vertical"> 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="M6 3.75C6 3.33579 6.33579 3 6.75 3C7.16421 3 7.5 3.33579 7.5 3.75V18.4393L8.21967 17.7197C8.51256 17.4268 8.98744 17.4268 9.28033 17.7197C9.57322 18.0126 9.57322 18.4874 9.28033 18.7803L7.28033 20.7803C6.98744 21.0732 6.51256 21.0732 6.21967 20.7803L4.21967 18.7803C3.92678 18.4874 3.92678 18.0126 4.21967 17.7197C4.51256 17.4268 4.98744 17.4268 5.28033 17.7197L6 18.4393V3.75ZM11.5527 12.9694L15.3063 3.47427C15.5417 2.87883 16.3488 2.84415 16.651 3.36975L16.7015 3.47487L20.4479 12.9754C20.5999 13.3607 20.4107 13.7962 20.0253 13.9482C19.6721 14.0875 19.2767 13.9401 19.0962 13.6178L19.0525 13.5256L18.0562 11H13.9432L12.9477 13.5209C12.8081 13.874 12.4303 14.0621 12.0716 13.9737L11.9745 13.9426C11.6214 13.803 11.4333 13.4253 11.5217 13.0666L11.5527 12.9694ZM16.0029 5.79226L14.5362 9.5H17.4642L16.0029 5.79226ZM16.25 14C15.8358 14 15.5 14.3358 15.5 14.75V18.4393L14.7803 17.7197C14.4874 17.4268 14.0126 17.4268 13.7197 17.7197C13.4268 18.0126 13.4268 18.4874 13.7197 18.7803L15.7197 20.7803C16.0126 21.0732 16.4874 21.0732 16.7803 20.7803L18.7803 18.7803C19.0732 18.4874 19.0732 18.0126 18.7803 17.7197C18.4874 17.4268 18.0126 17.4268 17.7197 17.7197L17 18.4393V14.75C17 14.3358 16.6642 14 16.25 14Z" 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_vertical_24_regular.svg";Details
| Name | Text Direction Vertical |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_text_direction_vertical_24_regular.svg |
| Filled file | ic_fluent_text_direction_vertical_24_filled.svg |
| React components | TextDirectionVertical24Regular, TextDirectionVertical24Filled |
| License | MIT (© Microsoft Corporation) |