Super Tiny Social Icons

Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 bytes!

The logos have a 512x512 viewbox, they will fit in a circle with radius 256. They will scale up and down to suit your needs.

Say thanks!

• Gift me something from my Amazon Wishlist
• Send me a tip
• Leave me a message

How Small?

542 Bytes SVG	2,956 Bytes PNG	433 Bytes SVG	3,373 Bytes PNG	250 Bytes SVG	3,145 Bytes PNG

What's Available so far?

229 Bytes	250 Bytes	283 Bytes	422 Bytes	433 Bytes	589 Bytes
289 Bytes	419 Bytes	370 Bytes	329 Bytes	345 Bytes	513 Bytes
487 Bytes	607 Bytes	526 Bytes	548 Bytes	542 Bytes	595 Bytes
376 Bytes	672 Bytes	959 Bytes	436 Bytes	649 Bytes	673 Bytes
455 Bytes	484 Bytes	397 Bytes	639 Bytes	359 Bytes	674 Bytes
534 Bytes	309 Bytes	572 Bytes	342 Bytes	550 Bytes	286 Bytes
494 Bytes	426 Bytes	591 Bytes	393 Bytes	399 Bytes	524 Bytes
478 Bytes	320 Bytes	270 Bytes	389 Bytes	492 Bytes	684 Bytes
286 Bytes	329 Bytes	465 Bytes	754 Bytes	309 Bytes	647 Bytes
819 Bytes	704 Bytes	288 Bytes	379 Bytes	529 Bytes	253 Bytes
569 Bytes	479 Bytes	551 Bytes	365 Bytes	354 Bytes	500 Bytes
375 Bytes	263 Bytes	505 Bytes	379 Bytes	581 Bytes	683 Bytes
270 Bytes	281 Bytes	259 Bytes	262 Bytes	250 Bytes	276 Bytes
948 Bytes	297 Bytes	384 Bytes	583 Bytes	438 Bytes	641 Bytes
377 Bytes	221 Bytes	804 Bytes	362 Bytes	258 Bytes	846 Bytes
799 Bytes	308 Bytes	652 Bytes	517 Bytes	599 Bytes	744 Bytes
489 Bytes	998 Bytes	670 Bytes	956 Bytes	489 Bytes	491 Bytes
670 Bytes	1003 Bytes	399 Bytes	463 Bytes	313 Bytes	476 Bytes
994 Bytes	311 Bytes	800 Bytes	290 Bytes

Why so smallious?

Bytes cost money. They cost money to store, transport, and process. Simplicity should be our goal in all endeavours.

Scream if you want to go smaller

These files were edited by hand in Inkscape, then were minified using svgo and svgcleaner. Further smallification may be possible. Try it!

• Each of these has an xmlns="http://www.w3.org/2000/svg" in the <svg> tag. This isn't strictly necessary - but some web browsers won't display them as an image without it.
• Rounded corners can be dropped - rx="80" - the effect can be done in CSS if you want.
• The background colour can also be excluded if you're including it elsewhere.
• Colours can be simplified. #FF0000 becomes red.
• The precision of the paths is mostly 0 decimal places. A few logos have 1 or 2 dp to make them look more accurate. The precision can be reduced if necessary.

Think you can make them smaller? Tell me by raising an issue!

Want more icons? Tell me by raising an issue!

Think the icons look wrong? Compare them against the official logos. If they still look wrong, tell me by raising an issue!

New! Icons also available in Android Vector Drawables so you can easily use them in Android apps. Converted using https://inloop.github.io/svg2android/ - not guaranteed to be under 1KB.

Submitting Icons

I'd love you to submit something 😸 The rules are simple, your icon must:

• be under 1024 bytes. That is, the maximum file size is 1023 bytes. No arguments.
• fit inside a circle with radius 256 pixels. Set rx="50%" to check.
• have solid colours. No gradients or fades.
• represent a popular service's current logo.

Template

At a minimum, your icon needs these components:

<svg
   xmlns="http://www.w3.org/2000/svg"
   aria-label="..." role="img"
   viewBox="0 0 512 512">
   <rect
      width="512" height="512"
      rx="15%"
      fill="#fff"/>
   ...
</svg>

Icon accessibility

The super tiny icons are accessible by default. Each icon has:

• role="img", to expose the <svg> elements as images in the browser's accessibility tree
• aria-label="XYZ" (where XYZ is the icon's brand name), to give the icon an accessible name

Note: if using the <svg> as the src for an <img> element, the alt attribute should still be used on the <img> element because the ARIA is not recognised in this context.

CSS-Tricks has also an article about accessible SVG icons.

Guidelines

This is the standard guideline. Use this to help with sizing your icons and they will look good no matter what border radius is chosen.

• Green is the safe zone, where the main body of the icon should be.
• Yellow is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.
• Red is off limits. It should not be touched by the icons. Red is also how a circular icon would look.

To see how the logos look, you can play around with the corner radius size using our interactive tool

Installation

npm install --save super-tiny-icons

Usage

The old-school way:

<img src="./node_modules/super-tiny-icons/images/svg/github.svg">

The modern way, the React (JSX) example:

import logo from 'super-tiny-icons/images/svg/github.svg';

<img src={logo} />

The demo repository bootstrapped with create-react-app: create-react-app-super-tiny-icons

Licenses

The majority of these vector logos are based on someone else's work.

• Social Media Icons by Aha-Soft - CC-BY
• Phone Icon - Free
• Lock Icon - MIT
• Wire Logo - Public Domain
• Signal Logo - GPLv3
• RSS Icon - MPL 1.1
• PDF Icon - Free
• Google+ - Public Domain
• Google
• Mastodon - AGPLv3
• GitLab
• HTML5 Shield - CC-BY
• npm Logo - CC-BY
• Docker Logo - Apache
• Steam
• Symantec
• Yubico - BSD
• Keybase - BSD
• eBay
• Kickstarter
• Yahoo!
• Bitcoin - CC0
• Bluetooth
• Blogger
• Medium
• Ghost
• Tumblr
• Intel
• Badoo
• YouTube
• Google Play
• Gmail
• Samsung Internet
• Plex - GPLv2

From SVGporn - CC0

IBM, Yammer, Android, Authy, Cloudflare, CodePen, DigitalOcean, Discord, Airbnb, WiFi, Delicious, Open Source, Patreon

Where possible, they retain their original licenses. Some logos may be subject to copyright and trademark laws, but these files are small enough to memorise.