New icon or flip the old one?

Question

css

There was a little strange question. Let's say the site needs 4 icons with arrows in different directions. You can, of course, separately sew each arrow into a sprite, or you can simply rotate the same one using css: rotate. Which option is better, faster?
And not to get up twice. Often icons have some kind of analogue among special characters. For example, an icon with a triangle ala the play button can be obtained by inserting the Greek letter delta ( Δ ) and also rotating it using css. Or the 'hamburger' icon, which is three horizontal lines, can be imitated using the Greek letter xi ( Ξ ). In theory, fonts are rendered faster than the image is loaded. Basically the same question.

Answer 1

Arrows, small icons and other crap I've been doing for a long time on Base64.
And as for the question - turn it over or separate - it's better to turn it over.
But be aware that css rotate doesn't work in old IE. If you do not suffer from necrophilia, then twist.
One picture in Base64 and rotate is the fastest way.
Again, I'm talking about simple pictures, and not about a curly arrow with monograms.

Answer 2

Individual icons are better. And without perversions with fonts.

Answer 3

If you only need arrows and 4 pieces, then flipping is an option. If there are a lot of icons, then include fontawesome.io/icons and don't try to save bytes when you can definitely save MB (I'm sure there is where, always there).