# 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! [![Buy me a coffee](https://www.ko-fi.com/img/donate_sm.png)](https://ko-fi.com/edent) ## 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? ### Social Media
flickr

250 Bytes		 Facebook

283 Bytes		 Tumblr

422 Bytes		 Twitter

433 Bytes		 LinkedIn

370 Bytes		 Instagram

345 Bytes
Reddit

607 Bytes		 Pinterest

526 Bytes		 VK

534 Bytes		 Mastodon

550 Bytes		 imgur

356 Bytes		 Slack

432 Bytes
### Media
SoundCloud

959 Bytes		 Vimeo

376 Bytes		 Spotify

436 Bytes		 YouTube

359 Bytes		 Apple Music

998 Bytes
### Google
Google

484 Bytes		 Google+

397 Bytes		 Google Play

403 Bytes		 Gmail

641 Bytes		 Google Maps

665 Bytes
### Communications
WhatsApp

589 Bytes		 Telegram

419 Bytes		 Skype

487 Bytes		 Snapchat

649 Bytes		 WeChat

639 Bytes		 Wire

277 Bytes
Phone

591 Bytes		 LINE

478 Bytes		 Viber

744 Bytes
### Websites
Hacker News

229 Bytes		 StackOverflow

310 Bytes		 StackExchange

445 Bytes		 WordPress

513 Bytes		 GitHub

542 Bytes		 Wikipedia

595 Bytes
GitLab

426 Bytes		 Meetup

524 Bytes		 eBay

819 Bytes		 Kickstarter

288 Bytes		 Yahoo!

379 Bytes		 Evernote

704 Bytes
Yammer

479 Bytes		 Blogger

354 Bytes		 Cloudflare

500 Bytes		 Amazon

673 Bytes		 Strava

290 Bytes		 Ko-Fi

500 Bytes
CodePen

375 Bytes		 DigitalOcean

263 Bytes		 Discord

505 Bytes		 Medium

379 Bytes		 AirBnB

581 Bytes		 Delicious

270 Bytes
Disqus

281 Bytes		 Ghost

259 Bytes		 Patreon

250 Bytes		 Trello

276 Bytes		 QQ

994 Bytes		 GOG.com

800 Bytes
Badoo

297 Bytes		 Samsung Internet

384 Bytes		 Laravel

583 Bytes		 Untappd

411 Bytes		 Vivino

405 Bytes		 Apereo

474 Bytes
Twilio

377 Bytes		 Plex

221 Bytes		 XING

362 Bytes		 Pinboard

258 Bytes		 Internet Archive

846 Bytes		 Access

399 Bytes
Baidu

799 Bytes		 Twitch

308 Bytes		 OK.ru

652 Bytes		 Pocket

517 Bytes		 StumbleUpon

599 Bytes		 Opencast

313 Bytes
Buffer

489 Bytes		 Upwork

670 Bytes		 Workato

489 Bytes		 Sketch

491 Bytes
### Internet
RSS

309 Bytes		 Mail

572 Bytes		 Email

342 Bytes		 HTML5

399 Bytes		 WiFi

683 Bytes
### Logos
Apple

286 Bytes		 npm

301 Bytes		 Docker

465 Bytes		 Ubuntu

492 Bytes		 IBM

569 Bytes		 Android

551 Bytes
Open Source

262 Bytes		 Intel

948 Bytes		 VLC

670 Bytes		 Vegetarian

311 Bytes
### Security
Tox

494 Bytes		 Lock / PGP

393 Bytes		 LastPass

320 Bytes		 Symantec

614 Bytes		 Yubico

309 Bytes		 Keybase

647 Bytes
Authy

347 Bytes		 HackerOne

446 Bytes
### Misc
PayPal

548 Bytes		 SlideShare

672 Bytes		 Dropbox

262 Bytes		 Steam

455 Bytes		 PDF

674 Bytes		 Windows

270 Bytes
Digidentity

389 Bytes		 Bitcoin

529 Bytes		 Ethereum

463 Bytes		 Bluetooth

253 Bytes		 Calendar

956 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](https://github.com/svg/svgo) and [svgcleaner](https://github.com/RazrFalcon/svgcleaner). Further smallification may be possible. Try it! * Each of these has an `xmlns="http://www.w3.org/2000/svg"` in the `` 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](https://github.com/edent/SuperTinyIcons/blob/master/images/reference/index.md). If they still look wrong, tell me by raising an issue! **New!** Icons also available in [Android Vector Drawables](https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html) 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: ``` ... ``` ### Icon accessibility The super tiny icons are accessible by default. Each icon has: * `role="img"`, to expose the `````` 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 `````` as the `src` for an `````` element, the `alt` attribute should still be used on the `````` element because the ARIA is not recognised in this context. CSS-Tricks has also an [article about accessible SVG icons](https://css-tricks.com/accessible-svgs/). ### 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. A template for logos * **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](https://edent.github.io/SuperTinyIcons/radius.html) ## Installation ```sh npm install --save super-tiny-icons ``` ## Usage The old-school way: ```html ``` The modern way, the React (JSX) example: ```jsx import logo from 'super-tiny-icons/images/svg/github.svg'; ``` The demo repository bootstrapped with `create-react-app`: [create-react-app-super-tiny-icons](https://github.com/limonte/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](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 * [Google+](https://commons.wikimedia.org/wiki/File:Google_Plus_logo_2015.svg) - Public Domain * [Google](http://svgshare.com/s/q) * [Mastodon](https://github.com/tootsuite/mastodon/blob/0ad694f96b7f0e951950e7525bde52cd11454cb2/app/assets/images/logo.svg) - AGPLv3 * [GitLab](https://about.gitlab.com/press/) * [HTML5 Shield](https://www.w3.org/html/logo/) - CC-BY * [npm Logo](https://commons.wikimedia.org/wiki/File:Npm-logo.svg) - CC-BY * [Docker Logo](https://github.com/docker/docker.github.io/blob/master/LICENSE) - Apache * [Steam](https://commons.wikimedia.org/wiki/File:Steam_icon_logo.svg) * [Symantec](https://commons.wikimedia.org/wiki/File:Symantec_logo10.svg) * [Yubico](https://github.com/Yubico/yubikey-manager-qt/blob/master/resources/icons/ykman.png) - BSD * [Keybase](https://github.com/keybase/client/blob/master/shared/images/iconfont/kb-iconfont-keybase-16.svg) - BSD * [eBay](https://commons.wikimedia.org/wiki/File:EBay_logo.svg) * [Kickstarter](https://www.kickstarter.com/help/brand_assets) * [Yahoo!](https://commons.wikimedia.org/wiki/File:Yahoo!_logo.svg) * [Bitcoin](https://commons.wikimedia.org/wiki/File:Bitcoin_logo.svg) - CC0 * [Bluetooth](https://commons.wikimedia.org/wiki/File:Bluetooth.svg) * [Blogger](https://commons.wikimedia.org/wiki/File:Blogger_icon.svg) * [Medium](https://medium.design/logos-and-brand-guidelines-f1a01a733592) * [Ghost](https://commons.wikimedia.org/wiki/File:Ghost-Logo.svg) * [Tumblr](https://www.tumblr.com/logo) * [Intel](https://commons.wikimedia.org/wiki/File:Intel-logo.svg) * [Badoo](https://team.badoo.com/new/) * [YouTube](https://www.youtube.com/yt/about/brand-resources/#logos-icons-colors) * [Google Play](https://commons.wikimedia.org/wiki/File:Google_Play_symbol_2016.svg) * [Gmail](https://commons.wikimedia.org/wiki/File:Gmail_Icon.svg) * [Samsung Internet](https://github.com/edent/SuperTinyIcons/pull/74/commits/8824bdaf1346a472ab425347f958e8e64c0948ee) * [Plex](https://github.com/plexinc/plex-media-player/blob/master/resources/images/icon.svg) - GPLv2 From [SVGporn](https://github.com/gilbarbara/logos/) - 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.