Não consigo definir uma largura para os ícones

Não estou conseguindo alterar o tamanho dos meus ícones, e não entendo o motivo.

HTML

   <header class="header">
      <button class="header__menu" type="button" aria-label="Menu"><i></i></button>

      <img src="./assets/img/icons/header/logo.svg" alt="Logo Alura Books.">

      <nav class="header__nav">
         <a class="nav-item nav__fav" href="#" aria-label="Favoritos"><i></i></a>
         <a class="nav-item nav__car" href="#" aria-label="Carrinho"><i></i></a>
         <a class="nav-item nav__user" href="#" aria-label="Perfil"><i></i></a>
      </nav>
   </header>

CSS

.header {
   background-color: #FFF;
   height: 80px;

   display: flex;
   align-items: center;
   column-gap: 30px;
}

.header__menu::before {
   content: url("../assets/img/icons/header/menu.svg");
}

.header__nav {
   display: flex;
   align-items: center;
   column-gap: 30px;
   justify-self: flex-end;
}

.nav__fav > i::before {
   content: url("../assets/img/icons/header/fav.svg");
   width: 1rem;
}

.nav__car > i::before {
   content: url("../assets/img/icons/header/car.svg");
}

.nav__user > i::before {
   content: url("../assets/img/icons/header/user.svg");
}