Two Bubbles SVG element, flat

Free

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.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

two speech conversation speech bubbles element flat

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} />

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.

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

How to use it

Made with AMNT

Rest of Speech Bubbles, Flat

Similar SVGs