横並びのアイコンの縦位置を中央揃えにしたい

4つのアイコンを横に並べて、各アイコンをボーダーで囲っています。
また、アイコンはチェックボックスとボタンが混ざっています。
下記コードの下の「スニペッドを実行」を押すと、状態をご確認いただけます。
チェックボックスのアイコン（下記コードで言うとAとDのアイコン）はクリックすると色が変わります。

html {
    text-align: center;
}

/* リセット */
button {
    background: none;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#a,#d {
    display: none;
}

ul {
    display: inline-flex;
}

.buttons {
    margin: 0 1em;
    cursor: pointer;
    display: inline-block;
}

.icons {
    font-size: 40px;
    width: 80px;
    height: 80px;
    border: 2px solid black;
    vertical-align: middle;
}

.check:checked + i {
    color: red;
    border: 2px solid red;
}

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <nav id="buttonWrap">
        <ul id="list">
            <li>
                <label for="a" class="buttons">
                    <input type="checkbox" id="a" class="check">
                    <i class="fas fa-check icons"></i>
                    <p>A</p>
                </label>
            </li>
            <li>
                <button class="buttons">
                    <i class="fas fa-check icons"></i>
                    <p>B</p>
                </button>
            </li>
            <li>
                <button class="buttons">
                    <i class="fas fa-check icons"></i>
                    <p>C</p>
                </button>
            </li>
            <li>
                <label for="d" class="buttons">
                    <input type="checkbox" id="d" class="check">
                    <i class="fas fa-check icons"></i>
                    <p>D</p>
                </label>
            </li>
        </ul>
    </nav>

スニペッドを実行するとご確認いただけると思いますが、アイコンの縦位置が中央にありません。
アイコンの縦位置を中央に配置する方法をご教示いただけないでしょうか。