3 files changed, 64 insertions, 5 deletions
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 8bf8b4a0..8fff18f4 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -17,8 +17,8 @@ const NavigationIcon = (props: NavigationIconProps) => {
   switch (props.tab) {
     case 'Home':
       imgSrc = props.disabled
-        ? require('../../assets/navigationIcons/home-new.png')
-        : require('../../assets/navigationIcons/home-new-clicked.png');
+        ? require('../../assets/navigationIcons/home.png')
+        : require('../../assets/navigationIcons/home-clicked.png');
       break;
     case 'Search':
       imgSrc = props.disabled
@@ -44,16 +44,16 @@ const NavigationIcon = (props: NavigationIconProps) => {
       imgSrc = null;
   }
   return (
-    <View style={styles.icon}>
+    <View style={styles.container}>
       <TouchableOpacity {...props}>
-        <Image source={imgSrc} />
+        <Image source={imgSrc} style={styles.icon} />
       </TouchableOpacity>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  icon: {
+  container: {
     flex: 1,
     justifyContent: 'center',
     shadowColor: '#000000',
@@ -64,6 +64,10 @@ const styles = StyleSheet.create({
     shadowRadius: 2,
     shadowOpacity: 0.4,
   },
+  icon: {
+    height: 30,
+    width: 30,
+  },
 });
 
 export default NavigationIcon;
diff --git a/src/components/common/SmallSocialIcon.tsx b/src/components/common/SmallSocialIcon.tsx
new file mode 100644
index 00000000..d7d175d5
--- /dev/null
+++ b/src/components/common/SmallSocialIcon.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {Image} from 'react-native';
+
+interface SmallSocialIconProps {
+  social: string;
+  style: object;
+}
+/**
+ * An image component that returns the <Image> of the icon for a specific social media platform.
+ */
+const SmallSocialIcon: React.FC<SmallSocialIconProps> = ({
+  social: social,
+  style: style,
+}) => {
+  switch (social) {
+    case 'Instagram':
+      var icon = require('../../assets/socials/instagram-icon-small.png');
+      break;
+    case 'Facebook':
+      var icon = require('../../assets/socials/facebook-icon-small.png');
+      break;
+    case 'Twitter':
+      var icon = require('../../assets/socials/twitter-icon-small.png');
+      break;
+    // TODO: Missing icon assets
+    // case 'Twitch':
+    //   var icon = require('../../assets/socials/twitch-icon-small.png');
+    //   break;
+    // case 'Pinterest':
+    //   var icon = require('../../assets/socials/pinterest-icon-small.png');
+    //   break;
+    // case 'Whatsapp':
+    //   var icon = require('../../assets/socials/whatsapp-icon-small.png');
+    //   break;
+    // case 'Linkedin':
+    //   var icon = require('../../assets/socials/linkedin-icon-small.png');
+    //   break;
+    case 'Snapchat':
+      var icon = require('../../assets/socials/snapchat-icon-small.png');
+      break;
+    case 'Youtube':
+      var icon = require('../../assets/socials/youtube-icon-small.png');
+      break;
+    case 'TikTok':
+      var icon = require('../../assets/socials/tiktok-icon-small.png');
+      break;
+    default:
+      var icon = require('../../assets/socials/logo.png');
+      break;
+  }
+  return <Image style={style} source={icon} />;
+};
+
+export default SmallSocialIcon;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 883dae61..0feeaab8 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -5,6 +5,7 @@ export {default as RadioCheckbox} from './RadioCheckbox';
 export {default as NavigationIcon} from './NavigationIcon';
 export {default as GradientBackground} from './GradientBackground';
 export {default as SocialIcon} from './SocialIcon';
+export {default as SmallSocialIcon} from './SmallSocialIcon';
 export {default as TabsGradient} from './TabsGradient';
 export {default as RecentSearches} from '../search/RecentSearches';
 export {default as LoadingIndicator} from './LoadingIndicator';