Font Awesome Twitter X Icon: Fab Fa Twitter X, FA Brands FA X Twitter Logo

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      margin: 10px;
    }

svg {
      width: 100px;
      height: 100px;
      fill: #ffffff;
    }

/* Customize the background colors and border radii for each div */
    div:nth-child(1) {
      background: #000000;
      border-radius: 50%;
    }

div:nth-child(2) {
      background: #FF5733;
      border-radius: 25%;
    }

div:nth-child(3) {
      background: #36B94F;
      border-radius: 75px;
    }

div:nth-child(4) {
      background: #FFC300;
      border-radius: 10px;
    }

div:nth-child(5) {
      background: #0074D9;
      border-radius: 50%;
    }

div:nth-child(6) {
      background: #FF851B;
      border-radius: 60%;
    }

div:nth-child(7) {
      background: #8C8C8C;
      border-radius: 70%;
    }

div:nth-child(8) {
      background: #FF4136;
      border-radius: 80%;
    }

div:nth-child(9) {
      background: #B10DC9;
      border-radius: 90%;
    }

div:nth-child(10) {
      background: #F012BE;
      border-radius: 100%;
    }
  </style>
</head>

<body>
  <h3>New Twitter X Svg Icon with Different Background Color</h3>
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>

<div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
</body>
 <script>
    function copySvgCode(iconNumber) {
      const svgElement = document.querySelector(`div:nth-child(${iconNumber}) svg`);
      const svgCode = new XMLSerializer().serializeToString(svgElement);
      const tempTextarea = document.createElement('textarea');
      tempTextarea.value = svgCode;
      document.body.appendChild(tempTextarea);
      tempTextarea.select();
      document.execCommand('copy');
      document.body.removeChild(tempTextarea);
      alert('SVG Code copied to clipboard!');
    }

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <style>
    div {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      margin: 10px;
    }
​
    svg {
      width: 100px;
      height: 100px;
      fill: #ffffff;
    }
​
    /* Customize the background colors and border radii for each div */
    div:nth-child(1) {
      background: #000000;
      border-radius: 50%;
    }
​
    div:nth-child(2) {
      background: #FF5733;
      border-radius: 25%;
    }
​
    div:nth-child(3) {
      background: #36B94F;
      border-radius: 75px;
    }
​
    div:nth-child(4) {
      background: #FFC300;
      border-radius: 10px;
    }
​
    div:nth-child(5) {
      background: #0074D9;
      border-radius: 50%;
    }
​
    div:nth-child(6) {
      background: #FF851B;
      border-radius: 60%;
    }
​
    div:nth-child(7) {
      background: #8C8C8C;
      border-radius: 70%;
    }
​
    div:nth-child(8) {
      background: #FF4136;
      border-radius: 80%;
    }
​
    div:nth-child(9) {
      background: #B10DC9;
      border-radius: 90%;
    }
​
    div:nth-child(10) {
      background: #F012BE;
      border-radius: 100%;
    }
  </style>
</head>
​
<body>
  <h3>New Twitter X Svg Icon with Different Background Color</h3>
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
​
  <div>
    <svg height='100' viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
    </svg>
  </div>
</body>
 <script>
    function copySvgCode(iconNumber) {
      const svgElement = document.querySelector(`div:nth-child(${iconNumber}) svg`);
      const svgCode = new XMLSerializer().serializeToString(svgElement);
      const tempTextarea = document.createElement('textarea');
      tempTextarea.value = svgCode;
      document.body.appendChild(tempTextarea);
      tempTextarea.select();
      document.execCommand('copy');
      document.body.removeChild(tempTextarea);
      alert('SVG Code copied to clipboard!');
    }
​
    function downloadPng(iconNumber) {
      const svgElement = document.querySelector(`div:nth-child(${iconNumber}) svg`);
      const svgCode = new XMLSerializer().serializeToString(svgElement);
      const canvas = document.createElement('canvas');
      canvas.width = svgElement.clientWidth;
      canvas.height = svgElement.clientHeight;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        const downloadLink = document.createElement('a');
        downloadLink.download = `icon_${iconNumber}.png`;
        downloadLink.href = canvas.toDataURL('image/png');
        downloadLink.click();
      };
      img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgCode)));
    }
  </script>
</html>
​