Text Line Spacing icon

Use the Text Line Spacing 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 { TextLineSpacing24Regular, TextLineSpacing24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextLineSpacing24Regular aria-label="Text Line Spacing" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_line_spacing_24_regular.svg" width="24" height="24" alt="Text Line Spacing">

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="M18.75 13C19.1642 13 19.5 13.3358 19.5 13.75V19.4395L20.7197 18.2197C21.0126 17.9268 21.4874 17.9268 21.7803 18.2197C22.0732 18.5126 22.0732 18.9874 21.7803 19.2803L19.2803 21.7803C19.1396 21.9209 18.9489 22 18.75 22C18.6008 22 18.4563 21.9556 18.334 21.874L18.2197 21.7803L15.7197 19.2803C15.4268 18.9874 15.4268 18.5126 15.7197 18.2197C16.0126 17.9268 16.4874 17.9268 16.7803 18.2197L18 19.4395V13.75C18 13.3358 18.3358 13 18.75 13ZM10.25 17C10.6642 17 11 17.3358 11 17.75C11 18.1642 10.6642 18.5 10.25 18.5H2.75C2.33579 18.5 2 18.1642 2 17.75C2 17.3358 2.33579 17 2.75 17H10.25ZM14.25 11C14.6642 11 15 11.3358 15 11.75C15 12.1642 14.6642 12.5 14.25 12.5H2.75C2.33579 12.5 2 12.1642 2 11.75C2 11.3358 2.33579 11 2.75 11H14.25ZM18.75 2C18.9489 2 19.1396 2.07907 19.2803 2.21973L21.7803 4.71973C22.0732 5.01262 22.0732 5.48738 21.7803 5.78027C21.4874 6.07317 21.0126 6.07317 20.7197 5.78027L19.5 4.56055V10.25C19.5 10.6642 19.1642 11 18.75 11C18.3358 11 18 10.6642 18 10.25V4.56055L16.7803 5.78027C16.4874 6.07317 16.0126 6.07317 15.7197 5.78027C15.4268 5.48738 15.4268 5.01262 15.7197 4.71973L18.2197 2.21973L18.334 2.12598C18.4563 2.04445 18.6008 2 18.75 2ZM10.25 5C10.6642 5 11 5.33579 11 5.75C11 6.16421 10.6642 6.5 10.25 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.33579 2.33579 5 2.75 5H10.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_line_spacing_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatelineheight