Text Paragraph Direction icon

Use the Text Paragraph Direction 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 { TextParagraphDirection24Regular, TextParagraphDirection24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextParagraphDirection24Regular aria-label="Text Paragraph Direction" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_paragraph_direction_24_regular.svg" width="24" height="24" alt="Text Paragraph Direction">

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="M13.5001 3C10.4625 3 8.00011 5.46243 8.00011 8.5C8.00011 11.5376 10.4625 14 13.5001 14H15.0001V21.208C15.0001 21.6454 15.3359 22 15.7501 22C16.1643 22 16.5001 21.6454 16.5001 21.208V4.5H18.0001V21.208C18.0001 21.6454 18.3359 22 18.7501 22C19.1643 22 19.5001 21.6454 19.5001 21.208V4.5H20.0453L20.1748 4.49315C20.6409 4.44349 21.0001 4.1297 21.0001 3.75C21.0001 3.33579 20.5726 3 20.0453 3H13.5001ZM13.5001 4.5H15.0001V12.5H13.5001C11.291 12.5 9.50011 10.7091 9.50011 8.5C9.50011 6.29086 11.291 4.5 13.5001 4.5ZM4.07978 11.8575C3.82419 12.0588 3.45294 12.0479 3.20927 11.8179C2.94123 11.5649 2.92906 11.1425 3.18209 10.8744L4.89557 9L3.18209 7.12557L3.11965 7.04889C2.93339 6.78213 2.9656 6.41212 3.20927 6.18209C3.47731 5.92906 3.89972 5.94123 4.15275 6.20927L6.29873 8.54185L6.36428 8.62306C6.53909 8.87797 6.51724 9.22668 6.29873 9.45815L4.15275 11.7907L4.07978 11.8575ZM5.40104 19.8575C5.65663 20.0588 6.02788 20.0479 6.27155 19.8179C6.53959 19.5649 6.55176 19.1425 6.29873 18.8744L4.58525 17L6.29873 15.1256L6.36117 15.0489C6.54743 14.7821 6.51523 14.4121 6.27155 14.1821C6.00351 13.9291 5.5811 13.9412 5.32807 14.2093L3.18209 16.5418L3.11654 16.6231C2.94173 16.878 2.96358 17.2267 3.18209 17.4582L5.32807 19.7907L5.40104 19.8575Z" 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_paragraph_direction_24_regular.svg";

Details

Keywords

typetexttypographyeditcreate