Beta

Exclamation Bubble SVG element, flat

Free

A thick exclamation stroke and round dot fill this speech bubble. Use it for a warning in a setup guide or an urgent note on a noticeboard.

Sign in to download. Free SVGs are free with any account.

exclamationalertwarningspeech bubbleselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ohag6P5JegM4/amnt.svg" alt="Exclamation Bubble" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true"><path d="M47 25h106c14.9 0 27 12.1 27 27v74c0 14.9-12.1 27-27 27H76c-11 10-27 18-49 22 7-9 12-18 15-27-12.6-2.4-22-13.5-22-26V52c0-14.9 12.1-27 27-27Z" fill="none" stroke="currentColor" stroke-width="10" stroke-linejoin="round"/><path d="M100 53c5.5 0 10 4.5 10 10v43c0 5.5-4.5 10-10 10s-10-4.5-10-10V63c0-5.5 4.5-10 10-10Z"/><circle cx="100" cy="133" r="10"/></svg>
CSS background-image
.exclamation-bubble {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ohag6P5JegM4/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.exclamation-bubble {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Ohag6P5JegM4/amnt.svg") center / contain no-repeat;
}
React
import ExclamationBubbleSvg from "./exclamation-bubble.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Exclamation Bubble: Speech bubble containing a thick vertical exclamation stroke and separate round dot. as part of the pack Speech Bubbles, Flat. Want one like it? Make your own in the SVG studio.

Rest of Speech Bubbles, 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