Menu

Beta
Sign in
Beta
Chat SVG icon, line

Chat SVG icon, line

Two overlapping speech bubbles each contain a short line. They can mark a chat tab in a support portal or a conversation list in a messaging app.

Free · from Communication icons, line · Set 2

Similar SVGs

More from Communication icons, line · Set 2

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-4Rpo5xC-awo/amnt.svg" alt="Chat" 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="baby-blue" data-name="Baby Blue"><path d="M621 356c-130 7-253 121-206 259 19 56 66 100 121 120 34 13 71 17 106 15 18-1 35-2 52-5 10-2 22-7 31-6 7 1 12 6 18 9 24 16 50 31 75 45 3 2 12 9 15 6 3-2-21-60-25-71-2-6-7-15-6-21 1-7 37-40 45-50 18-25 32-54 36-85 13-95-51-181-142-207-38-11-80-11-120-9zM535 523c12-2 26 0 39 0 35 0 70 0 106 0 23 0 48-1 72 0 28 1 32 30 9 35-13 3-29 1-42 1-34 0-68 0-102 0-24 0-49 1-72 0-29-1-32-31-10-36z" fill="#c9e2fb" stroke="#c9e2fb"/></g><g id="butter" data-name="Butter"><path d="M621 327c-23-90-90-146-183-158-17-2-34-1-51-1-56 0-111 10-158 43-64 45-100 127-79 205 9 35 31 66 57 90 4 4 8 6 9 12 3 18-31 71-32 95 20-9 92-58 104-60 14-2 31 7 46 9 14 2 28 0 42 4 0-65 25-125 73-169 35-33 80-54 128-64 14-3 29-2 44-6zm-357-7c13-2 29 0 43 0 34 0 68 0 102 0 23 0 48-2 72 0s30 31 5 36c-12 2-28 0-40 0-35 0-70 0-104 0-24 0-49 2-72 0-25-2-31-31-6-36z" fill="#fced99" stroke="#fced99"/></g><g id="grape" data-name="Grape"><path d="M650 327c-15-93-91-162-181-182-26-5-52-6-78-6-99 0-190 31-244 118-31 48-41 109-26 164 6 24 17 48 32 68 4 6 30 34 31 37 1 6-7 18-9 24-6 17-20 42-21 60 0 9 3 17 10 23 20 17 44-3 62-13 11-6 58-36 66-37 7-1 34 7 44 8 14 2 28 2 43 2 7 23 12 45 24 67 35 64 106 106 178 116 18 2 36 2 55 2 16 0 34-1 50-3 11-1 25-7 35-6 4 1 8 4 11 6 22 14 46 27 69 41 8 4 15 10 24 12 21 4 40-11 38-32-1-11-24-72-30-82 27-27 52-54 66-90 46-110-17-234-124-277-41-17-82-20-125-20zm-29 0c-15 4-30 3-44 6-48 10-93 31-128 64-48 44-73 104-73 169-14-4-28-2-42-4-15-2-32-11-46-9-12 2-84 51-104 60 1-24 35-77 32-95-1-6-5-8-9-12-26-24-48-55-57-90-21-78 15-160 79-205 47-33 102-43 158-43 17 0 34-1 51 1 93 12 160 68 183 158zm0 29c40-2 82-2 120 9 91 26 155 112 142 207-4 31-18 60-36 85-8 10-44 43-45 50-1 6 4 15 6 21 4 11 28 69 25 71-3 3-12-4-15-6-25-14-51-29-75-45-6-3-11-8-18-9-9-1-21 4-31 6-17 3-34 4-52 5-35 2-72-2-106-15-55-20-102-64-121-120-47-138 76-252 206-259z" fill="#022161" stroke="#022161"/><path d="M535 523c-22 5-19 35 10 36 23 1 48 0 72 0 34 0 68 0 102 0 13 0 29 2 42-1 23-5 19-34-9-35-24-1-49 0-72 0-36 0-71 0-106 0-13 0-27-2-39 0z" fill="#022161" stroke="#022161"/><path d="M264 320c-25 5-19 34 6 36 23 2 48 0 72 0 34 0 69 0 104 0 12 0 28 2 40 0 25-5 19-34-5-36s-49 0-72 0c-34 0-68 0-102 0-14 0-30-2-43 0z" fill="#022161" stroke="#022161"/></g></svg>
CSS background-image
.chat {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-4Rpo5xC-awo/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.chat {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-4Rpo5xC-awo/amnt.svg") center / contain no-repeat;
}
React
import ChatSvg from "./chat.jsx"; // from the React tab above

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

Tags

chatconversationmessagescommunicationiconline

Made with AMNT

AMNT Draw 1.2 drew this from the words Chat: Two overlapping speech bubbles, each with a short horizontal line. A flat colour icon. as part of the pack Communication icons, line · 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

Settings