Changing color of image with SVG source with CSS

Issue

I'm trying to change the color of the X logo on hover. The logo is added to html as an image with the csv in src. I've tried to do it as a mask like suggested in another thread, but my logo disappears.

#xLogo {
    width: 18px;
    margin-right: .25rem;
}

a {
    text-decoration: underline;
    color: #282624;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

a:hover,
a:focus,
a:active {
    color: #FD5A3B;
    text-decoration: none;
}

a:hover > #xLogo,
a:focus > #xLogo,
a:active > #xLogo {
    background-color: #FD5A3B;
    -webkit-mask: url(../img/X_logo.svg) no-repeat center;
    mask: url(../img/X_logo.svg) no-repeat center;
}

Here is my link on default:

And here it is on hover:

How to make it happen?

Solution

You can use filter property.

a:hover > #xLogo,
a:focus > #xLogo,
a:active > #xLogo {
    filter: invert(21%) sepia(100%) saturate(7414%) hue-rotate(359deg) brightness(94%) contrast(117%);
}

Answered By - Kodd