Beta

Three Bubbles SVG element, flat

Free

Three small speech bubbles form a loose triangle with gaps between them. They can mark a group discussion in a lesson plan or a message thread in a dashboard.

Sign in to download. Free SVGs are free with any account.

threemessagesdiscussionspeech bubbleselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HVhlnCA1jx4H/amnt.svg" alt="Three Bubbles" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true"><path d="M36 26h55a16 16 0 0 1 16 16v29a16 16 0 0 1-16 16H62L43 100l4-13H36a16 16 0 0 1-16-16V42a16 16 0 0 1 16-16Z"/><path d="M129 55h35a16 16 0 0 1 16 16v31a16 16 0 0 1-16 16h-8l4 13-19-13h-12a16 16 0 0 1-16-16V71a16 16 0 0 1 16-16Z"/><path d="M49 116h62a16 16 0 0 1 16 16v29a16 16 0 0 1-16 16H82l-19 13 4-13H49a16 16 0 0 1-16-16v-29a16 16 0 0 1 16-16Z"/></svg>
CSS background-image
.three-bubbles {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HVhlnCA1jx4H/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.three-bubbles {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HVhlnCA1jx4H/amnt.svg") center / contain no-repeat;
}
React
import ThreeBubblesSvg from "./three-bubbles.jsx"; // from the React tab above

<ThreeBubblesSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Three Bubbles: Three small speech bubbles arranged in a loose triangle with visible gaps. as part of the pack Speech Bubbles, Flat. Want one like it? Make your own in the SVG studio.

Rest of Speech Bubbles, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence