Menu

Notification Bell SVG icon, line

Notification Bell SVG icon, line

A bell outline includes a small clapper and two ringing marks. It works for alert settings in an app menu or notification counts on a dashboard.

Similar SVGs

More from Communication icons, line · Set 2

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/gUP8LZoq98OW/amnt.svg" alt="Notification Bell" 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="M502 175c-105 6-180 91-196 192-10 63-2 129-20 192-10 36-30 67-57 92-23 21-67 79-5 81 99 3 199 0 299 0 50 0 100 0 150 0 24 0 132 4 146-3 42-20-20-74-35-89-27-28-42-62-50-99-19-85 1-177-43-257-37-69-110-113-189-109z" fill="#fdd205" stroke="#fdd205"/><path d="M776 203c-14 2-22 16-17 29 3 10 22 25 29 35 10 13 18 28 24 43 11 27 16 56 14 84-1 13-8 27-4 39 3 10 14 15 23 14 40-4 20-118 10-144-9-24-48-103-79-100z" fill="#fdd205" stroke="#fdd205"/><path d="M244 203c-29 3-68 80-76 105-9 25-29 141 15 139 9 0 18-7 20-16 1-9-3-20-4-30-4-31 2-65 15-95 7-17 17-33 29-47 6-9 19-16 22-26 6-15-5-31-21-30z" fill="#fdd205" stroke="#fdd205"/><path d="M575 158c0-9 1-18-1-27-15-68-125-71-125 27 11-2 21-5 32-7 32-4 63-1 94 7z" fill="#fdd205" stroke="#fdd205"/></g><g id="navy" data-name="Navy"><path d="M537 757c66 0 131 0 197 0 26 0 56 4 82 0 34-5 47-39 38-69-15-44-62-66-83-113-24-53-21-116-24-173-3-53-15-105-44-151-13-20-29-37-47-52-12-10-25-19-40-26-3-2-13-4-15-8-1-2 0-4-1-7-2-23 2-34-9-56-35-68-139-57-163 13-6 17-4 33-4 51-68 34-114 83-135 158-22 81-2 181-37 255-6 13-15 26-25 37-27 29-74 64-57 110 5 14 16 24 29 28 22 7 186 3 223 3 21 0 44 2 65 1v8c-12 6-25 12-34 22-50 54-6 138 65 134 39-2 72-35 75-74 2-29-13-59-39-74-3-2-14-4-16-8-1-2-1-6-1-9zm38-599c-31-8-62-11-94-7-11 2-21 5-32 7 0-98 110-95 125-27 2 9 1 18 1 27zm-73 17c79-4 152 40 189 109 44 80 24 172 43 257 8 37 23 71 50 99 15 15 77 69 35 89-14 7-122 3-146 3-50 0-100 0-150 0-100 0-200 3-299 0-62-2-18-60 5-81 27-25 47-56 57-92 18-63 10-129 20-192 16-101 91-186 196-192zm2 612c75-9 87 103 16 111-74 8-87-101-16-111z" fill="#012156" stroke="#012156"/><path d="M242 181c-43 3-87 90-98 127-12 40-29 164 41 161 57-2 33-68 36-102 2-21 9-41 18-60 6-13 14-26 23-36 8-10 19-18 24-29 13-31-11-63-44-61zm2 22c16-1 27 15 21 30-3 10-16 17-22 26-12 14-22 30-29 47-13 30-19 64-15 95 1 10 5 21 4 30-2 9-11 16-20 16-44 2-24-114-15-139 8-25 47-102 76-105z" fill="#012156" stroke="#012156"/><path d="M775 181c-13 1-25 8-32 18-24 33 5 53 23 76 9 11 17 24 23 38 9 19 14 40 15 61 1 18-6 37-5 55 1 25 24 42 47 40 64-5 46-129 33-168-13-38-57-123-104-120zm1 22c31-3 70 76 79 100 10 26 30 140-10 144-9 1-20-4-23-14-4-12 3-26 4-39 2-28-3-57-14-84-6-15-14-30-24-43-7-10-26-25-29-35-5-13 3-27 17-29z" fill="#012156" stroke="#012156"/></g><g id="mustard" data-name="Mustard"><path d="M504 787c-71 10-58 119 16 111 71-8 59-120-16-111z" fill="#cba42b" stroke="#cba42b"/></g></svg>
CSS background-image
.notification-bell {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/gUP8LZoq98OW/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.notification-bell {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/gUP8LZoq98OW/amnt.svg") center / contain no-repeat;
}
React
import NotificationBellSvg from "./notification-bell.jsx"; // from the React tab above

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

Tags

Made with AMNT

AMNT Draw 1.2 drew this from the words Notification Bell: Bell outline with a small clapper and two short ringing marks. A flat colour icon. as part of the pack Communication icons, line · 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