underline icon

underline from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name
underline
Set
Framework7 Icons
Style
Outline
Viewbox
56×56
License
MIT

The same icon in other sets

underline-outlinedAnt Design IconsunderlineBoxIcons v2underlineFont Awesome 6 SolidunderlineFont Awesome SolidunderlineFeather IconsunderlineHeroIconsunderlineHuge IconsunderlineHumbleiconsunderlineIconoirunderlineJam IconsunderlineLine AwesomeunderlineLucideunderlineMajesticonsunderline-fillMingCute IconunderlineRadix IconsunderlineRemix IconunderlineTabler Iconsunderline-outlineTeenyiconsunderlineUnicons

Use the underline icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M27.988 41.734c8.461 0 13.664-5.062 13.664-12.422V9.228c0-1.313-.867-2.157-2.18-2.157c-1.335 0-2.156.844-2.156 2.157V28.96c0 5.227-3.445 8.766-9.328 8.766c-5.86 0-9.304-3.54-9.304-8.766V9.227c0-1.313-.868-2.157-2.18-2.157c-1.336 0-2.156.844-2.156 2.157v20.086c0 7.359 5.226 12.421 13.64 12.421M15.731 48.93h24.515c.773 0 1.406-.586 1.406-1.383s-.633-1.406-1.406-1.406H15.73a1.39 1.39 0 0 0-1.382 1.406a1.37 1.37 0 0 0 1.382 1.383"/></svg>

React

import type { SVGProps } from "react";

export function F7Underline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M27.988 41.734c8.461 0 13.664-5.062 13.664-12.422V9.228c0-1.313-.867-2.157-2.18-2.157c-1.335 0-2.156.844-2.156 2.157V28.96c0 5.227-3.445 8.766-9.328 8.766c-5.86 0-9.304-3.54-9.304-8.766V9.227c0-1.313-.868-2.157-2.18-2.157c-1.336 0-2.156.844-2.156 2.157v20.086c0 7.359 5.226 12.421 13.64 12.421M15.731 48.93h24.515c.773 0 1.406-.586 1.406-1.383s-.633-1.406-1.406-1.406H15.73a1.39 1.39 0 0 0-1.382 1.406a1.37 1.37 0 0 0 1.382 1.383"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M27.988 41.734c8.461 0 13.664-5.062 13.664-12.422V9.228c0-1.313-.867-2.157-2.18-2.157c-1.335 0-2.156.844-2.156 2.157V28.96c0 5.227-3.445 8.766-9.328 8.766c-5.86 0-9.304-3.54-9.304-8.766V9.227c0-1.313-.868-2.157-2.18-2.157c-1.336 0-2.156.844-2.156 2.157v20.086c0 7.359 5.226 12.421 13.64 12.421M15.731 48.93h24.515c.773 0 1.406-.586 1.406-1.383s-.633-1.406-1.406-1.406H15.73a1.39 1.39 0 0 0-1.382 1.406a1.37 1.37 0 0 0 1.382 1.383"/></svg>
</template>

CSS

.icon-underline {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M27.988%2041.734c8.461%200%2013.664-5.062%2013.664-12.422V9.228c0-1.313-.867-2.157-2.18-2.157c-1.335%200-2.156.844-2.156%202.157V28.96c0%205.227-3.445%208.766-9.328%208.766c-5.86%200-9.304-3.54-9.304-8.766V9.227c0-1.313-.868-2.157-2.18-2.157c-1.336%200-2.156.844-2.156%202.157v20.086c0%207.359%205.226%2012.421%2013.64%2012.421M15.731%2048.93h24.515c.773%200%201.406-.586%201.406-1.383s-.633-1.406-1.406-1.406H15.73a1.39%201.39%200%200%200-1.382%201.406a1.37%201.37%200%200%200%201.382%201.383%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M27.988%2041.734c8.461%200%2013.664-5.062%2013.664-12.422V9.228c0-1.313-.867-2.157-2.18-2.157c-1.335%200-2.156.844-2.156%202.157V28.96c0%205.227-3.445%208.766-9.328%208.766c-5.86%200-9.304-3.54-9.304-8.766V9.227c0-1.313-.868-2.157-2.18-2.157c-1.336%200-2.156.844-2.156%202.157v20.086c0%207.359%205.226%2012.421%2013.64%2012.421M15.731%2048.93h24.515c.773%200%201.406-.586%201.406-1.383s-.633-1.406-1.406-1.406H15.73a1.39%201.39%200%200%200-1.382%201.406a1.37%201.37%200%200%200%201.382%201.383%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/underline.svg?color=%231a73e8&size=48