How to fix blinking icons on hover?

Question

css

Sometimes icons made using high-resolution pngs or svg backgrounds do not show the image that should be displayed on hover for literally a second. This only happens the first time, when the pictures have not yet been cached. It would seem that the way out is to use sprites, but here it will not work to use them. Are there any other options?

Answer 1

It would seem that the way out is to use sprites, but here it will not work to use them.

And what's the problem? It's a really good way.
You can, of course, make an image preloader on jquery , but sprites are better.

Answer 2

Use svg icons in fonts.
fontawesome.io
If you wish, you can write a task for the collector (gulp, grung, webpack) so that it adds your icons to the font.