Menu

Beta
Sign in
Beta

Colours and style

Every picture in the library follows these, and so does every download.

Colour of single-colour icons
Palette for colourful pictures
As drawn
100%
Message Bubble SVG element, flat

Message Bubble SVG element, flat

With its tall rounded shape and tucked lower-right tail, this bubble suggests an outgoing message. Use it in an inbox layout or a tutorial about sending texts.

Free · from Speech Bubbles, Flat · Set 2

Similar SVGs

More from Speech Bubbles, Flat · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/2bxK2_AkPb-y/amnt.svg" alt="Message Bubble" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="blue" data-name="Blue"><path d="M791 961c-8-20-26-35-33-60-12-37 6-40 14-71 6-23 3-48 3-70 0-38 0-76 0-113 0-125 0-249 0-373 0-33 0-65 0-97 0-22 2-43 0-64-3-37-33-70-69-78-20-4-43-2-63-2-62 0-124 0-186 0-46 0-134-9-170 17-17 12-29 29-35 49-8 31-3 68-3 101 0 61 0 123 0 185 0 124 0 248 0 373 0 53-4 108 56 131 31 12 139 6 180 6 62 0 123 0 186 0 8 0 20-2 28 1 9 2 22 23 30 30 17 15 40 30 62 35z" fill="#017bfc" stroke="#017bfc"/></g><g id="navy" data-name="Navy"><path d="M335 19c-49 3-91 39-99 88-4 26-1 56-1 83 0 40 0 80 0 121 0 129 0 260 0 390 0 23 0 45 0 69 0 37-2 72 24 103 39 47 104 36 159 36 65 0 129 0 195 0 13 0 74-3 82 0 3 2 5 6 7 9 15 18 33 32 54 43 8 4 75 37 55 4-12-21-29-38-38-61-14-36 7-42 14-74 6-30 2-64 2-94 0-130 0-261 0-390 0-47 6-229-6-260-11-29-35-51-64-61-34-12-147-6-189-6-65 0-131-4-195 0zM791 961c-22-5-45-20-62-35-8-7-21-28-30-30-8-3-20-1-28-1-63 0-124 0-186 0-41 0-149 6-180-6-60-23-56-78-56-131 0-125 0-249 0-373 0-62 0-124 0-185 0-33-5-70 3-101 6-20 18-37 35-49 36-26 124-17 170-17 62 0 124 0 186 0 20 0 43-2 63 2 36 8 66 41 69 78 2 21 0 42 0 64 0 32 0 64 0 97 0 124 0 248 0 373 0 37 0 75 0 113 0 22 3 47-3 70-8 31-26 34-14 71 7 25 25 40 33 60z" fill="#012152" stroke="#012152"/></g></svg>
CSS background-image
.message-bubble {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/2bxK2_AkPb-y/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.message-bubble {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/2bxK2_AkPb-y/amnt.svg") center / contain no-repeat;
}
React
import MessageBubbleSvg from "./message-bubble.jsx"; // from the React tab above

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

Tags

messagechatinboxspeech bubbleselementflat

Made with AMNT

AMNT Draw 1.2 drew this from the words Message Bubble: Tall rounded rectangle with a small tail tucked into its lower right corner. A flat element. as part of the pack Speech Bubbles, Flat · Set 2. 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

Browse the library

Settings