Speech Bubble SVG element, flat

Free

This wide oval bubble points down toward a speaker. It fits dialogue in a classroom worksheet or spoken instructions in an illustrated guide.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

speech bubble talk speech bubbles element flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8l7y4Xq9Xe9m/amnt.svg" alt="Speech Bubble" 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="M100 24C52.5 24 14 53.5 14 90c0 32.5 30.5 59.5 70.7 65L111 184l5-29.4c40-5.6 70-32.4 70-64.6 0-36.5-38.5-66-86-66Z"/></svg>

CSS background-image

.speech-bubble {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8l7y4Xq9Xe9m/amnt.svg");
  background-size: contain;
}

CSS mask-image (takes the text colour)

.speech-bubble {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/8l7y4Xq9Xe9m/amnt.svg") center / contain no-repeat;
}

React

import SpeechBubbleSvg from "./speech-bubble.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Speech Bubble: Wide oval bubble with a pointed tail extending down toward a speaker. 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