Beta

Notification Bubble SVG element, flat

Free

A small circular badge sits on the upper right of a compact speech bubble. Place it by unread messages in an app or new comments on a forum.

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

notificationalertmessagespeech bubbleselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LUtWZIhYTb-u/amnt.svg" alt="Notification 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="M35 39h110c13.3 0 24 10.7 24 24v64c0 13.3-10.7 24-24 24H76l-31 24v-24H35c-13.3 0-24-10.7-24-24V63c0-13.3 10.7-24 24-24Z"/><circle cx="164" cy="39" r="25"/></svg>
CSS background-image
.notification-bubble {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LUtWZIhYTb-u/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.notification-bubble {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/LUtWZIhYTb-u/amnt.svg") center / contain no-repeat;
}
React
import NotificationBubbleSvg from "./notification-bubble.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Notification Bubble: Compact speech bubble with a small circular badge attached at its upper right. 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