Skip to main content

Twitter icon update to X

You can use the following scripts to update the Twitter logo from the bird to an 𝕏. Place in the Scripts tab. Should be used in conjunction with the social color style page so that they are all black or white.

𝕏 - Black Icon 

// Updating the Twitter bird icon to a black 𝕏 icon
document.addEventListener('DOMContentLoaded', function() {
  var linkedinAnchor = document.querySelector('a[aria-label="twitter"]');
  if (linkedinAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/X%20Logo%20Black.png';
    img.alt = "X Twitter Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (linkedinAnchor.firstChild) {
      linkedinAnchor.removeChild(linkedinAnchor.firstChild);
    }
    linkedinAnchor.appendChild(img);
  }
});

𝕏 - White Icon 

// Updating the Twitter bird icon to a white 𝕏 icon
document.addEventListener('DOMContentLoaded', function() {
  var linkedinAnchor = document.querySelector('a[aria-label="twitter"]');
  if (linkedinAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/X%20Logo%20White.png';
    img.alt = "X Twitter Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (linkedinAnchor.firstChild) {
      linkedinAnchor.removeChild(linkedinAnchor.firstChild);
    }
    linkedinAnchor.appendChild(img);
  }
});