Lower the number of http requests, the better.

The problem:

We usually go to fontawesome to find the required icon and if the icon isn't free, then we search some other icon library. We add a bunch of such lines in our document:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css">

These files are usually small but still result in slowing down our page a bit. What if there was a better solution? What amazon.com do to load all those icons and use them all throughout the massive site? There is a trick:

The Solution:

If you are a web dev and haven't heard about Figma then you're living under a rock. It's an awesome online vector graphics editor. A 10 minute YouTube video can help you get started. Here is a breakdown of all the steps:

1. Install any popular icon plugins like iconify.
2. Select a frame, size of something like 400x500px.
3. Search your favorite icon in plugin interface and select one to be pasted on the frame.
4. Now, shrink the size of the svg/image icon to your website's need(usually 24x24px).
5. leave a 5px-10px gap and put another icon in the same column/row.
6. Do this for all the required icons, create new rows for different types of icons.
7. Import the frame as a png image without background.

Now that your single "allicons.png" is ready, keep one thing in mind that you can put your logo in the same image; yes the godmann "logo.svg" and multiple sizes of the logo as well. Amazon does that. You can put any image/svg on that frame and use that as icon. That's awesome but you might ask "How the hell are we gonna use the one icon? How do we grab one icon out of that png? ". Well, here's how:

1. Select a span/div tag (where you want to show the icon) using class or id.
2. Set background-image to the "allicons.png".
3. Set the width and size of icon(like, 24x24px).
4. Set background-position to 5px -10px, and it will show something from the imgae, change the x and y so that you can show the required icon.

Here is the full code:

background-image : url('allicons.png');
background-repeat : no-repeat;
width : 24px;
height : 24px;
background-position : 5px -10px;

Boom, You have all the icons you want with just one http request and the browser will cache that image as well. This is what amazon's "allicons.png" looks like:

About BoomLabs:

BoomLabs is an agency providing new age web solutions. Our services include:

• Web Design and Development
• SEO (For SaaS and E-commerce businesses)
• Content writing using AI.