Problema no projeto parte Icones e Menu Header

Depois de terminar as aulas 02, tive o seguinte resultado:

Preciso de ajuda para ajustar e ficar assim:

Como esta meu código:

JS

import perfil from '../../imagens/perfil.svg'
import sacola from '../../imagens/sacola.svg'

const icones = [perfil, sacola]

function IconesHeader() {
  return (
      <icones>
          { icones.map( (icone) => (
            // eslint-disable-next-line jsx-a11y/alt-text
            <icone><img src={icone}></img></icone>
          )) }
      </icones>
  )
}

export default IconesHeader

CSS

.icones{
  display: flex;
}

.icone{
  margin-right: 40px;
  width: 25px;
}

JS

const textoOpcoes = ['CATEGORIAS', 'FAVORITOS', 'MINHA ESTANTE']

function OpcoesHeader (){
  return (
    <ul className='opcoes'>
          {textoOpcoes.map((texto) => (
            <li className='opcao'><p>{texto}</p> </li>
           )) }
        </ul>
  )
}

export default OpcoesHeader

CSS

.opcoes {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.opcao {
  font-size: 16px;
  height: 100%;
  padding: 0px 5px;
  background-color: #f0f0f0;
  align-items: center;
  border: 1px solid #ddd;
  text-align: center;
  text-decoration: none;
  margin: 0 10px;
  min-width: 120px;
  cursor: pointer;
}