notification icon

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

Name: notification-outlined
Set: Ant Design Icons
Style: Outlined
Viewbox: 1024×1024
License: MIT
Aliases: notification, notification-outline

2 other variants in Ant Design Icons

notification-filled notification-twotone

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" 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 AntDesignNotificationOutlined(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" 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" 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-outlined {
  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%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%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-outlined.svg?color=%231a73e8&size=48