i want the logo png to show instead of svg sign
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="{{ url_for('static', filename='images/icon.ico') }}">
    <title>MindMate - Mental health chatbot</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <button class="Btn">
  
    <div class="sign"><img src="{{ url_for('static', filename='images/logout.png')}}" alt="Logout"></div></div>  
    <div class="text">Logout</div>
    <button class="Btn" id="logout-button" onclick="logout()">
      <div class="sign">
        <svg viewBox="0 0 512 512">
          <!-- SVG path for the logout icon -->
        </svg>
      </div>
      <div class="text">Logout</div>
    </button>
    <script>
    function logout() {
      window.location = "{{ url_for('logout') }}";
    }
    </script>
    <style>
      body {
        background-image: url("{{ url_for('static', filename='images/peakpx.jpg') }}");
        background-size: cover;
        background-position: center;
      }
      .Btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 45px;
        height: 45px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        position: fixed;
        top: 20px;
        right: 20px;
        overflow: hidden;
        transition-duration: .3s;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
        background-color: #ffffff;
      }

      /* plus sign */
      .sign {
        width: 100%;
        transition-duration: .3s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .sign svg {
        width: 17px;
        fill:black
      }

      .sign svg path {
        fill: rgb(0, 0, 0);
      }
      /* text */
      .text {
        position: absolute;
        right: 0%;
        width: 0%;
        opacity: 0;
        color: black;
        font-size: 1.2em;
        font-weight: 600;
        transition-duration: .3s;
      }
      /* hover effect on button width */
      .Btn:hover {
        width: 125px;
        border-radius: 40px;
        transition-duration: .3s;
      }

      .Btn:hover .sign {
        width: 30%;
        transition-duration: .3s;
        padding-left: 20px;
      }
      /* hover effect button's text */
      .Btn:hover .text {
        opacity: 1;
        width: 70%;
        transition-duration: .3s;
        padding-right: 10px;
      }
      /* button click effect*/
      .Btn:active {
        transform: translate(2px ,2px);
      }
    </style>
  
  </head>

  <body id="body-area">
    <div id="chat-container">
      <div id="chat-header">
        <h1 id="logo"><img src="{{ url_for('static', filename='images/logo.ico')}}" alt="logo" >MindMate</h1>
      </div>
      <div id="chat-area">
        <!-- Display previous chat messages -->
        {% for chat in chat_history %}
          <div class="user-msg"><span class="msg">{{ chat.message }}</span></div>
          <div class="bot-msg"><span class="msg">{{ chat.response }}</span></div>
        {% endfor %}
      </div>
      <div id="input-container">
        <input type="text" id="user-input" placeholder="Type your message..." onkeydown="if(event.keyCode===13) sendMessage()">
        <button id="send-btn" onclick="sendMessage()" type="button">Send</button>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      function sendMessage() {
        var message = $("#user-input").val();
        $("#chat-area").append('<div class="user-msg"><span class="msg">' + message + '</span></div>');
        $.get("/get", {msg: message}).done(function(data) {
          $("#chat-area").append('<div class="bot-msg"><span class="msg">' + data + '</span></div>');
          $("#chat-area").scrollTop($("#chat-area")[0].scrollHeight);
        });
        $("#user-input").val("");
      }
    </script>
  </body>
</html>