notification icon

notification-twotone from Ant Design Icons by HeskeyBaozi · TwoTone · MIT Free for personal and commercial use.

Name: notification-twotone
Set: Ant Design Icons
Style: TwoTone
Viewbox: 1024×1024
License: MIT

2 other variants in Ant Design Icons

notification-filled notification-outlined

The same icon in other sets

notificationBoxIcons v2 notificationBoxIcons v2 Solid notificationCarbon notificationElement Plus notification-fillMingCute Icon notificationMyna UI Icons notificationPhosphor notificationPixelarticons notification-fillRemix Icon notificationTabler Icons notificationTDesign Icons

Use the notification icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fill-opacity=".15" d="M229.6 678.1c-3.7 11.6-5.6 23.9-5.6 36.4c0-12.5 2-24.8 5.7-36.4zm76.3-260.2H184v188.2h121.9l12.9 5.2L840 820.7V203.3L318.8 412.7z"/><path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1m496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3z"/></svg>

React

import type { SVGProps } from "react";

export function AntDesignNotificationTwotone(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fillOpacity=".15" d="M229.6 678.1c-3.7 11.6-5.6 23.9-5.6 36.4c0-12.5 2-24.8 5.7-36.4zm76.3-260.2H184v188.2h121.9l12.9 5.2L840 820.7V203.3L318.8 412.7z"/><path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1m496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" fill-opacity=".15" d="M229.6 678.1c-3.7 11.6-5.6 23.9-5.6 36.4c0-12.5 2-24.8 5.7-36.4zm76.3-260.2H184v188.2h121.9l12.9 5.2L840 820.7V203.3L318.8 412.7z"/><path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1m496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3z"/></svg>
</template>

CSS

.icon-notification-twotone {
  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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-opacity%3D%22.15%22%20d%3D%22M229.6%20678.1c-3.7%2011.6-5.6%2023.9-5.6%2036.4c0-12.5%202-24.8%205.7-36.4zm76.3-260.2H184v188.2h121.9l12.9%205.2L840%20820.7V203.3L318.8%20412.7z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M880%20112c-3.8%200-7.7.7-11.6%202.3L292%20345.9H128c-8.8%200-16%207.4-16%2016.6v299c0%209.2%207.2%2016.6%2016%2016.6h101.7c-3.7%2011.6-5.7%2023.9-5.7%2036.4c0%2065.9%2053.8%20119.5%20120%20119.5c55.4%200%20102.1-37.6%20115.9-88.4l408.6%20164.2c3.9%201.5%207.8%202.3%2011.6%202.3c16.9%200%2032-14.2%2032-33.2V145.2C912%20126.2%20897%20112%20880%20112M344%20762.3c-26.5%200-48-21.4-48-47.8c0-11.2%203.9-21.9%2011-30.4l84.9%2034.1c-2%2024.6-22.7%2044.1-47.9%2044.1m496%2058.4L318.8%20611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840%20203.3z%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-opacity%3D%22.15%22%20d%3D%22M229.6%20678.1c-3.7%2011.6-5.6%2023.9-5.6%2036.4c0-12.5%202-24.8%205.7-36.4zm76.3-260.2H184v188.2h121.9l12.9%205.2L840%20820.7V203.3L318.8%20412.7z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M880%20112c-3.8%200-7.7.7-11.6%202.3L292%20345.9H128c-8.8%200-16%207.4-16%2016.6v299c0%209.2%207.2%2016.6%2016%2016.6h101.7c-3.7%2011.6-5.7%2023.9-5.7%2036.4c0%2065.9%2053.8%20119.5%20120%20119.5c55.4%200%20102.1-37.6%20115.9-88.4l408.6%20164.2c3.9%201.5%207.8%202.3%2011.6%202.3c16.9%200%2032-14.2%2032-33.2V145.2C912%20126.2%20897%20112%20880%20112M344%20762.3c-26.5%200-48-21.4-48-47.8c0-11.2%203.9-21.9%2011-30.4l84.9%2034.1c-2%2024.6-22.7%2044.1-47.9%2044.1m496%2058.4L318.8%20611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840%20203.3z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ant-design/notification-twotone.svg?color=%231a73e8&size=48