Icons and how to use them?

We all have used icons and in different ways, what is the best way and how should we implement them? I don't really know but I do have some experience working with icons and have some suggestions below. So first lets see what different ways we choose between.

Lets first discuss the format.

JPG - never use for icons, use for bigger pictures.

PNG - can be used.

GIF - can be used.

SVG - can be used.

Implementations

Single file. - Added by background-image url or with <img src=” ”>.

This is not recommended because it will make a server request for every image and make the page slow. We want as few server request as possible. Positive is that we can use alt=”” if we use <img>, and easy to add new icons.

As Sprite. - A sprite is when you add all icons in one big image and use background-position to select which icon you want to use.

Better than a single images because it will only make one server call and we can also cash the image. But still a big IMG file need to be downloaded and can be hard to update when adding a new icon.

Only usable with background-image and CSS due to the fact that we need background-position to…