draw text icon

draw-text-24-regular from Fluent UI System Icons by Microsoft Corporation · 24 Regular · MIT Free for personal and commercial use.

Name: draw-text-24-regular
Set: Fluent UI System Icons
Style: 24 Regular
Viewbox: 24×24
License: MIT

3 other variants in Fluent UI System Icons

draw-text-20-filled draw-text-20-regular draw-text-24-filled

Related icons in Fluent UI System Icons

draw-image-20-filled draw-shape-20-filled

Use the draw text icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.998 5.715L7.233 13.5h5.53zm3.575 10.067L13.295 15H6.7l-1.244 3.504a.75.75 0 0 1-1.414-.502L9.16 3.592c.28-.79 1.396-.79 1.676 0l3.912 11.015zm-8.588 4.592c-.525.117-1.162-.123-1.631-.38c-.209-.113-.487.072-.388.288c.242.529.731 1.133 1.71 1.255c.98.121 1.766-.347 2.55-.815c.583-.348 1.165-.696 1.826-.799c.086-.013.144.088.105.166c-.242.484-.356 1.37.218 1.818c.848.662 3.237.292 3.828.088q.073-.007.148-.027l1.83-.457a2.7 2.7 0 0 0 1.248-.707l5.903-5.902a2.286 2.286 0 0 0-3.233-3.232l-5.902 5.902a2.7 2.7 0 0 0-.706 1.247l-.428 1.712c-.355.17-.71.202-1.133.105c-.126-.03-.18-.175-.127-.293c.43-.962-.19-1.776-1.03-2.113c-.955-.385-2.226.515-3.292 1.268c-.592.42-1.12.793-1.496.876"/></svg>

React

import type { SVGProps } from "react";

export function FluentDrawText24Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.998 5.715L7.233 13.5h5.53zm3.575 10.067L13.295 15H6.7l-1.244 3.504a.75.75 0 0 1-1.414-.502L9.16 3.592c.28-.79 1.396-.79 1.676 0l3.912 11.015zm-8.588 4.592c-.525.117-1.162-.123-1.631-.38c-.209-.113-.487.072-.388.288c.242.529.731 1.133 1.71 1.255c.98.121 1.766-.347 2.55-.815c.583-.348 1.165-.696 1.826-.799c.086-.013.144.088.105.166c-.242.484-.356 1.37.218 1.818c.848.662 3.237.292 3.828.088q.073-.007.148-.027l1.83-.457a2.7 2.7 0 0 0 1.248-.707l5.903-5.902a2.286 2.286 0 0 0-3.233-3.232l-5.902 5.902a2.7 2.7 0 0 0-.706 1.247l-.428 1.712c-.355.17-.71.202-1.133.105c-.126-.03-.18-.175-.127-.293c.43-.962-.19-1.776-1.03-2.113c-.955-.385-2.226.515-3.292 1.268c-.592.42-1.12.793-1.496.876"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.998 5.715L7.233 13.5h5.53zm3.575 10.067L13.295 15H6.7l-1.244 3.504a.75.75 0 0 1-1.414-.502L9.16 3.592c.28-.79 1.396-.79 1.676 0l3.912 11.015zm-8.588 4.592c-.525.117-1.162-.123-1.631-.38c-.209-.113-.487.072-.388.288c.242.529.731 1.133 1.71 1.255c.98.121 1.766-.347 2.55-.815c.583-.348 1.165-.696 1.826-.799c.086-.013.144.088.105.166c-.242.484-.356 1.37.218 1.818c.848.662 3.237.292 3.828.088q.073-.007.148-.027l1.83-.457a2.7 2.7 0 0 0 1.248-.707l5.903-5.902a2.286 2.286 0 0 0-3.233-3.232l-5.902 5.902a2.7 2.7 0 0 0-.706 1.247l-.428 1.712c-.355.17-.71.202-1.133.105c-.126-.03-.18-.175-.127-.293c.43-.962-.19-1.776-1.03-2.113c-.955-.385-2.226.515-3.292 1.268c-.592.42-1.12.793-1.496.876"/></svg>
</template>

CSS

.icon-draw-text-24-regular {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.998%205.715L7.233%2013.5h5.53zm3.575%2010.067L13.295%2015H6.7l-1.244%203.504a.75.75%200%200%201-1.414-.502L9.16%203.592c.28-.79%201.396-.79%201.676%200l3.912%2011.015zm-8.588%204.592c-.525.117-1.162-.123-1.631-.38c-.209-.113-.487.072-.388.288c.242.529.731%201.133%201.71%201.255c.98.121%201.766-.347%202.55-.815c.583-.348%201.165-.696%201.826-.799c.086-.013.144.088.105.166c-.242.484-.356%201.37.218%201.818c.848.662%203.237.292%203.828.088q.073-.007.148-.027l1.83-.457a2.7%202.7%200%200%200%201.248-.707l5.903-5.902a2.286%202.286%200%200%200-3.233-3.232l-5.902%205.902a2.7%202.7%200%200%200-.706%201.247l-.428%201.712c-.355.17-.71.202-1.133.105c-.126-.03-.18-.175-.127-.293c.43-.962-.19-1.776-1.03-2.113c-.955-.385-2.226.515-3.292%201.268c-.592.42-1.12.793-1.496.876%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.998%205.715L7.233%2013.5h5.53zm3.575%2010.067L13.295%2015H6.7l-1.244%203.504a.75.75%200%200%201-1.414-.502L9.16%203.592c.28-.79%201.396-.79%201.676%200l3.912%2011.015zm-8.588%204.592c-.525.117-1.162-.123-1.631-.38c-.209-.113-.487.072-.388.288c.242.529.731%201.133%201.71%201.255c.98.121%201.766-.347%202.55-.815c.583-.348%201.165-.696%201.826-.799c.086-.013.144.088.105.166c-.242.484-.356%201.37.218%201.818c.848.662%203.237.292%203.828.088q.073-.007.148-.027l1.83-.457a2.7%202.7%200%200%200%201.248-.707l5.903-5.902a2.286%202.286%200%200%200-3.233-3.232l-5.902%205.902a2.7%202.7%200%200%200-.706%201.247l-.428%201.712c-.355.17-.71.202-1.133.105c-.126-.03-.18-.175-.127-.293c.43-.962-.19-1.776-1.03-2.113c-.955-.385-2.226.515-3.292%201.268c-.592.42-1.12.793-1.496.876%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/draw-text-24-regular.svg?color=%231a73e8&size=48