『スニペットを実行』を押して、動作サンプルをご確認いただけますでしょうか。

html {
    text-align: center;
}

#check, .fas.fa-check-circle {
    display: none;
}

i {
    cursor: pointer;
    font-size: 64px;
}

#check:hover+label .fa-check {
    display: none;
}

#check:hover+label .fa-check-circle {
    display: inline;
    animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
<input type="checkbox" id="check">
<label for="check">
  <i class="fas fa-check"></i>
  <i class="fas fa-check-circle"></i>
</label>

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

サンプルでは、
元サンプルにマウスホバーすると元アイコンが瞬時に消えて、別アイコンがフェードイン。
別アイコンからマウスを離すと瞬時に別アイコンが消えて、瞬時に元のアイコンが表示。
という状態です。

サンプルの状態を、
元アイコンにマウスホバーをすると元アイコンがフェードアウトし別アイコンがフェードイン。
別アイコンからマウスを離すと、別アイコンがフェードアウトし元アイコンがフェードイン。
のようにする方法をご教示いただけないでしょうか。

試したこと

cssのtransitionプロパティが設定できると、滑らかに変化する状態が実装できるかと思い、

i {
   cursor: pointer;
   font-size: 64px;
   transition: all .5s
}

と書いてみましたが、効きませんでした。

また、iタグにフェードインアニメーションを設定することでマウスアウト時の元アイコン表示もフェードインになり、最初に提示したサンプルよりは滑らかなアニメーションにはなりましたが、ページの読み込み時もフェードインになるため、よい解決策とは言えないものでした。

「滑らかに変化」につきまして

フェードしない方法で滑らかに変化できる方法があれば、加えてご教示いただけないでしょうか。
滑らかに変化させる方法がフェードさせることしか思い浮かばなかったため、フェードを設定しましたが、理想はフェードせず滑らかに変化させたいです。

「フェードしない滑らかな変化」につきましては具体的なイメージはないので、ご回答いただけます方の定義での「フェードしない滑らかな変化」をご教示いただきたく存じます。