TextBox More icon

Use the TextBox More 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 { TextboxMore24Regular, TextboxMore24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextboxMore24Regular aria-label="TextBox More" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_textbox_more_24_regular.svg" width="24" height="24" alt="TextBox More">

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 5.75C21 4.23122 19.7688 3 18.25 3H5.75C4.23122 3 3 4.23122 3 5.75V18.25C3 19.7688 4.23122 21 5.75 21H8.05001C8.01722 20.8384 8 20.6712 8 20.5C8 20.1444 8.07422 19.8062 8.20802 19.5H5.75C5.05964 19.5 4.5 18.9404 4.5 18.25V5.75C4.5 5.05964 5.05964 4.5 5.75 4.5H18.25C18.9404 4.5 19.5 5.05964 19.5 5.75V18.208C19.8062 18.0742 20.1444 18 20.5 18C20.6712 18 20.8384 18.0172 21 18.05V5.75ZM6.75 11.5H14.25C14.6642 11.5 15 11.8358 15 12.25C15 12.6297 14.7178 12.9435 14.3518 12.9932L14.25 13H6.75C6.33579 13 6 12.6642 6 12.25C6 11.8703 6.28215 11.5565 6.64823 11.5068L6.75 11.5ZM17.25 15.5H6.75L6.64823 15.5068C6.28215 15.5565 6 15.8703 6 16.25C6 16.6642 6.33579 17 6.75 17H17.25L17.3518 16.9932C17.7178 16.9435 18 16.6297 18 16.25C18 15.8358 17.6642 15.5 17.25 15.5ZM6.75 7.5H17.25C17.6642 7.5 18 7.83579 18 8.25C18 8.6297 17.7178 8.94349 17.3518 8.99315L17.25 9H6.75C6.33579 9 6 8.66421 6 8.25C6 7.8703 6.28215 7.55651 6.64823 7.50685L6.75 7.5ZM12 20.5C12 21.3284 11.3284 22 10.5 22C9.67157 22 9 21.3284 9 20.5C9 19.6716 9.67157 19 10.5 19C11.3284 19 12 19.6716 12 20.5ZM15.5 22C16.3284 22 17 21.3284 17 20.5C17 19.6716 16.3284 19 15.5 19C14.6716 19 14 19.6716 14 20.5C14 21.3284 14.6716 22 15.5 22ZM20.5 22C21.3284 22 22 21.3284 22 20.5C22 19.6716 21.3284 19 20.5 19C19.6716 19 19 19.6716 19 20.5C19 21.3284 19.6716 22 20.5 22Z" 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_more_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatealignmentlayout