Skip to content
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Merge pull request #193 from judeGibbons/update-vivino Mar 25, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Dec 4, 2017
CONTRIBUTING.md Remove reference to radius file from Contributing.md. (#179) Mar 5, 2019
ISSUE_TEMPLATE.md
LICENSE Initial commit Apr 13, 2017
README.md
package.json npm update Feb 28, 2019

README.md

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

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

518 Bytes

Media

SoundCloud

959 Bytes
Vimeo

376 Bytes
Spotify

436 Bytes
YouTube

359 Bytes
Apple Music

1005 Bytes
Bandcamp

205 Bytes

Google

Google

484 Bytes
Google+

397 Bytes
Google Play

403 Bytes
Gmail

641 Bytes
Google Maps

706 Bytes
Google Scholar

525 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

719 Bytes

Websites

Hacker News

229 Bytes
StackOverflow

310 Bytes
StackExchange

407 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
Dribbble

641 Bytes
CodePen

375 Bytes
DigitalOcean

263 Bytes
Discord

505 Bytes
Medium

379 Bytes
AirBnB

428 Bytes
Delicious

270 Bytes
Disqus

281 Bytes
Ghost

259 Bytes
Sketch

409 Bytes
Trello

276 Bytes
QQ

994 Bytes
GOG.com

708 Bytes
Badoo

297 Bytes
Samsung Internet

384 Bytes
Workato

446 Bytes
Untappd

411 Bytes
Vivino

296 Bytes
Apereo

474 Bytes
Twilio

423 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

482 Bytes
Upwork

670 Bytes
Duck Duck Go

926 Bytes
Bing

241 Bytes
IMDb

526 Bytes

Internet

RSS

309 Bytes
Mail

572 Bytes
Email

343 Bytes
HTML5

399 Bytes
WiFi

603 Bytes
W3C

637 Bytes
Unicode

879 Bytes

Podcasts

iTunes

786 Bytes
Google

479 Bytes
Pocketcasts

312 Bytes
Stitcher

387 Bytes
TuneIn

609 Bytes
acast

528 Bytes

Logos

Apple

417 Bytes
npm

301 Bytes
Docker

431 Bytes
Ubuntu

492 Bytes
IBM

504 Bytes
Android

551 Bytes
Open Source

262 Bytes
Intel

948 Bytes
VLC

670 Bytes
Vegetarian

311 Bytes
Espressif

671 Bytes
NHS

591 Bytes

Security

Tox

494 Bytes
Lock / PGP

393 Bytes
LastPass

297 Bytes
Symantec

614 Bytes
Yubico

309 Bytes
Keybase

647 Bytes
Authy

347 Bytes
HackerOne

446 Bytes
Bitwarden

298 Bytes

Payments

PayPal

548 Bytes
Bitcoin

529 Bytes
Ethereum

463 Bytes
Liberapay

565 Bytes
Ko-Fi

500 Bytes
Flattr

347 Bytes
Patreon

250 Bytes

Programming

Python

552 Bytes
PHP

588 Bytes
Laravel

583 Bytes
Drupal

977 Bytes
React

361 Bytes
Vue

286 Bytes
Angular

381 Bytes
Sass

531 Bytes
Linux

966 Bytes
JSON

557 Bytes

Misc

Calendar

959 Bytes
SlideShare

672 Bytes
Dropbox

262 Bytes
Steam

455 Bytes
PDF

674 Bytes
Windows

270 Bytes
Digidentity

384 Bytes
Bluetooth

253 Bytes
ePub

323 Bytes
NextCloud

312 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.

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.

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.

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.

You can’t perform that action at this time.