speech balloon emoji
speech-balloon from Twitter Emoji by Twitter · Default · Smileys & Emotion · CC-BY-4.0 Attribution required.
- Name
- speech-balloon
- Set
- Twitter Emoji
- Style
- Default
- Category
- Smileys & Emotion
- Viewbox
- 36×36
- License
- CC BY 4.0
The same emoji in other sets
More smileys & emotion icons from Twitter Emoji
alienalien-monsteranger-symbolangry-faceangry-face-with-hornsanguished-faceanxious-face-with-sweatastonished-facebeaming-face-with-smiling-eyesbeating-heartblack-heartblue-heartbroken-heartbrown-heartcat-with-tears-of-joycat-with-wry-smileclown-facecold-facecollisionconfounded-faceconfused-facecowboy-hat-facecrying-catcrying-face
Use the speech balloon emoji
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#bdddf4" d="M18 1C8.059 1 0 7.268 0 15c0 4.368 2.574 8.268 6.604 10.835C6.08 28.144 4.859 31.569 2 35c5.758-.96 9.439-3.761 11.716-6.416c1.376.262 2.805.416 4.284.416c9.941 0 18-6.268 18-14S27.941 1 18 1"/><circle cx="18" cy="15" r="2" fill="#2a6797"/><circle cx="26" cy="15" r="2" fill="#2a6797"/><circle cx="10" cy="15" r="2" fill="#2a6797"/></svg>
React
import type { SVGProps } from "react";
export function TwemojiSpeechBalloon(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#bdddf4" d="M18 1C8.059 1 0 7.268 0 15c0 4.368 2.574 8.268 6.604 10.835C6.08 28.144 4.859 31.569 2 35c5.758-.96 9.439-3.761 11.716-6.416c1.376.262 2.805.416 4.284.416c9.941 0 18-6.268 18-14S27.941 1 18 1"/><circle cx="18" cy="15" r="2" fill="#2a6797"/><circle cx="26" cy="15" r="2" fill="#2a6797"/><circle cx="10" cy="15" r="2" fill="#2a6797"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#bdddf4" d="M18 1C8.059 1 0 7.268 0 15c0 4.368 2.574 8.268 6.604 10.835C6.08 28.144 4.859 31.569 2 35c5.758-.96 9.439-3.761 11.716-6.416c1.376.262 2.805.416 4.284.416c9.941 0 18-6.268 18-14S27.941 1 18 1"/><circle cx="18" cy="15" r="2" fill="#2a6797"/><circle cx="26" cy="15" r="2" fill="#2a6797"/><circle cx="10" cy="15" r="2" fill="#2a6797"/></svg> </template>
CSS
.icon-speech-balloon {
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%2036%2036%22%3E%3Cpath%20fill%3D%22%23bdddf4%22%20d%3D%22M18%201C8.059%201%200%207.268%200%2015c0%204.368%202.574%208.268%206.604%2010.835C6.08%2028.144%204.859%2031.569%202%2035c5.758-.96%209.439-3.761%2011.716-6.416c1.376.262%202.805.416%204.284.416c9.941%200%2018-6.268%2018-14S27.941%201%2018%201%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%232a6797%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%232a6797%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%232a6797%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%2036%2036%22%3E%3Cpath%20fill%3D%22%23bdddf4%22%20d%3D%22M18%201C8.059%201%200%207.268%200%2015c0%204.368%202.574%208.268%206.604%2010.835C6.08%2028.144%204.859%2031.569%202%2035c5.758-.96%209.439-3.761%2011.716-6.416c1.376.262%202.805.416%204.284.416c9.941%200%2018-6.268%2018-14S27.941%201%2018%201%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%232a6797%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%232a6797%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%232a6797%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/twemoji/speech-balloon.svg?color=%231a73e8&size=48
