Notification Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: notification bell alert badge message ping

The Notification icon is commonly used in alert panels, push notification UIs and dashboard headers. Available as a free SVG - copy the code or download directly.

img tag

<img src="https://proicons.com/icon/321073.svg" alt="Notification icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321073.svg" alt="Notification icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321073.svg"
  alt="Notification icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-notification {
  background-image: url('https://proicons.com/icon/321073.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>notification</title>
    <defs>
        <circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
        <polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
    </defs>
    <g id="notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-2-Copy-27" fill="#FFF0F1" x="56" y="61" width="208" height="57"></rect>
        <rect id="Path-Copy-2" fill="#DA1E28" x="56" y="61" width="3" height="57"></rect>
        <g id="Group" transform="translate(69.000000, 73.000000)">
            <g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
                <g id="error--filled" transform="translate(0.875000, 0.875000)">
                    <g id="icon-2">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
                    </g>
                    <g id="icon-1" transform="translate(2.625000, 2.625000)">
                        <mask id="mask-4" fill="white">
                            <use xlink:href="#path-3"></use>
                        </mask>
                        <use id="icon-color" fill="#FFFFFF" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
                    </g>
                </g>
                <rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
            </g>
        </g>
        <rect id="Rectangle-Copy-14" fill="#A8A8A8" style="mix-blend-mode: multiply;" x="91" y="77" width="84" height="5"></rect>
        <rect id="Rectangle-Copy-23" fill="#C6C6C6" style="mix-blend-mode: multiply;" x="91" y="97" width="128" height="5"></rect>
        <rect id="Rectangle-Copy-24" fill="#C6C6C6" style="mix-blend-mode: multiply;" x="91" y="87" width="145.277372" height="5"></rect>
    </g>
</svg>