Text Underline SVG element, flat

Free

A thin horizontal rule has a small gap near its right end. Use it beneath article headings or to highlight a phrase on a presentation slide.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

text underline rule underlines element flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/il7Uv0Rbb6_-/amnt.svg" alt="Text Underline" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 40" preserveAspectRatio="none" fill="none" stroke="currentColor"><path d="M20 20H349M359 20H380" stroke-width="1"/></svg>

CSS background-image

.text-underline {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/il7Uv0Rbb6_-/amnt.svg");
  background-size: contain;
}

CSS mask-image (takes the text colour)

.text-underline {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/il7Uv0Rbb6_-/amnt.svg") center / contain no-repeat;
}

React

import TextUnderlineSvg from "./text-underline.jsx"; // from the React tab above

<TextUnderlineSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Text Underline: Thin horizontal rule with a small gap near its right end. as part of the pack Underlines, flat. Want one like it? Make your own in the SVG studio.

Rest of Underlines, flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence