Erro JS : Uncaught TypeError: Cannot read property 'classList' of null

Front-end
,
#1

Boas colegas estou com um problema quanto ao criar uma funcionalidade que permita trocar de icon proveniente da biblioteca FontAwesome ao passar o mouse por cima desse elemento. Criei estas duas funções uma para o evento “onmouseover” e outra para o evento “onmouseout”.
O meu objectivo era ao passar o mouse por cima do icon mudar de icon e retirar a classe “fa-envelope” que corresponde ao icon de envelope fechado para “fa-envelope-open” que corresponde ao envelope aberto ambos da biblioteca fontawesome. Fiz download da pasta e pus no projecto, não estou a usar CDN.
Porém lança o seguinte erro:

script.js:7 Uncaught TypeError: Cannot read property 'classList' of null
    at changeIcon (script.js:7)
    at SVGSVGElement.onmouseover (index.html:1)
changeIcon @ script.js:7
onmouseover @ index.html:1
script.js:14 Uncaught TypeError: Cannot read property 'classList' of null
    at replaceIcon (script.js:14)
    at SVGSVGElement.onmouseout (index.html:1)

As funções:

 const icon = document.querySelector(".icon-envelope");

function changeIcon() {
    if (icon.classList.contains("fa-envelope")) {
        icon.classList.remove("fa-envelope");
        icon.classList.add("fa-envelope-open")
    }
}

function replaceIcon() {
    if (icon.classList.contains("fa-envelope-open")) {
        icon.classList.remove("fa-envelope-open")
        icon.classList.add("fa-envelope")
    }
}

HTML

<a ... class="btn button-contact"><span style="font-family: Teko, sans-serif;"><i class="far fa-envelope icon-envelope" onmouseover="changeIcon()" onmouseout="replaceIcon()"></i></a>