Text Indent Decrease RTL icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M5.5 16.75C5.5 16.3358 5.83579 16 6.25 16H15.25C15.6642 16 16 16.3358 16 16.75C16 17.1642 15.6642 17.5 15.25 17.5H6.25C5.83579 17.5 5.5 17.1642 5.5 16.75ZM2.5 11.75C2.5 11.3358 2.83579 11 3.25 11H15.25C15.6642 11 16 11.3358 16 11.75C16 12.1642 15.6642 12.5 15.25 12.5H3.25C2.83579 12.5 2.5 12.1642 2.5 11.75ZM5.5 6.75C5.5 6.33579 5.83579 6 6.25 6H15.25C15.6642 6 16 6.33579 16 6.75C16 7.16421 15.6642 7.5 15.25 7.5H6.25C5.83579 7.5 5.5 7.16421 5.5 6.75ZM19.1962 9.14705C18.9026 8.9292 18.4859 8.9534 18.2197 9.21967C17.9268 9.51256 17.9268 9.98744 18.2197 10.2803L19.6893 11.75L18.2197 13.2197L18.1471 13.3038C17.9292 13.5974 17.9534 14.0141 18.2197 14.2803C18.5126 14.5732 18.9874 14.5732 19.2803 14.2803L21.2803 12.2803L21.3529 12.1962C21.5708 11.9026 21.5466 11.4859 21.2803 11.2197L19.2803 9.21967L19.1962 9.14705Z" 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_rtl_24_regular.svg";

Details