notifications off circle icon
notifications-off-circle from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- notifications-off-circle
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
Related icons in IonIcons
Use the notifications off circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48M146.83 313c16.33-19.34 27.86-27.47 27.86-80.8q0-3.75.2-7.26a4 4 0 0 1 7-2.52l98 106.87a4 4 0 0 1-2.94 6.7H158C146.18 336 140.06 321 146.83 313m148.93 43.41C293.53 375.14 276.92 384 256 384s-37.51-8.86-39.75-27.58a4 4 0 0 1 4-4.42h71.53a4 4 0 0 1 3.98 4.42Zm67 17.42a16 16 0 0 1-22.6-1.08l-192-212a16 16 0 0 1 23.68-21.52l192 212a16 16 0 0 1-1.08 22.61ZM361 323.21L216.49 165.53a4 4 0 0 1 1.3-6.36c1.31-.58 2.61-1.12 3.89-1.63a11.33 11.33 0 0 0 6.32-6.68c3.72-12.26 14.15-22.86 28-22.86s24.29 10.6 28 22.86a11.34 11.34 0 0 0 6.34 6.68c21.21 8.44 47 25.81 47 74.67c0 53.33 11.54 61.46 27.87 80.8a12.1 12.1 0 0 1 2.76 7.25a4 4 0 0 1-6.97 2.95"/></svg>
React
import type { SVGProps } from "react";
export function IonNotificationsOffCircle(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48M146.83 313c16.33-19.34 27.86-27.47 27.86-80.8q0-3.75.2-7.26a4 4 0 0 1 7-2.52l98 106.87a4 4 0 0 1-2.94 6.7H158C146.18 336 140.06 321 146.83 313m148.93 43.41C293.53 375.14 276.92 384 256 384s-37.51-8.86-39.75-27.58a4 4 0 0 1 4-4.42h71.53a4 4 0 0 1 3.98 4.42Zm67 17.42a16 16 0 0 1-22.6-1.08l-192-212a16 16 0 0 1 23.68-21.52l192 212a16 16 0 0 1-1.08 22.61ZM361 323.21L216.49 165.53a4 4 0 0 1 1.3-6.36c1.31-.58 2.61-1.12 3.89-1.63a11.33 11.33 0 0 0 6.32-6.68c3.72-12.26 14.15-22.86 28-22.86s24.29 10.6 28 22.86a11.34 11.34 0 0 0 6.34 6.68c21.21 8.44 47 25.81 47 74.67c0 53.33 11.54 61.46 27.87 80.8a12.1 12.1 0 0 1 2.76 7.25a4 4 0 0 1-6.97 2.95"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48M146.83 313c16.33-19.34 27.86-27.47 27.86-80.8q0-3.75.2-7.26a4 4 0 0 1 7-2.52l98 106.87a4 4 0 0 1-2.94 6.7H158C146.18 336 140.06 321 146.83 313m148.93 43.41C293.53 375.14 276.92 384 256 384s-37.51-8.86-39.75-27.58a4 4 0 0 1 4-4.42h71.53a4 4 0 0 1 3.98 4.42Zm67 17.42a16 16 0 0 1-22.6-1.08l-192-212a16 16 0 0 1 23.68-21.52l192 212a16 16 0 0 1-1.08 22.61ZM361 323.21L216.49 165.53a4 4 0 0 1 1.3-6.36c1.31-.58 2.61-1.12 3.89-1.63a11.33 11.33 0 0 0 6.32-6.68c3.72-12.26 14.15-22.86 28-22.86s24.29 10.6 28 22.86a11.34 11.34 0 0 0 6.34 6.68c21.21 8.44 47 25.81 47 74.67c0 53.33 11.54 61.46 27.87 80.8a12.1 12.1 0 0 1 2.76 7.25a4 4 0 0 1-6.97 2.95"/></svg> </template>
CSS
.icon-notifications-off-circle {
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%22currentColor%22%20d%3D%22M256%2048C141.31%2048%2048%20141.31%2048%20256s93.31%20208%20208%20208s208-93.31%20208-208S370.69%2048%20256%2048M146.83%20313c16.33-19.34%2027.86-27.47%2027.86-80.8q0-3.75.2-7.26a4%204%200%200%201%207-2.52l98%20106.87a4%204%200%200%201-2.94%206.7H158C146.18%20336%20140.06%20321%20146.83%20313m148.93%2043.41C293.53%20375.14%20276.92%20384%20256%20384s-37.51-8.86-39.75-27.58a4%204%200%200%201%204-4.42h71.53a4%204%200%200%201%203.98%204.42Zm67%2017.42a16%2016%200%200%201-22.6-1.08l-192-212a16%2016%200%200%201%2023.68-21.52l192%20212a16%2016%200%200%201-1.08%2022.61ZM361%20323.21L216.49%20165.53a4%204%200%200%201%201.3-6.36c1.31-.58%202.61-1.12%203.89-1.63a11.33%2011.33%200%200%200%206.32-6.68c3.72-12.26%2014.15-22.86%2028-22.86s24.29%2010.6%2028%2022.86a11.34%2011.34%200%200%200%206.34%206.68c21.21%208.44%2047%2025.81%2047%2074.67c0%2053.33%2011.54%2061.46%2027.87%2080.8a12.1%2012.1%200%200%201%202.76%207.25a4%204%200%200%201-6.97%202.95%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%22currentColor%22%20d%3D%22M256%2048C141.31%2048%2048%20141.31%2048%20256s93.31%20208%20208%20208s208-93.31%20208-208S370.69%2048%20256%2048M146.83%20313c16.33-19.34%2027.86-27.47%2027.86-80.8q0-3.75.2-7.26a4%204%200%200%201%207-2.52l98%20106.87a4%204%200%200%201-2.94%206.7H158C146.18%20336%20140.06%20321%20146.83%20313m148.93%2043.41C293.53%20375.14%20276.92%20384%20256%20384s-37.51-8.86-39.75-27.58a4%204%200%200%201%204-4.42h71.53a4%204%200%200%201%203.98%204.42Zm67%2017.42a16%2016%200%200%201-22.6-1.08l-192-212a16%2016%200%200%201%2023.68-21.52l192%20212a16%2016%200%200%201-1.08%2022.61ZM361%20323.21L216.49%20165.53a4%204%200%200%201%201.3-6.36c1.31-.58%202.61-1.12%203.89-1.63a11.33%2011.33%200%200%200%206.32-6.68c3.72-12.26%2014.15-22.86%2028-22.86s24.29%2010.6%2028%2022.86a11.34%2011.34%200%200%200%206.34%206.68c21.21%208.44%2047%2025.81%2047%2074.67c0%2053.33%2011.54%2061.46%2027.87%2080.8a12.1%2012.1%200%200%201%202.76%207.25a4%204%200%200%201-6.97%202.95%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/notifications-off-circle.svg?color=%231a73e8&size=48
