Twitter 𝕏 Emoji / Symbol - New Twitter X Logo Emoji Copy Paste

<!DOCTYPE html>
<html>

<body>
  <div class="container-fluid text-center">
    <h3>New Twitter X SVG Icon Change Size Editor</h3>
    <div class="row">
      <div class="col-sm-4">
        <div class="svg-container" id='svg-icon'>
 <svg 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 class="slider-container">
          <input type="range" class="form-range" min='1' step=".1" max='10' id="svg-change-size">
        </div>
      </div>
      <div class="col-sm-8">
        <div class="code-editor mt-3">
          <pre><code class="language-css" id="code-editor"></code></pre>
          <button id="copy-button">Copy to Clipboard</button>
        </div>
      </div>
    </div>
    <pre id="result" class="toast">Code Copied</pre>

</div>

svgChangeSize.addEventListener("input", updateSvgSize);

// Show code on initial load
    jQuery("#code-editor").text(jQuery("#svg-icon ").html());

</script>
  <style>
    .svg-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
    }

svg {
      width: 100px;
      height: 100px;
      transition: fill 0.3s ease-in-out;
    }

code {
      display: block;
      white-space: pre;
    }

pre {
      font-family: "Courier New", Courier, monospace;
      overflow-x: auto;
      margin: 0;
      background-color: #333;
      border: 1px solid #555;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      line-height: 1.5;
      padding: 10px;
    }

button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top: 10px;
    }

button:hover {
      background-color: #0056b3;
    }

.toast {
            position: fixed;
            bottom: 0px;
            left: 0px;
            display: none;
            padding: 15px;
            background-color: #000;
            color: #fff;
            /* White text */
            border-radius: 8px;
            max-width: 300px;
            font-size: 16px;
           }

.toast.show {
      display: block;
      transform: translateX(0);
    }

input[type="range"] {
      position: fixed;
      bottom: 30%;
      width: 300px;
      left: 20px;
      height: 15px;
      background: #ddd;
      border-radius: 5px;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

input[type="range"]:hover {
      opacity: 1;
    }

input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border-radius: 50%;
      cursor: pointer;
    }

input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link href="svg-editor.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js" async=""
    integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
​
<body>
  <div class="container-fluid text-center">
    <h3>New Twitter X SVG Icon Change Size Editor</h3>
    <div class="row">
      <div class="col-sm-4">
        <div class="svg-container" id='svg-icon'>
 <svg 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 class="slider-container">
          <input type="range" class="form-range" min='1' step=".1" max='10' id="svg-change-size">
        </div>
      </div>
      <div class="col-sm-8">
        <div class="code-editor mt-3">
          <pre><code class="language-css" id="code-editor"></code></pre>
          <button id="copy-button">Copy to Clipboard</button>
        </div>
      </div>
    </div>
    <pre id="result" class="toast">Code Copied</pre>
​
  </div>
​
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>
​
​
  <script>
    const svgIcon = document.querySelector("#svg-icon svg");
    const svgChangeSize = document.querySelector("#svg-change-size");
    // Function to update SVG size based on range slider
    function updateSvgSize() {
      const newSize = svgChangeSize.value;
      svgIcon.style.width = newSize + "em";
      svgIcon.style.height = newSize + "em";
    }
​
    svgChangeSize.addEventListener("input", updateSvgSize);
​
    var observer = new MutationObserver(function (mutationsList, observer) {
      for (var mutation of mutationsList) {
        jQuery("#code-editor").text(jQuery("#svg-icon ").html());
      }
    });
    observer.observe(document.querySelector("#svg-icon svg"), {
      attributes: true
    });
​
​
    // Show code on initial load
    jQuery("#code-editor").text(jQuery("#svg-icon ").html());
​
    document.getElementById("copy-button").addEventListener("click", () => {
      const copyText = document.getElementById("code-editor").textContent;
      navigator.clipboard
        .writeText(copyText)
        .then(() => {
          document.getElementById("result").style.display = "block";
          setTimeout(() => {
            document.getElementById("result").style.display = "none";
          }, 5000);
        })
        .catch((err) => {
          console.error("Could not copy text: ", err);
        });
    });
​
  </script>
  <style>
    .svg-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
    }
​
    svg {
      width: 100px;
      height: 100px;
      transition: fill 0.3s ease-in-out;
    }
​
    code {
      display: block;
      white-space: pre;
    }
​
    pre {
      font-family: "Courier New", Courier, monospace;
      overflow-x: auto;
      margin: 0;
      background-color: #333;
      border: 1px solid #555;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      line-height: 1.5;
      padding: 10px;
    }
​
    button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-top: 10px;
    }
​
    button:hover {
      background-color: #0056b3;
    }
​
    .toast {
            position: fixed;
            bottom: 0px;
            left: 0px;
            display: none;
            padding: 15px;
            background-color: #000;
            color: #fff;
            /* White text */
            border-radius: 8px;
            max-width: 300px;
            font-size: 16px;
           }
​
    .toast.show {
      display: block;
      transform: translateX(0);
    }
​
​
    input[type="range"] {
      position: fixed;
      bottom: 30%;
      width: 300px;
      left: 20px;
      height: 15px;
      background: #ddd;
      border-radius: 5px;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }
​
    input[type="range"]:hover {
      opacity: 1;
    }
​
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border-radius: 50%;
      cursor: pointer;
    }
​
    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</body>
​
</html>