notification bell icon
notification-bell-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- notification-bell-fill
- Set
- Mage Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Mage Icons
Related icons in Mage Icons
Use the notification bell icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.161 16.656a2.26 2.26 0 0 1-.41 1.088a2.27 2.27 0 0 1-1.89 1h-2.94a4.4 4.4 0 0 1-.23.788a4 4 0 0 1-2.18 2.178c-.495.2-1.026.298-1.56.29h-.08a3.9 3.9 0 0 1-1.44-.29a3.75 3.75 0 0 1-1.32-.87a3.85 3.85 0 0 1-.87-1.308a4.4 4.4 0 0 1-.23-.789h-2.82a2.24 2.24 0 0 1-1.94-.849a2.78 2.78 0 0 1-.26-2.367a6.7 6.7 0 0 1 .88-1.618a3.83 3.83 0 0 0 .82-1.768c0-2.886 0-3.865 1.58-5.743a5.7 5.7 0 0 1 1.9-1.478l.78-.38a.4.4 0 0 0 .1-.09a.3.3 0 0 0 .06-.13a3 3 0 0 1 1.905-2.142a3 3 0 0 1 2.835.434a2.72 2.72 0 0 1 1 1.758v.1a.35.35 0 0 0 .11.1l.72.35c.73.35 1.378.85 1.9 1.468c1.58 1.888 1.58 2.867 1.58 5.753c.134.69.44 1.336.89 1.878c.36.481.652 1.009.87 1.568c.164.332.247.698.24 1.069"/></svg>
React
import type { SVGProps } from "react";
export function MageNotificationBellFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.161 16.656a2.26 2.26 0 0 1-.41 1.088a2.27 2.27 0 0 1-1.89 1h-2.94a4.4 4.4 0 0 1-.23.788a4 4 0 0 1-2.18 2.178c-.495.2-1.026.298-1.56.29h-.08a3.9 3.9 0 0 1-1.44-.29a3.75 3.75 0 0 1-1.32-.87a3.85 3.85 0 0 1-.87-1.308a4.4 4.4 0 0 1-.23-.789h-2.82a2.24 2.24 0 0 1-1.94-.849a2.78 2.78 0 0 1-.26-2.367a6.7 6.7 0 0 1 .88-1.618a3.83 3.83 0 0 0 .82-1.768c0-2.886 0-3.865 1.58-5.743a5.7 5.7 0 0 1 1.9-1.478l.78-.38a.4.4 0 0 0 .1-.09a.3.3 0 0 0 .06-.13a3 3 0 0 1 1.905-2.142a3 3 0 0 1 2.835.434a2.72 2.72 0 0 1 1 1.758v.1a.35.35 0 0 0 .11.1l.72.35c.73.35 1.378.85 1.9 1.468c1.58 1.888 1.58 2.867 1.58 5.753c.134.69.44 1.336.89 1.878c.36.481.652 1.009.87 1.568c.164.332.247.698.24 1.069"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21.161 16.656a2.26 2.26 0 0 1-.41 1.088a2.27 2.27 0 0 1-1.89 1h-2.94a4.4 4.4 0 0 1-.23.788a4 4 0 0 1-2.18 2.178c-.495.2-1.026.298-1.56.29h-.08a3.9 3.9 0 0 1-1.44-.29a3.75 3.75 0 0 1-1.32-.87a3.85 3.85 0 0 1-.87-1.308a4.4 4.4 0 0 1-.23-.789h-2.82a2.24 2.24 0 0 1-1.94-.849a2.78 2.78 0 0 1-.26-2.367a6.7 6.7 0 0 1 .88-1.618a3.83 3.83 0 0 0 .82-1.768c0-2.886 0-3.865 1.58-5.743a5.7 5.7 0 0 1 1.9-1.478l.78-.38a.4.4 0 0 0 .1-.09a.3.3 0 0 0 .06-.13a3 3 0 0 1 1.905-2.142a3 3 0 0 1 2.835.434a2.72 2.72 0 0 1 1 1.758v.1a.35.35 0 0 0 .11.1l.72.35c.73.35 1.378.85 1.9 1.468c1.58 1.888 1.58 2.867 1.58 5.753c.134.69.44 1.336.89 1.878c.36.481.652 1.009.87 1.568c.164.332.247.698.24 1.069"/></svg> </template>
CSS
.icon-notification-bell-fill {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.161%2016.656a2.26%202.26%200%200%201-.41%201.088a2.27%202.27%200%200%201-1.89%201h-2.94a4.4%204.4%200%200%201-.23.788a4%204%200%200%201-2.18%202.178c-.495.2-1.026.298-1.56.29h-.08a3.9%203.9%200%200%201-1.44-.29a3.75%203.75%200%200%201-1.32-.87a3.85%203.85%200%200%201-.87-1.308a4.4%204.4%200%200%201-.23-.789h-2.82a2.24%202.24%200%200%201-1.94-.849a2.78%202.78%200%200%201-.26-2.367a6.7%206.7%200%200%201%20.88-1.618a3.83%203.83%200%200%200%20.82-1.768c0-2.886%200-3.865%201.58-5.743a5.7%205.7%200%200%201%201.9-1.478l.78-.38a.4.4%200%200%200%20.1-.09a.3.3%200%200%200%20.06-.13a3%203%200%200%201%201.905-2.142a3%203%200%200%201%202.835.434a2.72%202.72%200%200%201%201%201.758v.1a.35.35%200%200%200%20.11.1l.72.35c.73.35%201.378.85%201.9%201.468c1.58%201.888%201.58%202.867%201.58%205.753c.134.69.44%201.336.89%201.878c.36.481.652%201.009.87%201.568c.164.332.247.698.24%201.069%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21.161%2016.656a2.26%202.26%200%200%201-.41%201.088a2.27%202.27%200%200%201-1.89%201h-2.94a4.4%204.4%200%200%201-.23.788a4%204%200%200%201-2.18%202.178c-.495.2-1.026.298-1.56.29h-.08a3.9%203.9%200%200%201-1.44-.29a3.75%203.75%200%200%201-1.32-.87a3.85%203.85%200%200%201-.87-1.308a4.4%204.4%200%200%201-.23-.789h-2.82a2.24%202.24%200%200%201-1.94-.849a2.78%202.78%200%200%201-.26-2.367a6.7%206.7%200%200%201%20.88-1.618a3.83%203.83%200%200%200%20.82-1.768c0-2.886%200-3.865%201.58-5.743a5.7%205.7%200%200%201%201.9-1.478l.78-.38a.4.4%200%200%200%20.1-.09a.3.3%200%200%200%20.06-.13a3%203%200%200%201%201.905-2.142a3%203%200%200%201%202.835.434a2.72%202.72%200%200%201%201%201.758v.1a.35.35%200%200%200%20.11.1l.72.35c.73.35%201.378.85%201.9%201.468c1.58%201.888%201.58%202.867%201.58%205.753c.134.69.44%201.336.89%201.878c.36.481.652%201.009.87%201.568c.164.332.247.698.24%201.069%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/notification-bell-fill.svg?color=%231a73e8&size=48
