Message SVG illustration, flat

Free

Three dots fill a rounded speech bubble with a short tail. Add it to a chat app welcome screen or a customer support contact page.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

message chat conversation spot illustration flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/gTnHVLVeWazi/amnt.svg" alt="Message" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><ellipse cx="200" cy="247" rx="112" ry="11" fill="#E5EBE8"/><path d="M113 69h178a32 32 0 0 1 32 32v76a32 32 0 0 1-32 32H158l-38 28a5 5 0 0 1-8-4v-24a32 32 0 0 1-31-32v-76a32 32 0 0 1 32-32Z" fill="#7FA5A0"/><path d="M109 60h178a32 32 0 0 1 32 32v76a32 32 0 0 1-32 32H154l-38 28a5 5 0 0 1-8-4v-24a32 32 0 0 1-31-32V92a32 32 0 0 1 32-32Z" fill="#B8D2C9"/><path d="M110 73h175a21 21 0 0 1 21 21v8a28 28 0 0 0-28-20H118a28 28 0 0 0-28 20v-8a21 21 0 0 1 20-21Z" fill="#D9E8DF"/><g fill="#527D79"><circle cx="145" cy="132" r="12"/><circle cx="198" cy="132" r="12"/><circle cx="251" cy="132" r="12"/></g></svg>

CSS background-image

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

React

import MessageSvg from "./message.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Message: Rounded speech bubble with three dots and a short tail. as part of the pack Everyday Spot Illustrations, Flat. Want one like it? Make your own in the SVG studio.

Rest of Everyday Spot Illustrations, 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