diff --git a/lib/Notification/blip/NotificationBlip.tsx b/lib/Notification/blip/NotificationBlip.tsx
new file mode 100644
index 000000000..e7f12e3d3
--- /dev/null
+++ b/lib/Notification/blip/NotificationBlip.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import cx from 'classnames';
+
+interface Props {
+  className?: string;
+}
+
+export default function NotificationBlip({ className }: Props) {
+  const classes = cx('notification-blip', className);
+  return <div className={classes}></div>;
+}
\ No newline at end of file
diff --git a/lib/Notification/blip/styles/NotificationBlip.scss b/lib/Notification/blip/styles/NotificationBlip.scss
new file mode 100644
index 000000000..8e4b9070e
--- /dev/null
+++ b/lib/Notification/blip/styles/NotificationBlip.scss
@@ -0,0 +1,9 @@
+.notification-blip {
+  @apply absolute h-full w-full;
+}
+
+.notification-blip::after {
+  @apply rounded-full absolute block h-1.5 w-1.5 bg-red-40 right-[13%] top-[13%];
+
+  content: '';
+}
\ No newline at end of file
diff --git a/stories/components/Icons.stories.tsx b/stories/components/Icons.stories.tsx
index 3700e2c3b..603e94fb7 100644
--- a/stories/components/Icons.stories.tsx
+++ b/stories/components/Icons.stories.tsx
@@ -125,6 +125,7 @@ const allIcons = (additionalProps?: any) => (
     <Icon name="caretRight" {...additionalProps} />
     <Icon name="arrowReturn" {...additionalProps} />
     <Icon name="arrowRightAngle" {...additionalProps} />
+    <Icon name="bell" {...additionalProps} />
   </div>
 );
 
diff --git a/stories/components/NotificationBlip.stories.tsx b/stories/components/NotificationBlip.stories.tsx
new file mode 100644
index 000000000..934df9eb8
--- /dev/null
+++ b/stories/components/NotificationBlip.stories.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Button, ButtonIcon } from "../../lib";
+import { Icon } from "../../lib";
+import NotificationBlipComponent from "../../lib/Notification/blip/NotificationBlip";
+import StoryItem from "../styleguide/StoryItem";
+
+export default {
+  title: 'GUI/Notification Blip',
+  component: NotificationBlipComponent,
+};
+
+export const NotificationBlip = (args: any) => <>
+  <StoryItem
+    title="Notification blip"
+    description="A visual indicator to inform the user they have notifications"
+  >
+    <ButtonIcon name={'bell'}>
+      <NotificationBlipComponent />
+    </ButtonIcon>
+  </StoryItem>
+</>;
\ No newline at end of file
diff --git a/styles/components/_ui.scss b/styles/components/_ui.scss
index 7e84a67a3..67fa61519 100644
--- a/styles/components/_ui.scss
+++ b/styles/components/_ui.scss
@@ -7,6 +7,7 @@
 @import "../../lib/Avatar/AvatarGroup/styles";
 @import "../../lib/CheckToggle/styles";
 @import "../../lib/Notification/styles";
+@import "../../lib/Notification/blip/styles/NotificationBlip";
 @import "../../lib/Dropdown/styles";
 @import "../../lib/DropdownMenu/styles";
 @import "../../lib/Progress/styles";