speechbubble emoji

speechbubble from Firefox OS Emoji by Mozilla · Default · People · Apache-2.0 Free for personal and commercial use.

Name: speechbubble
Set: Firefox OS Emoji
Style: Default
Category: People
Viewbox: 512×512
License: Apache 2.0

More people icons from Firefox OS Emoji

Use the speechbubble emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="#E5E4DF" d="M256 0C122.2 0 13.7 108.6 13.7 242.5c0 62.2 23.4 118.9 61.8 161.8l-6.2 91.9c-.1.7-.2 1.5-.2 2.2v.2c.1 3.4 1.8 6.7 4.9 8.7c3 2 6.7 2.3 9.9 1.1l.1-.1c.7-.3 1.4-.6 2-1l79.4-39.8c28 11.3 58.5 17.5 90.6 17.5c133.8 0 242.2-108.6 242.2-242.5S389.7 0 256 0"/><circle cx="284.7" cy="281.3" r="11" fill="#2B3B47"/><circle cx="326.8" cy="281.3" r="11" fill="#2B3B47"/><circle cx="368.9" cy="281.3" r="11" fill="#2B3B47"/><path fill="none" stroke="#2B3B47" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22.445" d="M89 214.2h332.6M89 281.3h146.7"/></svg>

React

import type { SVGProps } from "react";

export function FxemojiSpeechbubble(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="#E5E4DF" d="M256 0C122.2 0 13.7 108.6 13.7 242.5c0 62.2 23.4 118.9 61.8 161.8l-6.2 91.9c-.1.7-.2 1.5-.2 2.2v.2c.1 3.4 1.8 6.7 4.9 8.7c3 2 6.7 2.3 9.9 1.1l.1-.1c.7-.3 1.4-.6 2-1l79.4-39.8c28 11.3 58.5 17.5 90.6 17.5c133.8 0 242.2-108.6 242.2-242.5S389.7 0 256 0"/><circle cx="284.7" cy="281.3" r="11" fill="#2B3B47"/><circle cx="326.8" cy="281.3" r="11" fill="#2B3B47"/><circle cx="368.9" cy="281.3" r="11" fill="#2B3B47"/><path fill="none" stroke="#2B3B47" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="22.445" d="M89 214.2h332.6M89 281.3h146.7"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="#E5E4DF" d="M256 0C122.2 0 13.7 108.6 13.7 242.5c0 62.2 23.4 118.9 61.8 161.8l-6.2 91.9c-.1.7-.2 1.5-.2 2.2v.2c.1 3.4 1.8 6.7 4.9 8.7c3 2 6.7 2.3 9.9 1.1l.1-.1c.7-.3 1.4-.6 2-1l79.4-39.8c28 11.3 58.5 17.5 90.6 17.5c133.8 0 242.2-108.6 242.2-242.5S389.7 0 256 0"/><circle cx="284.7" cy="281.3" r="11" fill="#2B3B47"/><circle cx="326.8" cy="281.3" r="11" fill="#2B3B47"/><circle cx="368.9" cy="281.3" r="11" fill="#2B3B47"/><path fill="none" stroke="#2B3B47" stroke-linecap="round" stroke-miterlimit="10" stroke-width="22.445" d="M89 214.2h332.6M89 281.3h146.7"/></svg>
</template>

CSS

.icon-speechbubble {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22%23E5E4DF%22%20d%3D%22M256%200C122.2%200%2013.7%20108.6%2013.7%20242.5c0%2062.2%2023.4%20118.9%2061.8%20161.8l-6.2%2091.9c-.1.7-.2%201.5-.2%202.2v.2c.1%203.4%201.8%206.7%204.9%208.7c3%202%206.7%202.3%209.9%201.1l.1-.1c.7-.3%201.4-.6%202-1l79.4-39.8c28%2011.3%2058.5%2017.5%2090.6%2017.5c133.8%200%20242.2-108.6%20242.2-242.5S389.7%200%20256%200%22%2F%3E%3Ccircle%20cx%3D%22284.7%22%20cy%3D%22281.3%22%20r%3D%2211%22%20fill%3D%22%232B3B47%22%2F%3E%3Ccircle%20cx%3D%22326.8%22%20cy%3D%22281.3%22%20r%3D%2211%22%20fill%3D%22%232B3B47%22%2F%3E%3Ccircle%20cx%3D%22368.9%22%20cy%3D%22281.3%22%20r%3D%2211%22%20fill%3D%22%232B3B47%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%232B3B47%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2222.445%22%20d%3D%22M89%20214.2h332.6M89%20281.3h146.7%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%20512%20512%22%3E%3Cpath%20fill%3D%22%23E5E4DF%22%20d%3D%22M256%200C122.2%200%2013.7%20108.6%2013.7%20242.5c0%2062.2%2023.4%20118.9%2061.8%20161.8l-6.2%2091.9c-.1.7-.2%201.5-.2%202.2v.2c.1%203.4%201.8%206.7%204.9%208.7c3%202%206.7%202.3%209.9%201.1l.1-.1c.7-.3%201.4-.6%202-1l79.4-39.8c28%2011.3%2058.5%2017.5%2090.6%2017.5c133.8%200%20242.2-108.6%20242.2-242.5S389.7%200%20256%200%22%2F%3E%3Ccircle%20cx%3D%22284.7%22%20cy%3D%22281.3%22%20r%3D%2211%22%20fill%3D%22%232B3B47%22%2F%3E%3Ccircle%20cx%3D%22326.8%22%20cy%3D%22281.3%22%20r%3D%2211%22%20fill%3D%22%232B3B47%22%2F%3E%3Ccircle%20cx%3D%22368.9%22%20cy%3D%22281.3%22%20r%3D%2211%22%20fill%3D%22%232B3B47%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%232B3B47%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2222.445%22%20d%3D%22M89%20214.2h332.6M89%20281.3h146.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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