55 lines
8.4 KiB
Markdown
55 lines
8.4 KiB
Markdown
# Super Tiny Social Icons
|
|
Under 1KB each! Super Tiny Social Icons are minuscule SVG versions of your favourite logos
|
|
|
|
The logos have a 512x512 viewbox and will scale up and down to suit your needs.
|
|
|
|
Originally created for my contact page - https://edent.tel/
|
|
|
|
## How Small?
|
|
|
|
| 839 Bytes SVG | 18,580 Bytes PNG | 436 Bytes SVG | 16,019 Bytes PNG | 251 Bytes SVG | 13,485 Bytes PNG |
|
|
|------ |----------- |------ |---------- |------ |----------- |
|
|
| <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/github.svg" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/original/github.png" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/twitter.svg" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/original/twitter.png" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/flickr.svg" width="100" /> | <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/master/original/flickr.png" width="100" /> |
|
|
|
|
## What's Available so far?
|
|
|
|
<img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/hackernews.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/flickr.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/facebook.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/tumblr.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/54bca2f9d9703dc5136b51b0488aa87236ad20af/tiny/mail.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/telegram.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/dropbox.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/07f50efbe8d0d5f8596e9599949eeab20644d5db/tiny/instagram.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/linkedin.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/stackoverflow.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/vimeo.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/twitter.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/785dd5c329ce406b569d9fe0dab04dbd533e0afc/tiny/lock.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/07f50efbe8d0d5f8596e9599949eeab20644d5db/tiny/html5.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/paypal.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/54bca2f9d9703dc5136b51b0488aa87236ad20af/tiny/email.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/pinterest.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/slideshare.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/soundcloud.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/390faba48f0a90ddb1f8061e1a75239176a89665/tiny/spotify.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/steam.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/whatsapp.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/07f50efbe8d0d5f8596e9599949eeab20644d5db/tiny/wikipedia.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/wordpress.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/github.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/785dd5c329ce406b569d9fe0dab04dbd533e0afc/tiny/phone.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/skype.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/785dd5c329ce406b569d9fe0dab04dbd533e0afc/tiny/wire.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/amazon.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/96fbc140f6bae60054a83270694dbfb1b6a22159/tiny/google_plus.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/snapchat.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/wechat.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4d213260d1ab8bcba397de342913c3f6cccbef3a/tiny/youtube.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/4fb057fd0c213f495f8756531f1fa2b21385a15c/tiny/rss.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/6db923325ec787ffd91f5ad1e3a815e017de2a1f/tiny/pdf.svg" width="100" /> <img src="https://cdn.rawgit.com/edent/SuperTinySocialIcons/e43167cdd0df40dac6d0147acb23d3f8664459fa/tiny/reddit.svg" width="100" />
|
|
|
|
## 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 minified using [svgo](https://github.com/svg/svgo) and then hand edited. Further smallification is possible.
|
|
|
|
* 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.
|
|
* Newlines can be stripped - they've been kept for readability where possible.
|
|
* Rounded corners can be dropped - `rx="15%" ry="15%"` - 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.
|
|
|
|
You can see the difference this makes in [`youtube.svg`](https://github.com/edent/SuperTinySocialIcons/raw/master/tiny/youtube.svg) which is a ginormous 1,074 Bytes. By applying some of the above techniques we can get it down to a svelte 998 Bytes in [`youtube-tiny.svg`](https://github.com/edent/SuperTinySocialIcons/raw/master/tiny/youtube-tiny.svg).
|
|
|
|
Think you can make them smaller? Tell me by raising an issue!
|
|
|
|
Want more icons? Tell me by raising an issue!
|
|
|
|
## Licenses
|
|
|
|
The majority of these vector logos are based on someone else's work.
|
|
|
|
* [Social Media Icons by Aha-Soft](https://www.iconfinder.com/iconsets/social-flat-rounded-rects) - CC-BY
|
|
* [Phone Icon](https://www.iconfinder.com/icons/1807538/phone_icon#size=128) - Free
|
|
* [Lock Icon](https://www.iconfinder.com/icons/1814107/lock_padlock_secure_icon#size=512) - MIT
|
|
* [Wire Logo](https://commons.wikimedia.org/wiki/File:Wire_software_logo.svg) - Public Domain
|
|
* [Signal Logo](https://github.com/WhisperSystems/Signal-iOS/blob/master/Signal/Images.xcassets/logoSignal.imageset/logoSignal.pdf) - GPLv3
|
|
* [RSS Icon](https://commons.wikimedia.org/wiki/File:Generic_Feed-icon.svg) - MPL 1.1
|
|
* [PDF Icon](https://www.iconfinder.com/iconsets/line-icons-set) - Free
|
|
* [Reddit's Snoo](http://ionicons.com/) - MIT
|
|
* [Google+](https://commons.wikimedia.org/wiki/File:Google_Plus_logo_2015.svg) - Public Domain
|
|
* [HTML5 Shield](https://www.w3.org/html/logo/) - CC-BY
|
|
|
|
Where possible, they retain their original licenses. Some logos may be subject to copyright laws, but these files are small enough to memorise.
|