Text Collapse icon

Use the Text Collapse 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 { TextCollapse24Regular, TextCollapse24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextCollapse24Regular aria-label="Text Collapse" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_collapse_24_regular.svg" width="24" height="24" alt="Text Collapse">

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.75 4.5H21.25C21.6642 4.5 22 4.16421 22 3.75C22 3.3703 21.7178 3.05651 21.3518 3.00685L21.25 3H6.75C6.33579 3 6 3.33579 6 3.75C6 4.1297 6.28215 4.44349 6.64823 4.49315L6.75 4.5ZM6.75 19.5H21.25C21.6642 19.5 22 19.1642 22 18.75C22 18.3703 21.7178 18.0565 21.3518 18.0068L21.25 18H6.75C6.33579 18 6 18.3358 6 18.75C6 19.1297 6.28215 19.4435 6.64823 19.4932L6.75 19.5ZM13.75 8C13.3358 8 13 8.33579 13 8.75C13 9.16421 13.3358 9.5 13.75 9.5H21.25C21.6642 9.5 22 9.16421 22 8.75C22 8.33579 21.6642 8 21.25 8H13.75ZM13 13.75C13 13.3358 13.3358 13 13.75 13H21.25C21.6642 13 22 13.3358 22 13.75C22 14.1642 21.6642 14.5 21.25 14.5H13.75C13.3358 14.5 13 14.1642 13 13.75ZM11 11.5C11 13.9853 8.98528 16 6.5 16C4.01472 16 2 13.9853 2 11.5C2 9.01472 4.01472 7 6.5 7C8.98528 7 11 9.01472 11 11.5ZM9 11.5C9 11.2239 8.77614 11 8.5 11H4.5C4.22386 11 4 11.2239 4 11.5C4 11.7761 4.22386 12 4.5 12H8.5C8.77614 12 9 11.7761 9 11.5Z" 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_collapse_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateshrinkcondense