Text Underline icon

Use the Text Underline 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 { TextUnderline24Regular, TextUnderline24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TextUnderline24Regular aria-label="Text Underline" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_text_underline_24_regular.svg" width="24" height="24" alt="Text Underline">

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="M6.75001 19H17.25C17.6642 19 18 19.3358 18 19.75C18 20.1297 17.7179 20.4435 17.3518 20.4932L17.25 20.5H6.75001C6.33579 20.5 6.00001 20.1642 6.00001 19.75C6.00001 19.3703 6.28216 19.0565 6.64824 19.0068L6.75001 19H17.25H6.75001ZM17.25 4C17.6297 4 17.9435 4.28215 17.9932 4.64823L18 4.75V10.75C18 15.1437 15.9371 17.5 11.9971 17.5C8.14241 17.5 6.08619 15.2446 6.00265 11.0336L6 10.75V4.75C6 4.33579 6.33579 4 6.75001 4C7.1297 4 7.44349 4.28215 7.49315 4.64823L7.5 4.75V10.7507C7.49647 14.3568 8.93346 16 11.9971 16C14.9824 16 16.4251 14.4395 16.4972 11.0235L16.5 10.75V4.75C16.5 4.33579 16.8358 4 17.25 4Z" 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_underline_24_regular.svg";

Details

Keywords

typetexttypographyeditcreateletter