diff --git a/frontend/src/components/footer/index.js b/frontend/src/components/footer/index.js
index b38155e802..36b6cc4363 100644
--- a/frontend/src/components/footer/index.js
+++ b/frontend/src/components/footer/index.js
@@ -23,7 +23,7 @@ import {
 import './styles.scss';
 
 const socialNetworks = [
-  { link: ORG_TWITTER, icon: <TwitterIcon style={{ height: '20px', width: '20px' }} /> },
+  { link: ORG_TWITTER, icon: <TwitterIcon style={{ height: '20px', width: '20px' }} noBg /> },
   { link: ORG_FB, icon: <FacebookIcon style={{ height: '20px', width: '20px' }} /> },
   { link: ORG_YOUTUBE, icon: <YoutubeIcon style={{ height: '20px', width: '20px' }} /> },
   { link: ORG_INSTAGRAM, icon: <InstagramIcon style={{ height: '20px', width: '20px' }} /> },
diff --git a/frontend/src/components/projectDetail/shareButton.js b/frontend/src/components/projectDetail/shareButton.js
index f153590ce0..5135a0279e 100644
--- a/frontend/src/components/projectDetail/shareButton.js
+++ b/frontend/src/components/projectDetail/shareButton.js
@@ -6,7 +6,7 @@ import messages from './messages';
 import { ORG_CODE } from '../../config';
 import { createPopup } from '../../utils/login';
 import { getTwitterLink, getLinkedInLink, getFacebookLink } from '../../utils/shareFunctions';
-import { TwitterIconNoBg, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
+import { TwitterIcon, FacebookIcon, LinkedinIcon, ShareIcon } from '../svgIcons';
 
 export function ShareButton({ projectId }: Object) {
   const iconStyle = { width: '1.4em', height: '1.4em' };
@@ -41,7 +41,7 @@ export function ShareButton({ projectId }: Object) {
                 className="link no-underline base-font f6 pointer pv1"
                 onClick={() => twitterPopup(msg)}
               >
-                <TwitterIconNoBg style={iconStyle} className="light-blue v-mid pb1 pr2" />
+                <TwitterIcon style={iconStyle} className="light-blue v-mid pb1 pr2" />
                 Tweet
               </div>
               <div
diff --git a/frontend/src/components/svgIcons/index.js b/frontend/src/components/svgIcons/index.js
index c828d472a3..d8dc02c259 100644
--- a/frontend/src/components/svgIcons/index.js
+++ b/frontend/src/components/svgIcons/index.js
@@ -69,7 +69,6 @@ export { LoadingIcon } from './loading';
 export { EnvelopeIcon } from './envelope';
 export { LinkedinIcon } from './linkedin';
 export { MarkerIcon } from './marker';
-export { TwitterIconNoBg } from './twitterNoBg';
 export { ZoomPlusIcon } from './zoomPlus';
 export { SidebarIcon } from './sidebar';
 export { QuestionCircleIcon } from './questionCircle';
diff --git a/frontend/src/components/svgIcons/twitter.js b/frontend/src/components/svgIcons/twitter.js
index aa6515ce7f..344834cd49 100644
--- a/frontend/src/components/svgIcons/twitter.js
+++ b/frontend/src/components/svgIcons/twitter.js
@@ -3,15 +3,20 @@ import React from 'react';
 export class TwitterIcon extends React.PureComponent {
   render() {
     return (
-      <svg width="15" height="14" viewBox="0 0 15 14" {...this.props} aria-label="Twitter">
-        <g fill="none" fillRule="evenodd">
-          <path d="M-13-13h40v40h-40z" />
-          <path
-            d="M12.394 14h-10.5a1.75 1.75 0 0 1-1.75-1.75V1.75C.144.784.928 0 1.894 0h10.5c.966 0 1.75.784 1.75 1.75v10.5a1.75 1.75 0 0 1-1.75 1.75zM5.52 10.556c3.3 0 5.107-2.737 5.107-5.106 0-.078 0-.154-.004-.232.35-.252.655-.57.896-.93a3.637 3.637 0 0 1-1.032.283c.37-.22.654-.574.79-.994a3.57 3.57 0 0 1-1.14.434 1.797 1.797 0 0 0-3.059 1.638 5.096 5.096 0 0 1-3.7-1.876 1.8 1.8 0 0 0 .556 2.398 1.815 1.815 0 0 1-.811-.224v.024c0 .868.619 1.596 1.438 1.76a1.75 1.75 0 0 1-.808.032 1.795 1.795 0 0 0 1.676 1.246 3.6 3.6 0 0 1-2.656.745 5.105 5.105 0 0 0 2.747.802z"
-            fill="currentColor"
-            fillRule="nonzero"
-          />
-        </g>
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...this.props}
+        aria-label="Twitter"
+      >
+        {!this.props.noBg && <rect width="15" height="15" rx="1" fill="black" />}
+        <path
+          d="M8.54822 6.66248L12.644 2H11.6735L8.1156 6.04753L5.27595 2H2L6.29505 8.12111L2 13.01H2.97043L6.72541 8.7347L9.72488 13.01H13.0008L8.54822 6.66248ZM7.21864 8.17485L6.7828 7.56494L3.32038 2.71647H4.81116L7.60626 6.63082L8.04027 7.24073L11.6731 12.3285H10.1823L7.21864 8.17485Z"
+          fill="white"
+        />
       </svg>
     );
   }
diff --git a/frontend/src/components/svgIcons/twitterNoBg.js b/frontend/src/components/svgIcons/twitterNoBg.js
deleted file mode 100644
index af64f295ce..0000000000
--- a/frontend/src/components/svgIcons/twitterNoBg.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-export class TwitterIconNoBg extends React.PureComponent {
-  render() {
-    return (
-      <svg viewBox="0 0 512 512" {...this.props} aria-label="Twitter">
-        <path
-          fill="currentColor"
-          d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
-        ></path>
-      </svg>
-    );
-  }
-}
diff --git a/frontend/src/components/userDetail/headerProfile.js b/frontend/src/components/userDetail/headerProfile.js
index af57d13bd5..6a9e969aa1 100644
--- a/frontend/src/components/userDetail/headerProfile.js
+++ b/frontend/src/components/userDetail/headerProfile.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from '../user/messages';
-import { TwitterIconNoBg, FacebookIcon, LinkedinIcon, ProfilePictureIcon } from '../svgIcons';
+import { TwitterIcon, FacebookIcon, LinkedinIcon, ProfilePictureIcon } from '../svgIcons';
 import { MappingLevelMessage } from '../mappingLevel';
 import { NextMappingLevel } from '../user/topBar';
 import { UserOrganisations } from './userTeamsOrgs';
@@ -26,7 +26,7 @@ export const SocialMedia = ({ data }) => {
 
     switch (field) {
       case 'twitterId':
-        return <TwitterIconNoBg style={iconStyle} className="light-blue v-mid" />;
+        return <TwitterIcon style={iconStyle} className="light-blue v-mid" />;
       case 'facebookId':
         return <FacebookIcon style={iconStyle} className="dark-blue v-mid" />;
       case 'linkedinId':