Menu

Beta
Sign in
Beta
Two Bubbles SVG element, flat

Two Bubbles SVG element, flat

Two separate speech bubbles sit side by side at slightly different heights. Use them to represent an exchange on a contact page or a paired discussion activity.

Free · from Speech Bubbles, Flat

Similar SVGs

More from Speech Bubbles, Flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aIpt0ISdbXa-/amnt.svg" alt="Two 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="M22 34h66c9.9 0 18 8.1 18 18v51c0 9.9-8.1 18-18 18H52l-27 18 7-20c-6-3.1-10-9.3-10-16V52c0-9.9 8.1-18 18-18Z"/><path d="M112 70h66c9.9 0 18 8.1 18 18v51c0 9.9-8.1 18-18 18h-37l-27 18 7-20c-5.5-3.2-9-9.1-9-16V88c0-9.9 8.1-18 18-18Z"/></svg>
CSS background-image
.two-bubbles {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aIpt0ISdbXa-/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.two-bubbles {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/aIpt0ISdbXa-/amnt.svg") center / contain no-repeat;
}
React
import TwoBubblesSvg from "./two-bubbles.jsx"; // from the React tab above

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

Tags

twospeechconversationspeech bubbleselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Two Bubbles: Two separate speech bubbles side by side, one slightly higher than the other. as part of the pack Speech Bubbles, Flat. Want one like it? Make your own in the SVG studio.

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

Settings