Menu

Beta
Sign in
Notifications SVG icon, rounded

Notifications SVG icon, rounded

A bell signals alerts or updates that may need attention. Use it in a mobile app toolbar or a website account dashboard to open a list of recent notifications.

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/HzeAmPURv_f2/amnt.svg" alt="Notifications" 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="M28 15L28 13C28 10.79 29.79 9 32 9C34.21 9 36 10.79 36 13L36 15" fill="none" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M26 47L26 49C26 52.31 28.69 55 32 55C35.31 55 38 52.31 38 49L38 47" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 29C18 21.27 24.27 15 32 15C39.73 15 46 21.27 46 29L46 36C46 38.65 47.05 41.2 48.93 43.07L50.41 44.59C51.67 45.85 50.78 48 49 48L15 48C13.22 48 12.33 45.85 13.59 44.59L15.07 43.07C16.95 41.2 18 38.65 18 36Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.notifications {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HzeAmPURv_f2/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.notifications {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/HzeAmPURv_f2/amnt.svg") center / contain no-repeat;
}
React
import NotificationsSvg from "./notifications.jsx"; // from the React tab above

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

Tags

notificationsalertsbellupdates

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Notifications. 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