diff --git a/components/icons/FlatLogoIcon/README.md b/components/icons/FlatLogoIcon/README.md
deleted file mode 100644
index a4ca44a3..00000000
--- a/components/icons/FlatLogoIcon/README.md
+++ /dev/null
@@ -1,18 +0,0 @@
-### Flat Logo Examples
-
-The benefit of using a component for a flat icon like this is that it can be
-styled using the surrounding div. The default icon looks like this
-
-```ts
-
-
-
-```
-
-But we can style it to be any color using the text color of a surrounding div
-
-```ts
-
-
-
-```
diff --git a/components/icons/FlatLogoIcon/flatLogoIcon.tsx b/components/icons/FlatLogoIcon/flatLogoIcon.tsx
deleted file mode 100644
index 57f856dc..00000000
--- a/components/icons/FlatLogoIcon/flatLogoIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-/**
- * This is the flattened Nebula Logo SVG
- *
- * This component simply returns the source of the svg so that it can be manipulated directly in
- * the DOM rather than using an IMG tag. Change color of the svg by changing the text color of the
- * surrouding div.
- */
-export function FlatLogoIcon() {
- return (
- <>
-
-
- );
-}
diff --git a/components/icons/LogoIcon/logoIcon.tsx b/components/icons/LogoIcon/logoIcon.tsx
index 89c457b2..39fb4bf8 100644
--- a/components/icons/LogoIcon/logoIcon.tsx
+++ b/components/icons/LogoIcon/logoIcon.tsx
@@ -3,228 +3,37 @@ import React from 'react';
* This is the Nebula Logo SVG
*
* This component simply returns the source of the svg so that it can be manipulated directly in
- * the DOM rather than using an IMG tag.
+ * the DOM rather than using an IMG tag. Change color of the svg with the prop.
*/
-export function LogoIcon() {
+
+type LogoIconProps = {
+ dark?: boolean;
+};
+
+export default function LogoIcon(props: LogoIconProps) {
return (
<>
);
diff --git a/components/navigation/topMenu/topMenu.tsx b/components/navigation/topMenu/topMenu.tsx
index c28e948b..29d00927 100644
--- a/components/navigation/topMenu/topMenu.tsx
+++ b/components/navigation/topMenu/topMenu.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useState } from 'react';
-import { LogoIcon } from '../../icons/LogoIcon/logoIcon';
+import LogoIcon from '../../icons/LogoIcon/logoIcon';
/**
* This is a component to hold UTD Trends branding and basic navigation
diff --git a/pages/index.tsx b/pages/index.tsx
index 6544e8b2..01b711b8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,7 @@ import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import { SplashPageSearchBar } from '../components/common/SplashPageSearchBar/splashPageSearchBar';
-import { LogoIcon } from '../components/icons/LogoIcon/logoIcon';
+import LogoIcon from '../components/icons/LogoIcon/logoIcon';
import { WaveSVG } from '../components/icons/Wave/waveSVG';
import { Wave2SVG } from '../components/icons/Wave2/wave2SVG';
import SearchQuery from '../modules/SearchQuery/SearchQuery';