diff --git a/src/assets/shopping-bag.svg b/src/assets/shopping-bag.svg
new file mode 100644
index 0000000..94bf1a8
--- /dev/null
+++ b/src/assets/shopping-bag.svg
@@ -0,0 +1,53 @@
+
+
+
diff --git a/src/components/cart-icon/cart-icon.component.jsx b/src/components/cart-icon/cart-icon.component.jsx
new file mode 100644
index 0000000..c3ddadb
--- /dev/null
+++ b/src/components/cart-icon/cart-icon.component.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+import { ReactComponent as ShoppingIcon } from "../../assets/shopping-bag.svg";
+
+import "./cart-icon.styles.scss";
+
+const CartIcon = () => (
+
+
+ 0
+
+);
+
+export default CartIcon;
diff --git a/src/components/cart-icon/cart-icon.styles.scss b/src/components/cart-icon/cart-icon.styles.scss
new file mode 100644
index 0000000..8614846
--- /dev/null
+++ b/src/components/cart-icon/cart-icon.styles.scss
@@ -0,0 +1,21 @@
+.cart-icon {
+ width: 45px;
+ height: 45px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ .shopping-icon {
+ width: 24px;
+ height: 24px;
+ }
+
+ .item-count {
+ position: absolute;
+ font-size: 10px;
+ font-weight: bold;
+ bottom: 12px;
+ }
+}
diff --git a/src/components/header/header.component.jsx b/src/components/header/header.component.jsx
index 18ee9dd..0606440 100644
--- a/src/components/header/header.component.jsx
+++ b/src/components/header/header.component.jsx
@@ -4,6 +4,8 @@ import { connect } from "react-redux";
import { auth } from "../../firebase/firebase.utils";
+import CartIcon from "../cart-icon/cart-icon.component";
+
import "./header.styles.scss";
import { ReactComponent as Logo } from "../../assets/crown.svg";
@@ -28,6 +30,7 @@ const Header = ({ currentUser }) => (
SIGN IN
)}
+
);