change header svg by img tag

public/bell.svg

@@ -1,3 +1,3 @@
-<svg width="60px" height="60px" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/components/Header/Header.jsx

@@ -64,16 +64,12 @@ function Header() {
                                 setunreadNotification(false);
                             }}
                         >
-                            <svg width="auto" height="30" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <img className={styles.notificationsImg} src="bell.svg" alt="notifications"/>
-                                <path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="currentStroke" />
-                            </svg>
                             {unreadNotification && <span className={styles.notificationBadge}></span>}
                         </button>
 
                         <Link to="/profile" className={styles.profileLink}>
-                            <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="auto" fill="currentFill">
+                            <img className={styles.profileImg} src="person.svg" alt="profile"/>
-                                <path d="M480-492.31q-57.75 0-98.87-41.12Q340-574.56 340-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q620-690.06 620-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Z" />
-                            </svg>
                         </Link>
                     </div>
                 </nav>

src/components/Header/Header.module.css

@@ -105,10 +105,6 @@
     border-bottom: 2px solid #019AFF;
 }
 
-svg {
-    width: fit-content;
-}
-
 .bellBtn, .profileLink {
     display: flex;
     align-items: center;
@@ -124,11 +120,12 @@ svg {
     position: relative;
 }
 
-.bellBtn svg {
+.notificationsImg {
     stroke: black;
     stroke-width: 3.5;
     stroke-linecap: round;
     stroke-linejoin: round;
+    height: 28px;
 }
 
 .bellBtn:focus {
@@ -141,33 +138,22 @@ svg {
 .activeBellBtn {
     transform: translateY(-4px);
     background: rgba(191, 191, 191, 0.5);
-    svg {
-        stroke: #019AFF;
-    }
 }
 
+
 .bellBtn:hover {
     transform: translateY(-4px);
     background: rgba(191, 191, 191, 0.5);
-    svg {
-        stroke: #019AFF;
-    }
 }
 
 
 .profileLink:hover {
     transform: translateY(-4px);
     background: rgba(191, 191, 191, 0.5);
-    svg {
-        fill: #019AFF;
-    }
 }
 
-.bellBtn svg {
-    height: 28px;
-}
 
-.profileLink svg {
+.profileImg {
     height: 40px;
 }
 
@@ -188,7 +174,6 @@ svg {
     z-index: 3;
 }
 
-
 .notification{
     margin-bottom: 7%;
     display: flex;
@@ -233,6 +218,7 @@ svg {
     cursor: pointer;
     display: none;
     z-index: 10;
+    background: none;
 }
 
 .burgerBar {