notifications icon
notifications-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- notifications-outline
- Set
- IonIcons
- Style
- Outline
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
Related icons in IonIcons
Use the notifications icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M427.68 351.43C402 320 383.87 304 383.87 217.35C383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53c-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43C73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57M320 384v16a64 64 0 0 1-128 0v-16"/></svg>
React
import type { SVGProps } from "react";
export function IonNotificationsOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M427.68 351.43C402 320 383.87 304 383.87 217.35C383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53c-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43C73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57M320 384v16a64 64 0 0 1-128 0v-16"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M427.68 351.43C402 320 383.87 304 383.87 217.35C383.87 138 343.35 109.73 310 96c-4.43-1.82-8.6-6-9.95-10.55C294.2 65.54 277.8 48 256 48s-38.21 17.55-44 37.47c-1.35 4.6-5.52 8.71-9.95 10.53c-33.39 13.75-73.87 41.92-73.87 121.35C128.13 304 110 320 84.32 351.43C73.68 364.45 83 384 101.61 384h308.88c18.51 0 27.77-19.61 17.19-32.57M320 384v16a64 64 0 0 1-128 0v-16"/></svg> </template>
CSS
.icon-notifications-outline {
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%20512%20512%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M427.68%20351.43C402%20320%20383.87%20304%20383.87%20217.35C383.87%20138%20343.35%20109.73%20310%2096c-4.43-1.82-8.6-6-9.95-10.55C294.2%2065.54%20277.8%2048%20256%2048s-38.21%2017.55-44%2037.47c-1.35%204.6-5.52%208.71-9.95%2010.53c-33.39%2013.75-73.87%2041.92-73.87%20121.35C128.13%20304%20110%20320%2084.32%20351.43C73.68%20364.45%2083%20384%20101.61%20384h308.88c18.51%200%2027.77-19.61%2017.19-32.57M320%20384v16a64%2064%200%200%201-128%200v-16%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%20512%20512%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M427.68%20351.43C402%20320%20383.87%20304%20383.87%20217.35C383.87%20138%20343.35%20109.73%20310%2096c-4.43-1.82-8.6-6-9.95-10.55C294.2%2065.54%20277.8%2048%20256%2048s-38.21%2017.55-44%2037.47c-1.35%204.6-5.52%208.71-9.95%2010.53c-33.39%2013.75-73.87%2041.92-73.87%20121.35C128.13%20304%20110%20320%2084.32%20351.43C73.68%20364.45%2083%20384%20101.61%20384h308.88c18.51%200%2027.77-19.61%2017.19-32.57M320%20384v16a64%2064%200%200%201-128%200v-16%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/notifications-outline.svg?color=%231a73e8&size=48
