speech icon

speech-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.

Name
speech-fill
Set
MingCute Icon
Style
Fill
Viewbox
24×24
License
Apache 2.0

1 other variant in MingCute Icon

speech-line

The same icon in other sets

speechHuge IconsspeechLucide

Use the speech icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13a1 1 0 0 1 .895 1.447l-3 6A1 1 0 0 1 18 21H6a1 1 0 0 1-.895-.553l-3-6A1 1 0 0 1 3 13zm-9-4c1.753 0 3.341.62 4.548 1.499c.592.43 1.117.942 1.528 1.501H5.924a7 7 0 0 1 1.528-1.501C8.66 9.621 10.247 9 12 9m0-6a3 3 0 1 1 0 6a3 3 0 0 1 0-6"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteSpeechFill(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="M21 13a1 1 0 0 1 .895 1.447l-3 6A1 1 0 0 1 18 21H6a1 1 0 0 1-.895-.553l-3-6A1 1 0 0 1 3 13zm-9-4c1.753 0 3.341.62 4.548 1.499c.592.43 1.117.942 1.528 1.501H5.924a7 7 0 0 1 1.528-1.501C8.66 9.621 10.247 9 12 9m0-6a3 3 0 1 1 0 6a3 3 0 0 1 0-6"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13a1 1 0 0 1 .895 1.447l-3 6A1 1 0 0 1 18 21H6a1 1 0 0 1-.895-.553l-3-6A1 1 0 0 1 3 13zm-9-4c1.753 0 3.341.62 4.548 1.499c.592.43 1.117.942 1.528 1.501H5.924a7 7 0 0 1 1.528-1.501C8.66 9.621 10.247 9 12 9m0-6a3 3 0 1 1 0 6a3 3 0 0 1 0-6"/></svg>
</template>

CSS

.icon-speech-fill {
  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%22M21%2013a1%201%200%200%201%20.895%201.447l-3%206A1%201%200%200%201%2018%2021H6a1%201%200%200%201-.895-.553l-3-6A1%201%200%200%201%203%2013zm-9-4c1.753%200%203.341.62%204.548%201.499c.592.43%201.117.942%201.528%201.501H5.924a7%207%200%200%201%201.528-1.501C8.66%209.621%2010.247%209%2012%209m0-6a3%203%200%201%201%200%206a3%203%200%200%201%200-6%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%22M21%2013a1%201%200%200%201%20.895%201.447l-3%206A1%201%200%200%201%2018%2021H6a1%201%200%200%201-.895-.553l-3-6A1%201%200%200%201%203%2013zm-9-4c1.753%200%203.341.62%204.548%201.499c.592.43%201.117.942%201.528%201.501H5.924a7%207%200%200%201%201.528-1.501C8.66%209.621%2010.247%209%2012%209m0-6a3%203%200%201%201%200%206a3%203%200%200%201%200-6%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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