TextBox Rotate 90 icon

Use the TextBox Rotate 90 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 { TextboxRotate9024Regular, TextboxRotate9024Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextboxRotate9024Regular aria-label="TextBox Rotate 90" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_textbox_rotate_90_24_regular.svg" width="24" height="24" alt="TextBox Rotate 90">

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 18.25C21 19.7688 19.7688 21 18.25 21H5.75C4.23122 21 3 19.7688 3 18.25L3 5.75C3 4.23122 4.23122 3 5.75 3L18.25 3C19.7688 3 21 4.23122 21 5.75V18.25ZM19.5 18.25V5.75C19.5 5.05964 18.9404 4.5 18.25 4.5L5.75 4.5C5.05964 4.5 4.5 5.05964 4.5 5.75L4.5 18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25ZM12.5 14.25L12.5 6.75L12.4932 6.64823C12.4435 6.28215 12.1297 6 11.75 6C11.3358 6 11 6.33579 11 6.75L11 14.25L11.0068 14.3518C11.0565 14.7178 11.3703 15 11.75 15C12.1642 15 12.5 14.6642 12.5 14.25ZM8.5 6.75L8.5 17.25C8.5 17.6642 8.16421 18 7.75 18C7.3703 18 7.05651 17.7178 7.00685 17.3518L7 17.25L7 6.75C7 6.33579 7.33579 6 7.75 6C8.1297 6 8.44349 6.28215 8.49315 6.64823L8.5 6.75ZM16.5 17.25L16.5 6.75L16.4932 6.64823C16.4435 6.28215 16.1297 6 15.75 6C15.3358 6 15 6.33579 15 6.75L15 17.25L15.0068 17.3518C15.0565 17.7178 15.3703 18 15.75 18C16.1642 18 16.5 17.6642 16.5 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/textbox_rotate_90_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatealignmentlayout