Text Position Tight icon

Use the Text Position Tight 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 { TextPositionTight24Regular, TextPositionTight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextPositionTight24Regular aria-label="Text Position Tight" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_position_tight_24_regular.svg" width="24" height="24" alt="Text Position Tight">

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="M3.75 4C3.33579 4 3 4.33579 3 4.75C3 5.16421 3.33579 5.5 3.75 5.5H20.25C20.6642 5.5 21 5.16421 21 4.75C21 4.33579 20.6642 4 20.25 4H3.75ZM3 8.25C3 7.83579 3.33579 7.5 3.75 7.5H8.42928C8.00652 7.93125 7.66126 8.43877 7.41604 9H3.75C3.33579 9 3 8.66421 3 8.25ZM15.4649 9C15.1017 8.37219 14.5728 7.85225 13.938 7.5C13.3639 7.18142 12.7031 7 12 7C11.2969 7 10.6361 7.18142 10.062 7.5C9.42719 7.85225 8.8983 8.37219 8.53513 9C8.19479 9.58835 8 10.2714 8 11V15.75C8 15.8377 8.01504 15.9218 8.04268 16C8.14564 16.2913 8.42345 16.5 8.75 16.5C9.07655 16.5 9.35436 16.2913 9.45732 16C9.48496 15.9218 9.5 15.8377 9.5 15.75V11C9.5 10.1822 9.89267 9.45611 10.4998 9C10.9176 8.68604 11.4371 8.5 12 8.5C12.5629 8.5 13.0824 8.68604 13.5002 9C14.1073 9.45611 14.5 10.1822 14.5 11V15.75C14.5 15.8377 14.515 15.9218 14.5427 16C14.6456 16.2913 14.9234 16.5 15.25 16.5C15.5766 16.5 15.8544 16.2913 15.9573 16C15.985 15.9218 16 15.8377 16 15.75V11C16 10.2714 15.8052 9.58835 15.4649 9ZM3.75 11H7V12.5H3.75C3.33579 12.5 3 12.1642 3 11.75C3 11.3358 3.33579 11 3.75 11ZM3.75 14.5H7V15.75C7 15.8349 7.00604 15.9183 7.01772 16H3.75C3.33579 16 3 15.6642 3 15.25C3 14.8358 3.33579 14.5 3.75 14.5ZM20.25 16H16.9823C16.994 15.9183 17 15.8349 17 15.75V14.5H20.25C20.6642 14.5 21 14.8358 21 15.25C21 15.6642 20.6642 16 20.25 16ZM20.25 12.5H17V11H20.25C20.6642 11 21 11.3358 21 11.75C21 12.1642 20.6642 12.5 20.25 12.5ZM20.25 9H16.584C16.3387 8.43877 15.9935 7.93125 15.5707 7.5H20.25C20.6642 7.5 21 7.83579 21 8.25C21 8.66421 20.6642 9 20.25 9ZM3.75 18C3.33579 18 3 18.3358 3 18.75C3 19.1642 3.33579 19.5 3.75 19.5H20.25C20.6642 19.5 21 19.1642 21 18.75C21 18.3358 20.6642 18 20.25 18H3.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_position_tight_24_regular.svg";

Details

Keywords

typetexttypographyeditcreatebehindfrontlinesquarethroughtightnoodle