Menu

Beta
Sign in
Notification SVG icon, rounded

Notification SVG icon, rounded

A notification symbol for alerts about new activity or updates. Use it in a social app’s navigation bar or a creator platform’s account dashboard.

Free · from Creator Social Icons, Rounded

Similar SVGs

More from Creator Social Icons, Rounded

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jWuN9p5LOcrx/amnt.svg" alt="Notification" 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="amber" data-name="Amber"><path d="M557 247c0-15 2-31-2-45-13-38-69-40-84-3-6 14-4 32-4 47-12 7-27 10-40 17-37 21-62 58-72 98-16 63-2 136-25 201-7 18-16 35-27 50-14 20-51 45-36 73 4 8 11 12 20 13 22 3 46 0 69 0 52 0 104 0 157 0s105 0 159 0c21 0 45 3 66 0 19-3 27-21 20-38-5-14-18-23-27-35-15-19-28-40-37-64-36-103 17-242-105-302-10-6-21-8-32-12z" fill="#fac82b" stroke="#fac82b"/><path d="M424 753c6 1 11 3 14 8 5 6 5 15 8 22 10 25 38 44 66 44s55-18 66-44c3-7 3-15 7-21 3-5 9-9 15-9v-13h-176z" fill="#fac82b" stroke="#fac82b"/></g><g id="navy" data-name="Navy"><path d="M431 222c-118 60-113 130-122 249-2 26-4 54-13 79-11 28-28 50-48 72-25 29-29 75 5 100 26 19 101 12 135 12 96 0 194 0 291 0 42 0 99 8 115-43 5-17 3-36-6-52-8-15-21-26-32-40-56-72-34-157-51-240-7-36-24-70-50-95-12-13-26-23-41-32-5-3-16-6-20-10-4-6-4-27-7-36-33-82-154-58-156 36zm126 25c11 4 22 6 32 12 122 60 69 199 105 302 9 24 22 45 37 64 9 12 22 21 27 35 7 17-1 35-20 38-21 3-45 0-66 0-54 0-106 0-159 0s-105 0-157 0c-23 0-47 3-69 0-9-1-16-5-20-13-15-28 22-53 36-73 11-15 20-32 27-50 23-65 9-138 25-201 10-40 35-77 72-98 13-7 28-10 40-17 0-15-2-33 4-47 15-37 71-35 84 3 4 14 2 30 2 45z" fill="#153c6a" stroke="#153c6a"/><path d="M600 753c-6 0-12 4-15 9-4 6-4 14-7 21-11 26-38 44-66 44s-56-19-66-44c-3-7-3-16-8-22-3-5-8-7-14-8-38 2-4 60 8 73 19 22 50 36 80 36 29 0 60-13 80-36 12-13 46-71 8-73z" fill="#153c6a" stroke="#153c6a"/></g><g id="blue" data-name="Blue"><path d="M240 264c-11 1-17 10-24 17-35 34-59 80-67 128-4 19-5 40-4 59 1 27 20 120 55 117 14-1 23-14 21-27-2-11-17-35-21-49-11-34-11-69-3-104 6-28 21-56 40-78 11-15 40-33 23-54-5-6-13-9-20-9z" fill="#1e75cd" stroke="#1e75cd"/><path d="M779 264c-7 1-12 5-16 11-14 21 15 41 28 56 18 23 31 51 38 80 7 34 5 70-6 103-7 19-31 47-12 65 5 5 11 7 18 6 30-3 49-92 50-117 1-21 0-44-5-65-9-46-32-89-65-122-9-9-17-18-30-17z" fill="#1e75cd" stroke="#1e75cd"/><path d="M269 345c-24 4-42 67-45 87s-2 100 32 96c28-4 10-39 7-55-2-15-2-32 2-48 3-11 7-23 13-33 4-7 12-14 14-22 3-15-8-27-23-25z" fill="#1e75cd" stroke="#1e75cd"/><path d="M746 345c-11 3-15 15-14 24 2 9 11 16 15 24 7 13 12 27 14 41 2 11 2 22 1 33-2 16-20 46-2 58 5 3 10 4 16 2 10-2 13-12 16-20 8-22 11-45 9-68s-23-101-55-94z" fill="#1e75cd" stroke="#1e75cd"/></g></svg>
CSS background-image
.notification {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jWuN9p5LOcrx/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.notification {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jWuN9p5LOcrx/amnt.svg") center / contain no-repeat;
}
React
import NotificationSvg from "./notification.jsx"; // from the React tab above

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

Tags

notificationalertupdatemessage

Made with AMNT

AMNT Draw 1.2 drew this from the words Notification. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep each shape 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 Creator Social Icons, Rounded. 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