Super Tiny Website Logos in SVG


You may not realise it, but bandwidth is expensive. It costs you time, money, and battery power whenever you download a file larger than it needs to be.

That's why I've become a little bit obsessed with SVG - Scalable Vector Graphics. They're the closest thing to magic that the web has when it comes to image compression. Let me show you what I mean.

This is the standard Twitter Logo. It's 512 * 512 pixels and, even with hefty PNG compression, weighs in at around 20KB.

Here's the same logo rendered as an SVG. Because it is a vector graphic it can be magnified infinitely without any loss of fidelity.

The Twitter logo is a bird

The uncompressed SVG is a mere 425 Bytes. Not a typo. You could fit over 3,000 of these images on a floppy disk.

That's why I have released SuperTinyIcons on GitHub. Eighty of the web's most popular logos - each image is under 1KB.

Rows of icons - each one has the size printed next to it.

These files are suitable for use on the web - just use <img src=".... They are supported by all popular browsers. I've also converted them to Android Vector Drawables, so they can be incorporated into your apps.

I've released them as MIT licensed files - although you should check the original images' licences. Some of these logos may be trademarked.

SuperTinyIcons on GitHub

19 thoughts on “Super Tiny Website Logos in SVG

  1. People should submit patches if they can make identical versions that compress even better - you could imagine a leaderboard for who submits the most accepted patches.

      1. What about a reference PNG for each one, and CI that checked each pull request to make sure the rendering matched that PNG?

  2. I have just found a use for these .svg files. Using an image for crafting on electronic cutting machines is much easier and more efficient with .svg and virtually identical. I am new to the crafting world, but came into the machine world when computers were still reading paper tape. Geez, talk about floppy discs, we used 8 inch floppies. They were made of magnetic medianand protected by mylar.

    Old lady geek

  3. You mention battery power, but wouldn’t the rendering of the SVG use more power than to download and display the prerendered PNG file?

    1. Rendering an SVG would most likely use less battery power. Rendering an SVG can be done mostly on the GPU, whereas decoding a PNG would require heavy CPU usage.

  4. I think it’s worth mentioning, SVG compression ratio depends on the variations of color in an image. For example the above Twitter icon has only 2 different colors, using SVG is gonna save you from lots of pain. If it had more than 2 colors for example 1000 different colors (like our regular captured picture has) then the SVG format would have taken a way more space than PNG, JPG. It’s really great to use SVG when it comes to icon, logo, and simple illustration.

Leave a Reply

Your email address will not be published. Required fields are marked *