General icon

Notification JSX Icon

Q: Is the Notification JSX icon free?

Yes. You can copy the Notification JSX component and use it in React and Next.js projects.

Q: Can I customize the Notification icon?

Yes. Edit SVG attributes or pass className, width, height and color props depending on the component.

Copy the Notification icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.

Browse all icons

ComponentNotificationIcon

FilenotificationIcon.jsx

CategoryGeneral

Copy-ready code

Notification React JSX component

export const NotificationIcon = ({ width = "40px", height = "40px", color = "#000", ...props }) => (
  <svg {...props} width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12.02 2.90991C8.70997 2.90991 6.01997 5.59991 6.01997 8.90991V11.7999C6.01997 12.4099 5.75997 13.3399 5.44997 13.8599L4.29997 15.7699C3.58997 16.9499 4.07997 18.2599 5.37997 18.6999C9.68997 20.1399 14.34 20.1399 18.65 18.6999C19.86 18.2999 20.39 16.8699 19.73 15.7699L18.58 13.8599C18.28 13.3399 18.02 12.4099 18.02 11.7999V8.90991C18.02 5.60991 15.32 2.90991 12.02 2.90991Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" />
    <path d="M13.87 3.19994C13.56 3.10994 13.24 3.03994 12.91 2.99994C11.95 2.87994 11.03 2.94994 10.17 3.19994C10.46 2.45994 11.18 1.93994 12.02 1.93994C12.86 1.93994 13.58 2.45994 13.87 3.19994Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
    <path d="M15.02 19.0601C15.02 20.7101 13.67 22.0601 12.02 22.0601C11.2 22.0601 10.44 21.7201 9.90002 21.1801C9.36002 20.6401 9.02002 19.8801 9.02002 19.0601" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" />
  </svg>
);

How to use the Notification icon

import { NotificationIcon } from "@/assets/icons/notificationIcon"

export default function Example() {
  return <NotificationIcon width="32px" height="32px" />
}

Built for the web

Use it in your stack

This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.

ReactNext.jsJSXSVGGeneral icons

Looking for a similar mark? Browse the related icons below or explore the full general collection.

Related JSX icons

Add

Bell

Calendar

Camera

Check

Copy

FAQ

Is the Notification JSX icon free?

Yes. You can copy the JSX component and use it in React and Next.js projects.

Can I customize it?

Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.