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>