notifications circle icon
notifications-circle-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.
- Name
- notifications-circle-sharp
- Set
- IonIcons
- Style
- Sharp
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
Related icons in IonIcons
Use the notifications circle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M295.68 351.43v.57h.32Z"/><path fill="none" d="M256 384c22.28 0 39.36-10.63 39.66-32H216c0 21.75 17.53 32 40 32m39.67-32h.33l-.32-.57c0 .19-.01.38-.01.57"/><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48m0 336c-22.48 0-40-10.25-40-32h80c-.3 21.37-17.71 32-40 32m112-48H144v-28l28-36v-32.3c0-40.41 15.82-75.35 56-84.27l4-27.43h48l4 27.43c40 8.92 56 44 56 84.27V272l28 36Z"/></svg>
React
import type { SVGProps } from "react";
export function IonNotificationsCircleSharp(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="M295.68 351.43v.57h.32Z"/><path fill="none" d="M256 384c22.28 0 39.36-10.63 39.66-32H216c0 21.75 17.53 32 40 32m39.67-32h.33l-.32-.57c0 .19-.01.38-.01.57"/><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48m0 336c-22.48 0-40-10.25-40-32h80c-.3 21.37-17.71 32-40 32m112-48H144v-28l28-36v-32.3c0-40.41 15.82-75.35 56-84.27l4-27.43h48l4 27.43c40 8.92 56 44 56 84.27V272l28 36Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M295.68 351.43v.57h.32Z"/><path fill="none" d="M256 384c22.28 0 39.36-10.63 39.66-32H216c0 21.75 17.53 32 40 32m39.67-32h.33l-.32-.57c0 .19-.01.38-.01.57"/><path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48m0 336c-22.48 0-40-10.25-40-32h80c-.3 21.37-17.71 32-40 32m112-48H144v-28l28-36v-32.3c0-40.41 15.82-75.35 56-84.27l4-27.43h48l4 27.43c40 8.92 56 44 56 84.27V272l28 36Z"/></svg> </template>
CSS
.icon-notifications-circle-sharp {
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%22M295.68%20351.43v.57h.32Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M256%20384c22.28%200%2039.36-10.63%2039.66-32H216c0%2021.75%2017.53%2032%2040%2032m39.67-32h.33l-.32-.57c0%20.19-.01.38-.01.57%22%2F%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%2048m0%20336c-22.48%200-40-10.25-40-32h80c-.3%2021.37-17.71%2032-40%2032m112-48H144v-28l28-36v-32.3c0-40.41%2015.82-75.35%2056-84.27l4-27.43h48l4%2027.43c40%208.92%2056%2044%2056%2084.27V272l28%2036Z%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%22M295.68%20351.43v.57h.32Z%22%2F%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M256%20384c22.28%200%2039.36-10.63%2039.66-32H216c0%2021.75%2017.53%2032%2040%2032m39.67-32h.33l-.32-.57c0%20.19-.01.38-.01.57%22%2F%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%2048m0%20336c-22.48%200-40-10.25-40-32h80c-.3%2021.37-17.71%2032-40%2032m112-48H144v-28l28-36v-32.3c0-40.41%2015.82-75.35%2056-84.27l4-27.43h48l4%2027.43c40%208.92%2056%2044%2056%2084.27V272l28%2036Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/notifications-circle-sharp.svg?color=%231a73e8&size=48
