Text Indent Decrease LTR icon

Use the Text Indent Decrease LTR 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 { TextIndentDecreaseLtr24Regular, TextIndentDecreaseLtr24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextIndentDecreaseLtr24Regular aria-label="Text Indent Decrease LTR" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_indent_decrease_ltr_24_regular.svg" width="24" height="24" alt="Text Indent Decrease LTR">

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="M17.75 16C18.1642 16 18.5 16.3358 18.5 16.75C18.5 17.1642 18.1642 17.5 17.75 17.5H8.75C8.33579 17.5 8 17.1642 8 16.75C8 16.3358 8.33579 16 8.75 16H17.75ZM2.71967 11.2197L4.71967 9.21967C5.01256 8.92678 5.48744 8.92678 5.78033 9.21967C6.0466 9.48594 6.0708 9.9026 5.85295 10.1962L5.78033 10.2803L4.31066 11.75L5.78033 13.2197C6.07322 13.5126 6.07322 13.9874 5.78033 14.2803C5.51406 14.5466 5.0974 14.5708 4.80379 14.3529L4.71967 14.2803L2.71967 12.2803C2.4534 12.0141 2.4292 11.5974 2.64705 11.3038L2.71967 11.2197L4.71967 9.21967L2.71967 11.2197ZM20.75 11C21.1642 11 21.5 11.3358 21.5 11.75C21.5 12.1642 21.1642 12.5 20.75 12.5H8.75C8.33579 12.5 8 12.1642 8 11.75C8 11.3358 8.33579 11 8.75 11H20.75ZM17.75 6C18.1642 6 18.5 6.33579 18.5 6.75C18.5 7.16421 18.1642 7.5 17.75 7.5H8.75C8.33579 7.5 8 7.16421 8 6.75C8 6.33579 8.33579 6 8.75 6H17.75Z" 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_indent_decrease_ltr_24_regular.svg";

Details