Customise built-in social icon

Site URL: https://www.lumaral.com

Hi! I just added a link to a hidden contact form page in the header's social links section.

Currently it displays as a generic link and I'd like it to display an envelope icon instead. Is there a way to change the link icon to the envelope that shows when writing an email?

If not, I have these two in case I need to add a custom img url: PNG - SVG

Thank you!

Something like this would work in custom CSS.

.header-actions a[href="https://www.lumaral.com/contact"] svg{
    display: none;
}
.header-actions a[href="https://www.lumaral.com/contact"]::after{
    content:'';
    background-image: url('https://image.flaticon.com/icons/png/128/2089/2089181.png');
    background-size: cover;
    width: 18px;
    height: 18px;
    display: block;
}

Thank you! It worked wonders