[Dúvida] Como a gente poderia colocar uma lupa no Input?

Tenho um ícone de lupa no formato .svg que encontrei em https://ionic.io/ionicons baixado na pasta de imagens. Chamei-o de magnifier, importei da pasta, e inseri uma , mas não consigo de jeito nenhum fazer rodar desta forma:

import Input from '../Input'
import styled from 'styled-components'
import { useState } from 'react'
import magnifier from '../../imagens/search-outline.svg'

const PesquisaContainer = styled.section`
    background-image: linear-gradient(90deg, #002F52 35%, #326589 165%);
    color: #FFF;
    text-align: center;
    padding: 85px 0;
    height: 270px;
    width: 100%;
`
const Titulo = styled.h2`
    color: #FFF;
    font-size: 36px;
    text-align: center;
    width: 100%;
`
const SubTitulo = styled.h3`
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
`

function Pesquisa() {
    const [textoDigitado, setTextoDigitado] = useState('')

    return(
        <PesquisaContainer>
            <Titulo>Já sabe por onde começar?</Titulo>
            <SubTitulo>Encontre seu livro em nossa estante</SubTitulo>
            <Input placeholder="Digite o título de sua próxima leitura"
                onBlur = {evento => setTextoDigitado(evento.target.value)}> 

                <img src={magnifier} alt='lupa'></img>
            </Input>

        </PesquisaContainer>
    )
}

export default Pesquisa

O que estou fazendo de errado?

Obrigado!