The Phosphor text underline icon visually represents the action of applying an underline to text, commonly used in text editors or formatting toolbars to indicate emphasis or a specific style.
Common uses
- Underline text formatting button in a rich text editor.
- Style option in a document creation application.
- Visual cue for underlined links or emphasized text in a UI.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { TextUnderline } from '@phosphor-icons/react';
<TextUnderline size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<TextUnderline size={24} />thin
<TextUnderline size={24} weight="thin" />light
<TextUnderline size={24} weight="light" />bold
<TextUnderline size={24} weight="bold" />fill
<TextUnderline size={24} weight="fill" />duotone
<TextUnderline size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- typographytypefaceprintfontunderscoreemphasisdesigneditortextunderlinetext style underlinefont underlineemphasis underline
FAQ
- What is the purpose of the text underline icon?
- It signifies the ability to apply or remove an underline style to selected text, often used for emphasis or as a specific formatting choice.
- How do I use the text underline icon in React?
- You can import and use it like this: import { TextUnderline } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon set, including the text underline icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →