Text Description RTL icon

Use the Text Description 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 { TextDescriptionRtl24Regular, TextDescriptionRtl24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextDescriptionRtl24Regular aria-label="Text Description RTL" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_description_rtl_24_regular.svg" width="24" height="24" alt="Text Description 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="M21.25 17H8.75C8.33579 17 8 17.3358 8 17.75C8 18.1297 8.28215 18.4435 8.64823 18.4932L8.75 18.5H21.25C21.6642 18.5 22 18.1642 22 17.75C22 17.3703 21.7178 17.0565 21.3518 17.0068L21.25 17H8.75H21.25ZM21.25 13H2.75C2.33579 13 2 13.3358 2 13.75C2 14.1297 2.28215 14.4435 2.64823 14.4932L2.75 14.5H21.25C21.6642 14.5 22 14.1642 22 13.75C22 13.3703 21.7178 13.0565 21.3518 13.0068L21.25 13H2.75H21.25ZM21.25 9H2.75C2.33579 9 2 9.33579 2 9.75C2 10.1297 2.28215 10.4435 2.64823 10.4932L2.75 10.5H21.25C21.6642 10.5 22 10.1642 22 9.75C22 9.3703 21.7178 9.05651 21.3518 9.00685L21.25 9H2.75H21.25ZM21.25 5H2.75C2.33579 5 2 5.33579 2 5.75C2 6.1297 2.28215 6.44349 2.64823 6.49315L2.75 6.5H21.25C21.6642 6.5 22 6.16421 22 5.75C22 5.3703 21.7178 5.05651 21.3518 5.00685L21.25 5H2.75H21.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_description_rtl_24_regular.svg";

Details