diff --git a/components/Header/Logo.js b/components/Header/Logo.js
new file mode 100644
index 0000000..211599b
--- /dev/null
+++ b/components/Header/Logo.js
@@ -0,0 +1,49 @@
+// @flow
+import React from 'react';
+
+const Logo = () => (
+  <svg
+    width="24"
+    height="29"
+    viewBox="0 0 24 29"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2 20.0789C13.9174 19.6639 14.4 18.8883 14.4 18C14.4 16.6745 13.3255 15.6 12 15.6C10.6745 15.6 9.6 16.6745 9.6 18C9.6 18.8883 10.0826 19.6639 10.8 20.0789V21.6C10.8 22.2627 11.3373 22.8 12 22.8C12.6627 22.8 13.2 22.2627 13.2 21.6V20.0789Z"
+      fill="url(#paint0_linear)"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.3905 10.3689C20.2716 1.07667 18.9621 0 12 0C5.03792 0 3.72841 1.07667 3.60955 10.3689C0.484609 11.4315 0 13.8619 0 19.2C0 27.6 1.2 28.8 12 28.8C22.8 28.8 24 27.6 24 19.2C24 13.8619 23.5154 11.4315 20.3905 10.3689ZM15.8346 2.68544C14.928 2.44887 13.7752 2.39919 12 2.4C10.2248 2.39919 9.07196 2.44887 8.1654 2.68544C7.43904 2.8659 7.17441 3.09677 6.99522 3.34706C6.74561 3.69573 6.45306 4.39304 6.25866 5.87989C6.11609 6.95433 6.04544 8.2459 6.01655 9.85748C7.57941 9.66222 9.54084 9.6 12 9.6C14.4592 9.6 16.4206 9.66222 17.9835 9.85748C17.9546 8.2459 17.8839 6.95433 17.7413 5.8799C17.5469 4.39305 17.2544 3.69573 17.0048 3.34707C16.8256 3.09677 16.561 2.8659 15.8346 2.68544ZM2.70147 14.6661C2.48002 15.6848 2.4 17.1067 2.4 19.2C2.4 21.2932 2.48002 22.7152 2.70147 23.7339C2.90889 24.688 3.19322 25.0662 3.46977 25.2925C3.80835 25.5695 4.47216 25.8907 5.92343 26.1076C7.36508 26.323 9.31177 26.4 12 26.4C14.6882 26.4 16.6349 26.323 18.0766 26.1076C19.5278 25.8908 20.1916 25.5695 20.5302 25.2925C20.8068 25.0662 21.0911 24.688 21.2985 23.7339C21.52 22.7152 21.6 21.2932 21.6 19.2C21.6 17.1067 21.52 15.6848 21.2985 14.6661C21.0911 13.712 20.8068 13.3338 20.5302 13.1075C20.1916 12.8305 19.5278 12.5092 18.0766 12.2924C16.6349 12.077 14.6882 12 12 12C9.31177 12 7.36508 12.077 5.92343 12.2924C4.47216 12.5092 3.80836 12.8305 3.46977 13.1075C3.19323 13.3338 2.90889 13.712 2.70147 14.6661Z"
+      fill="url(#paint1_linear)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear"
+        x1="12"
+        y1="0"
+        x2="12"
+        y2="28.8"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#A913DE" />
+        <stop offset="1" stopColor="#6AC9FF" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x1="12"
+        y1="0"
+        x2="12"
+        y2="28.8"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#A913DE" />
+        <stop offset="1" stopColor="#6AC9FF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default Logo;
diff --git a/components/Header/index.js b/components/Header/index.js
index 55b108f..f19b22d 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -1,8 +1,9 @@
 // @flow
 import * as React from 'react';
 import Link from 'next/link';
-import { Container, Logo, ButtonRowContainer } from './style';
+import { Container, ButtonRowContainer } from './style';
 import { PrimaryButton, GhostButton } from '../Button';
+import Logo from './Logo';
 
 type Props = {
   showHeaderShadow: boolean,
@@ -15,7 +16,7 @@ export default function Header(props: Props) {
     <Container showHeaderShadow={showHeaderShadow} data-cy="header">
       <Link href="/">
         <a style={{ display: 'flex', alignItems: 'center' }}>
-          <Logo>Security Checklist</Logo>
+          <Logo />
         </a>
       </Link>