diff --git a/package.json b/package.json
index 03be8123..0c1b3d20 100644
--- a/package.json
+++ b/package.json
@@ -71,11 +71,11 @@
   "size-limit": [
     {
       "path": "dist/macaw-ui.cjs.production.min.js",
-      "limit": "45 KB"
+      "limit": "50 KB"
     },
     {
       "path": "dist/macaw-ui.esm.js",
-      "limit": "25 KB"
+      "limit": "35 KB"
     }
   ],
   "devDependencies": {
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 2f388420..b3bdc98d 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -4,7 +4,7 @@ import CloseIcon from "@material-ui/icons/Close";
 import clsx from "clsx";
 import React from "react";
 
-import { Error, Info, Success, Warning } from "../icons";
+import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
 import { AlertBase, AlertBaseProps, AlertVariant } from "./AlertBase";
 import useStyles from "./styles";
 
@@ -15,13 +15,13 @@ export interface AlertProps extends AlertBaseProps {
 const Icon: React.FC<{ variant: AlertVariant }> = ({ variant }) => {
   switch (variant) {
     case "error":
-      return <Error />;
+      return <NotAllowedIcon />;
     case "warning":
-      return <Warning />;
+      return <WarningIcon />;
     case "success":
-      return <Success />;
+      return <CompleteIcon />;
     default:
-      return <Info />;
+      return <InfoIcon />;
   }
 };
 
diff --git a/src/Alert/styles.ts b/src/Alert/styles.ts
index 7605c2b4..b0e1482f 100644
--- a/src/Alert/styles.ts
+++ b/src/Alert/styles.ts
@@ -22,7 +22,6 @@ const useStyles = makeStyles(
     content: {
       padding: theme.spacing(0, 1),
     },
-    icon: {},
     root: {},
     titleBar: {
       marginTop: 6,
diff --git a/src/Notification/Notification.tsx b/src/Notification/Notification.tsx
index 712d49c6..e98d9dab 100644
--- a/src/Notification/Notification.tsx
+++ b/src/Notification/Notification.tsx
@@ -6,20 +6,20 @@ import CloseIcon from "@material-ui/icons/Close";
 import clsx from "clsx";
 import React from "react";
 
-import { Error, Info, Success, Warning } from "../icons";
+import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
 import useStyles from "./styles";
 import type { NotificationProps, NotificationType } from "./types";
 
 const Icon: React.FC<{ type: NotificationType }> = ({ type }) => {
   switch (type) {
     case "error":
-      return <Error />;
+      return <NotAllowedIcon />;
     case "warning":
-      return <Warning />;
+      return <WarningIcon />;
     case "success":
-      return <Success />;
+      return <CompleteIcon />;
     default:
-      return <Info />;
+      return <InfoIcon />;
   }
 };
 
diff --git a/src/Notification/styles.ts b/src/Notification/styles.ts
index c3dd2038..e59e827e 100644
--- a/src/Notification/styles.ts
+++ b/src/Notification/styles.ts
@@ -67,7 +67,6 @@ const useStyles = makeStyles(
       marginTop: 6,
       marginBottom: theme.spacing(0.5),
     },
-    icon: {},
   }),
   { name: "Notification" }
 );
diff --git a/src/icons/CheckboxChecked.tsx b/src/icons/CheckboxCheckedIcon.tsx
similarity index 84%
rename from src/icons/CheckboxChecked.tsx
rename to src/icons/CheckboxCheckedIcon.tsx
index 2ef557cf..fbedb2af 100644
--- a/src/icons/CheckboxChecked.tsx
+++ b/src/icons/CheckboxCheckedIcon.tsx
@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const CheckboxChecked = createSvgIcon(
+export const CheckboxCheckedIcon = createSvgIcon(
   <>
     <rect x="5" y="5" width="14" height="14" fill="currentColor" />
     <path
@@ -11,5 +11,5 @@ export const CheckboxChecked = createSvgIcon(
       fill="white"
     />
   </>,
-  "CheckboxChecked"
+  "CheckboxCheckedIcon"
 );
diff --git a/src/icons/Checkbox.tsx b/src/icons/CheckboxIcon.tsx
similarity index 73%
rename from src/icons/Checkbox.tsx
rename to src/icons/CheckboxIcon.tsx
index 8091515c..07f5384f 100644
--- a/src/icons/Checkbox.tsx
+++ b/src/icons/CheckboxIcon.tsx
@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Checkbox = createSvgIcon(
+export const CheckboxIcon = createSvgIcon(
   <rect x="5" y="5" width="14" height="14" stroke="currentColor" fill="none" />,
-  "Checkbox"
+  "CheckboxIcon"
 );
diff --git a/src/icons/CheckboxIndeterminate.tsx b/src/icons/CheckboxIndeterminateIcon.tsx
similarity index 77%
rename from src/icons/CheckboxIndeterminate.tsx
rename to src/icons/CheckboxIndeterminateIcon.tsx
index 17a1bbda..d038b4a8 100644
--- a/src/icons/CheckboxIndeterminate.tsx
+++ b/src/icons/CheckboxIndeterminateIcon.tsx
@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const CheckboxIndeterminate = createSvgIcon(
+export const CheckboxIndeterminateIcon = createSvgIcon(
   <>
     <rect
       x="5"
@@ -13,5 +13,5 @@ export const CheckboxIndeterminate = createSvgIcon(
     />
     <rect x="8" y="11" width="8" height="2" fill="currentColor" />
   </>,
-  "CheckboxIndeterminate"
+  "CheckboxIndeterminateIcon"
 );
diff --git a/src/icons/Success.tsx b/src/icons/CompleteIcon.tsx
similarity index 84%
rename from src/icons/Success.tsx
rename to src/icons/CompleteIcon.tsx
index 00c81b83..96d687cd 100644
--- a/src/icons/Success.tsx
+++ b/src/icons/CompleteIcon.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 
-export const Success: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const CompleteIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
   <svg
     width="40"
     height="40"
@@ -20,4 +22,4 @@ export const Success: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 );
 
-Success.displayName = "Success";
+CompleteIcon.displayName = "CompleteIcon";
diff --git a/src/icons/Delete.tsx b/src/icons/DeleteIcon.tsx
similarity index 93%
rename from src/icons/Delete.tsx
rename to src/icons/DeleteIcon.tsx
index 28dff602..6e0a74ab 100644
--- a/src/icons/Delete.tsx
+++ b/src/icons/DeleteIcon.tsx
@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Delete = createSvgIcon(
+export const DeleteIcon = createSvgIcon(
   <path
     fillRule="evenodd"
     clipRule="evenodd"
@@ -9,5 +9,5 @@ export const Delete = createSvgIcon(
     fill="currentColor"
     fillOpacity="0.6"
   />,
-  "Delete"
+  "DeleteIcon"
 );
diff --git a/src/icons/Edit.tsx b/src/icons/EditIcon.tsx
similarity index 96%
rename from src/icons/Edit.tsx
rename to src/icons/EditIcon.tsx
index a1108672..21994b2a 100644
--- a/src/icons/Edit.tsx
+++ b/src/icons/EditIcon.tsx
@@ -1,12 +1,12 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Edit = createSvgIcon(
+export const EditIcon = createSvgIcon(
   <path
     fillRule="evenodd"
     clipRule="evenodd"
     d="m20.08125,2.98089c-1.2209,-1.21116 -3.1901,-1.21116 -4.4109,0l-0.9259,0.91856l-7.70221,7.641c-0.36706,0.36415 -0.58593,0.85157 -0.61423,1.36787l-0.1488,2.7151c-0.06931,1.2648 0.99458,2.2993 2.25694,2.1947l2.65699,-0.2202c0.48957,-0.0405 0.94911,-0.2524 1.29791,-0.5984l8.6196,-8.55117c1.2347,-1.22491 1.2347,-3.22129 0,-4.44619l-1.0294,-1.02127zm-11.56872,10.04163l6.96702,-6.91171l2.5116,2.4916l-6.97042,6.91501l-2.657,0.2202l0.1488,-2.7151zm8.44912,-8.38204l2.5116,2.4916l0.1671,-0.1658c0.4116,-0.4083 0.4116,-1.07376 0,-1.48206l-1.0294,-1.02126c-0.407,-0.40372 -1.0634,-0.40372 -1.4703,0l-0.179,0.17752zm-11.79343,-1.33339c-1.72946,0 -3.13147,1.40201 -3.13147,3.13147l0,12.52586c0,1.7295 1.40201,3.1315 3.13147,3.1315l12.52583,0c1.7295,0 3.1315,-1.402 3.1315,-3.1315l0,-4.5928c0,-0.5765 -0.4673,-1.0438 -1.0438,-1.0438c-0.5765,0 -1.0438,0.4673 -1.0438,1.0438l0,4.5928c0,0.5765 -0.4674,1.0438 -1.0439,1.0438l-12.52583,0c-0.57649,0 -1.04382,-0.4673 -1.04382,-1.0438l0,-12.52586c0,-0.57649 0.46733,-1.04382 1.04382,-1.04382l4.59282,0c0.57649,0 1.04382,-0.46734 1.04382,-1.04383c0,-0.57648 -0.46733,-1.04382 -1.04382,-1.04382l-4.59282,0z"
     fill="currentColor"
   />,
-  "Edit"
+  "EditIcon"
 );
diff --git a/src/icons/Filtering.tsx b/src/icons/FilteringIcon.tsx
similarity index 93%
rename from src/icons/Filtering.tsx
rename to src/icons/FilteringIcon.tsx
index f340ab22..dc74b836 100644
--- a/src/icons/Filtering.tsx
+++ b/src/icons/FilteringIcon.tsx
@@ -1,12 +1,12 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Filtering = createSvgIcon(
+export const FilteringIcon = createSvgIcon(
   <path
     fillRule="evenodd"
     clipRule="evenodd"
     d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V6.67157C22 7.46722 21.6839 8.23029 21.1213 8.79289L15.7929 14.1213C15.6054 14.3089 15.5 14.5632 15.5 14.8284V19C15.5 19.4089 15.251 19.7766 14.8714 19.9285L9.87139 21.9285C9.5633 22.0517 9.21414 22.0141 8.93937 21.8281C8.6646 21.642 8.5 21.3318 8.5 21V14.8284C8.5 14.5632 8.39464 14.3089 8.20711 14.1213L2.87868 8.79289C2.31607 8.23028 2 7.46722 2 6.67157V4ZM20 4H4V6.67157C4 6.93679 4.10536 7.19114 4.29289 7.37868L9.62132 12.7071C10.1839 13.2697 10.5 14.0328 10.5 14.8284V19.523L13.5 18.323V14.8284C13.5 14.0328 13.8161 13.2697 14.3787 12.7071L19.7071 7.37868C19.8946 7.19114 20 6.93679 20 6.67157V4Z"
     fill="currentColor"
   />,
-  "Filtering"
+  "FilteringIcon"
 );
diff --git a/src/icons/Info.tsx b/src/icons/InfoIcon.tsx
similarity index 86%
rename from src/icons/Info.tsx
rename to src/icons/InfoIcon.tsx
index 87414fd1..bdb2674d 100644
--- a/src/icons/Info.tsx
+++ b/src/icons/InfoIcon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Info: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg
     width="40"
     height="40"
@@ -20,4 +20,4 @@ export const Info: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 );
 
-Info.displayName = "Info";
+InfoIcon.displayName = "InfoIcon";
diff --git a/src/icons/Error.tsx b/src/icons/NotAllowedIcon.tsx
similarity index 84%
rename from src/icons/Error.tsx
rename to src/icons/NotAllowedIcon.tsx
index 5864a90d..da4c1aed 100644
--- a/src/icons/Error.tsx
+++ b/src/icons/NotAllowedIcon.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 
-export const Error: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const NotAllowedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
   <svg
     width="40"
     height="40"
@@ -20,4 +22,4 @@ export const Error: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 );
 
-Error.displayName = "Error";
+NotAllowedIcon.displayName = "NotAllowedIcon";
diff --git a/src/icons/NotAllowedInvertedIcon.tsx b/src/icons/NotAllowedInvertedIcon.tsx
new file mode 100644
index 00000000..7ce9e17f
--- /dev/null
+++ b/src/icons/NotAllowedInvertedIcon.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export const NotAllowedInvertedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+  props
+) => (
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="20" cy="20" r="16" fill="#F5FAFB" />
+    <circle cx="20" cy="20" r="20" fill="#FE6E76" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z"
+      fill="white"
+    />
+  </svg>
+);
+
+NotAllowedInvertedIcon.displayName = "NotAllowedInvertedIcon";
diff --git a/src/icons/Warning.tsx b/src/icons/WarningIcon.tsx
similarity index 85%
rename from src/icons/Warning.tsx
rename to src/icons/WarningIcon.tsx
index 30ade836..9666e6dd 100644
--- a/src/icons/Warning.tsx
+++ b/src/icons/WarningIcon.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Warning: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const WarningIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg
     width="40"
     height="40"
@@ -20,4 +20,4 @@ export const Warning: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   </svg>
 );
 
-Warning.displayName = "Warning";
+WarningIcon.displayName = "WarningIcon";
diff --git a/src/icons/index.ts b/src/icons/index.ts
index be153b03..95d687f3 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -1,11 +1,12 @@
-export * from "./Checkbox";
-export * from "./CheckboxChecked";
-export * from "./CheckboxIndeterminate";
-export * from "./Error";
-export * from "./Info";
+export * from "./CheckboxIcon";
+export * from "./CheckboxCheckedIcon";
+export * from "./CheckboxIndeterminateIcon";
+export * from "./InfoIcon";
 export * from "./Logo";
-export * from "./Success";
-export * from "./Warning";
-export * from "./Edit";
-export * from "./Filtering";
-export * from "./Delete";
+export * from "./WarningIcon";
+export * from "./EditIcon";
+export * from "./FilteringIcon";
+export * from "./DeleteIcon";
+export * from "./CompleteIcon";
+export * from "./NotAllowedIcon";
+export * from "./NotAllowedInvertedIcon";
diff --git a/src/index.tsx b/src/index.tsx
index bf3d69ec..87fc5060 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
 export * from "./theme";
 export * from "./extensions";
+export * from "./icons";
 export * from "./Savebar";
 export * from "./Backlink";
 export * from "./ConfirmButton";