2 files changed, 13 insertions, 2 deletions
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 3c9deb6d..0cd5d2a7 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import {Image} from 'react-native';
+import {ScreenType} from '../../types';
 
 interface SocialIconProps {
   social: string;
   style: object;
+  screenType: ScreenType;
 }
 /**
  * An image component that returns the <Image> of the icon for a specific social media platform.
@@ -11,10 +13,14 @@ interface SocialIconProps {
 const SocialIcon: React.FC<SocialIconProps> = ({
   social: social,
   style: style,
+  screenType,
 }) => {
   switch (social) {
     case 'Instagram':
-      var icon = require('../../assets/socials/instagram-icon.png');
+      var icon = require('../../assets/socials/instagram-icon-white-bg.png');
+      if (screenType === ScreenType.SuggestedPeople) {
+        icon = require('../../assets/socials/instagram-icon.png');
+      }
       break;
     case 'Facebook':
       var icon = require('../../assets/socials/facebook-icon.png');
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index d3bc3945..0bd5a0a5 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
+import { ScreenType } from '../../types';
 import {SocialIcon} from '.';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {normalize, SCREEN_WIDTH} from '../../utils';
@@ -48,7 +49,11 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
                 onPress={onClosePress}>
                 <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
               </TouchableOpacity>
-              <SocialIcon style={styles.icon} social={social} />
+              <SocialIcon
+                style={styles.icon}
+                social={social}
+                screenType={ScreenType.Profile}
+              />
               <Text style={styles.titleLabel}>{social}</Text>
               <Text style={styles.descriptionLabel}>
                 Insert your {social.toLowerCase()} username to link your{' '}