Corner Question SVG element, flat

Corner Question SVG element, flat

A question mark tucked into the corner leaves most of this rectangular bubble open. Use it for a help prompt in an app or a question on a worksheet.

Similar SVGs

More from Speech Bubbles, Flat · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LotEzlqLlsKB/amnt.svg" alt="Corner Question" 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="white" data-name="White"><path d="M816 199h-7c-26 0-28 44-50 61-26 20-57 12-81-6h-496c-49-2-101 47-98 97l-1 34v129 12c0 71-14 164 75 187 51 13 82-21 58 53-10 33-18 69-31 102 13-8 24-21 36-31 24-22 50-44 75-66 9-9 52-50 59-53 14-6 73-2 91-2h8 211 9c35 0 110 5 140-3 37-11 66-42 73-79 6-31 2-110 2-146 0-22 3-135-1-147-29 11-26 42-54 61 64 44 32 131-29 131h-12c-68 0-92-108-27-132-44-31-27-84 4-118 8-9 18-17 28-24 15-11 50-27 36-50-4-6-11-10-18-10z" fill="#fcfcfc" stroke="#fcfcfc"/></g><g id="midnight" data-name="Midnight"><path d="M191 746c-7 31-44 123-39 148 2 13 14 19 26 16 13-2 25-18 35-26 34-30 69-59 102-90 10-9 42-40 51-45 12-7 120-3 143-3 48 0 96 0 144 0 30 0 59 0 90 0 58 0 109 1 148-51 12-15 20-33 25-52 6-26 3-55 3-81 0-43 0-85 0-127 0-25 0-49 0-73 0-9-5-32-2-38 2-5 13-10 16-14 29-26 43-65 40-103-15-176-312-158-311 16-107 0-214 0-320 0-35 0-69 0-103 0-66 0-118-1-161 56-11 14-18 33-22 51-5 24-1 50-2 74-2 54 0 108 0 162 0 23-2 46 1 69 11 70 68 111 136 111zM803 111c72-6 152 34 142 118-2 22-12 44-29 60-16 14-34 23-52 36-25 18-20 38-36 51-36 32-94-8-45-72 23-31 87-48 76-96-9-36-59-41-83-18-9 8-13 19-17 31-20 51-95 30-61-39 19-40 60-67 105-71zM791 415c64-8 77 86 15 95-63 9-76-86-15-95zM678 254c24 18 55 26 81 6 22-17 24-61 50-61h7c7 0 14 4 18 10 14 23-21 39-36 50-10 7-20 15-28 24-31 34-48 87-4 118-65 24-41 132 27 132h12c61 0 93-87 29-131 28-19 25-50 54-61 4 12 1 125 1 147 0 36 4 115-2 146-7 37-36 68-73 79-30 8-105 3-140 3h-9-211-8c-18 0-77-4-91 2-7 3-50 44-59 53-25 22-51 44-75 66-12 10-23 23-36 31 13-33 21-69 31-102 24-74-7-40-58-53-89-23-75-116-75-187v-12-129l1-34c-3-50 49-99 98-97z" fill="#03142b" stroke="#03142b"/></g><g id="blue" data-name="Blue"><path d="M803 111c-45 4-86 31-105 71-34 69 41 90 61 39 4-12 8-23 17-31 24-23 74-18 83 18 11 48-53 65-76 96-49 64 9 104 45 72 16-13 11-33 36-51 18-13 36-22 52-36 17-16 27-38 29-60 10-84-70-124-142-118z" fill="#098afc" stroke="#098afc"/><path d="M791 415c-61 9-48 104 15 95 62-9 49-103-15-95z" fill="#098afc" stroke="#098afc"/><path d="M182 254h496z" fill="#098afc" stroke="#098afc"/><path d="M83 385l1-34z" fill="#098afc" stroke="#098afc"/><path d="M83 526v-12z" fill="#098afc" stroke="#098afc"/><path d="M805 533h-12z" fill="#098afc" stroke="#098afc"/><path d="M674 716h-9z" fill="#098afc" stroke="#098afc"/><path d="M454 716h-8z" fill="#098afc" stroke="#098afc"/><path d="M809 199h7z" fill="#098afc" stroke="#098afc"/></g></svg>
CSS background-image
.corner-question {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LotEzlqLlsKB/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.corner-question {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LotEzlqLlsKB/amnt.svg") center / contain no-repeat;
}
React
import CornerQuestionSvg from "./corner-question.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Corner Question: Rectangular speech bubble with a question-mark shape tucked into its upper 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

Settings