Menu

Beta
Sign in
Chat Message SVG icon, rounded

Chat Message SVG icon, rounded

A speech bubble represents a chat or written conversation. Use it in a customer support website widget or a mobile app messaging screen to open or identify a conversation.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/0cHh3Fk8RPnq/amnt.svg" alt="Chat Message" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M18 13L46 13C50.42 13 54 16.58 54 21L54 38C54 42.42 50.42 46 46 46L28 46L17 53L17 46C12.95 45.5 10 42.08 10 38L10 21C10 16.58 13.58 13 18 13Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 25L43 25M21 34L36 34" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.chat-message {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/0cHh3Fk8RPnq/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.chat-message {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/0cHh3Fk8RPnq/amnt.svg") center / contain no-repeat;
}
React
import ChatMessageSvg from "./chat-message.jsx"; // from the React tab above

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

Tags

chatmessageconversationspeech

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Chat message. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. 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