@staiia/super-tiny-icons

0.4.0 • Public • Published

Super Tiny Icons

Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 568 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 5,897 Bytes PNG 414 Bytes SVG 4,743 Bytes PNG 250 Bytes SVG 4,478 Bytes PNG

What's Available so far?

Social Media

flickr

250 Bytes
Facebook

311 Bytes
Tumblr

422 Bytes
Twitter

414 Bytes
LinkedIn

370 Bytes
Instagram

767 Bytes
reddit

607 Bytes
Pinterest

526 Bytes
VK

534 Bytes
Mastodon

550 Bytes
imgur

278 Bytes
Slack

531 Bytes
dev.to

556 Bytes
Goodreads

669 Bytes
TikTok

433 Bytes
Pixelfed

989 Bytes
Friendica

847 Bytes

Media

SoundCloud

959 Bytes
Vimeo

376 Bytes
Spotify

436 Bytes
YouTube

352 Bytes
Apple Music

514 Bytes
Bandcamp

200 Bytes
Deezer

733 Bytes
iHeartRadio

893 Bytes
Kodi

771 Bytes
foobar2000

769 Bytes
Pornhub

850 Bytes
SubscribeStar

868 Bytes
Netflix

792 Bytes
Hulu

482 Bytes
DeviantArt

563 Bytes

Google

Google

484 Bytes
Google Play

504 Bytes
Gmail

482 Bytes
Google calendar

632 Bytes
Google collaborative content tools

502 Bytes
Google docs editors

487 Bytes
Google drive

529 Bytes
Google meet

530 Bytes
Google Maps

778 Bytes
Google Scholar

533 Bytes
Google Drive

314 Bytes
Google CoLaboratory

599 Bytes

Google (Old)

Google Maps (old)

713 Bytes
Gmail (Old)

584 Bytes
Google Drive (Old)

313 Bytes
Google+

397 Bytes

Communications

   
WhatsApp

479 Bytes
Telegram

419 Bytes
Skype

487 Bytes
Snapchat

649 Bytes
WeChat

640 Bytes
Signal

439 Bytes
Phone

591 Bytes
LINE

478 Bytes
Viber

713 Bytes
Mailchimp

998 Bytes
Threema

748 Bytes
Mattermost

614 Bytes
Protonmail

437 Bytes
XMPP/Jabber

760 Bytes
Tutanota

579 Bytes
Messenger

694 Bytes
Messenger

699 Bytes
Discord

993 Bytes
Zoom

530 Bytes
Wire

271 Bytes
Teamspeak

936 Bytes
Element

438 Bytes
Briar

574 Bytes
Guilded

811 Bytes
SOGo

851 Bytes

Education

Udemy

308 Bytes

Websites

Hacker News

229 Bytes
StackOverflow

309 Bytes
StackExchange

406 Bytes
WordPress

513 Bytes
GitHub

542 Bytes
Wikipedia

583 Bytes
GitLab

426 Bytes
Meetup

524 Bytes
eBay

819 Bytes
Kickstarter

288 Bytes
Yahoo!

295 Bytes
Evernote

704 Bytes
Yammer

479 Bytes
Blogger

354 Bytes
Cloudflare

500 Bytes
Amazon

673 Bytes
Strava

286 Bytes
Dribbble

641 Bytes
CodePen

375 Bytes
DigitalOcean

259 Bytes
Medium

379 Bytes
AirBnB

427 Bytes
Delicious

353 Bytes
Disqus

280 Bytes
Ghost

259 Bytes
Sketch

408 Bytes
Trello

276 Bytes
QQ

950 Bytes
Badoo

285 Bytes
Yelp

463 Bytes
Workato

431 Bytes
Untappd

410 Bytes
Vivino

294 Bytes
Apereo

473 Bytes
Twilio

438 Bytes
Plex

221 Bytes
XING

362 Bytes
Pinboard

258 Bytes
Internet Archive

846 Bytes
Access

389 Bytes
Baidu

799 Bytes
Twitch

308 Bytes
OK.ru

630 Bytes
Pocket

517 Bytes
StumbleUpon

359 Bytes
Opencast

312 Bytes
Buffer

489 Bytes
Upwork

666 Bytes
Duck Duck Go

925 Bytes
Bing

239 Bytes
IMDb

526 Bytes
Heroku

450 Bytes
Research Gate

913 Bytes
OpenCores

309 Bytes
OpenBenches

754 Bytes
TripAdvisor

712 Bytes
Sentry

506 Bytes
Behance

689 Bytes
Taiga.io

753 Bytes
Coil.com

515 Bytes
Glitch

1012 Bytes
AngelList

983 Bytes
Jellyfin

672 Bytes
Gandi

766 Bytes
Kaggle

517 Bytes
Humble Bundle

978 Bytes
freeCodeCamp

727 Bytes
Codeberg

594 Bytes
BitBucket

681 Bytes
Etsy

538 Bytes
Intercom

839 Bytes
Overleaf

452 Bytes
Malt

1015 Bytes
DataCamp

491 Bytes
Lobste.rs

536 Bytes
Quora

499 Bytes

Internet

RSS

307 Bytes
Mail

572 Bytes
Email

342 Bytes
HTML5

399 Bytes
WiFi

583 Bytes
W3C

538 Bytes
Unicode

612 Bytes
Markdown

449 Bytes
HAML

937 Bytes
microformats

798 Bytes
CSS3

384 Bytes
WebAssembly

498 Bytes
JSON Feed

684 Bytes

Browsers

Chrome

378 Bytes
Firefox

1022 Bytes
Samsung Internet

346 Bytes
Edge

964 Bytes
Opera

469 Bytes
Safari

708 Bytes
Brave

1001 Bytes
Chromium

369 Bytes

Podcasts

iTunes

779 Bytes
Google

466 Bytes
Pocket Casts

292 Bytes
Stitcher

387 Bytes
TuneIn

608 Bytes
acast

461 Bytes
Overcast

789 Bytes

Logos

3
Apple

417 Bytes
npm

299 Bytes
Docker

431 Bytes
IBM

503 Bytes
Open Source

241 Bytes
Intel

757 Bytes
VLC

670 Bytes
Vegetarian

300 Bytes
Espressif

641 Bytes
NHS

491 Bytes
Orcid

421 Bytes
HP

496 Bytes
RedHat

549 Bytes
CentOS

743 Bytes
Git

467 Bytes
Microsoft

347 Bytes
Grafana

972 Bytes
Ubiquiti

558 Bytes
Adobe

237 Bytes
Homekit

821 Bytes
Samsung

872 Bytes
Samsung (alt.)

617 Bytes
Samsung (alt. 2)

893 Bytes
Uphold

819 Bytes
CoinPot

739 Bytes
This American Life

302 Bytes
WHATWG

423 Bytes
Pop!_OS

450 Bytes

Security

Tox

494 Bytes
Lock / PGP

393 Bytes
LastPass

297 Bytes
Symantec

614 Bytes
Yubico

306 Bytes
Keybase

647 Bytes
Authy

347 Bytes
HackerOne

446 Bytes
Bitwarden

297 Bytes
Auth0

410 Bytes
andOTP

608 Bytes
OpenBugBounty

503 Bytes
OpenVPN

555 Bytes
KeePassDX

711 Bytes
WireGuard VPN

970 Bytes
Bugcrowd VPN

799 Bytes
Citrix

814 Bytes
Citrix (compact)

438 Bytes

Payments

PayPal

548 Bytes
Bitcoin

529 Bytes
Ethereum

412 Bytes
Liberapay

565 Bytes
Ko-Fi

421 Bytes
Flattr

347 Bytes
Patreon

249 Bytes
Venmo

343 Bytes
Square Cash

791 Bytes
OpenCollective

474 Bytes
GateHub

462 Bytes

Programming

Python

559 Bytes
Julia

298 Bytes
PHP

595 Bytes
Laravel

399 Bytes
Drupal

899 Bytes
React

360 Bytes
Angular

388 Bytes
Sass

528 Bytes
JSON

523 Bytes
Yarn

514 Bytes
Go

582 Bytes
Java

835 Bytes
Rust

1007 Bytes
Clojure

632 Bytes
CoffeeScript

534 Bytes
JavaScript

519 Bytes
Flutter

695 Bytes
Backbone

463 Bytes
Vue

272 Bytes
Gradle

690 Bytes
Amber

746 Bytes
Gitea

766 Bytes
Drone.io

490 Bytes
Ruby Gems

381 Bytes
Lucky Framework

486 Bytes
Wekan

981 Bytes
Kemal Framework

340 Bytes
Ruby On Rails

475 Bytes
Kotlin

251 Bytes
Crystal

229 Bytes
Semaphore CI

472 Bytes
Django Project

443 Bytes
Ruby

963 Bytes
SVG

790 Bytes
Preact

530 Bytes
Svelte

997 Bytes
C++

776 Bytes
Elastic

730 Bytes
TypeScript

620 Bytes
Dart

564 Bytes
i18next

728 Bytes
Godot

998 Bytes

Operating Systems / Kernel

Android

514 Bytes
Arch Linux

425 Bytes
GNU/Linux

965 Bytes
Ubuntu

455 Bytes
Windows

252 Bytes
Elementary OS

466 Bytes
Manjaro

367 Bytes
Debian

937 Bytes
Linux Mint

374 Bytes
NixOS

543 Bytes
macOS

774 Bytes
FreeBSD

756 Bytes

Gaming

Steam

455 Bytes
GOG.com

718 Bytes
Ubisoft

529 Bytes
Uplay

542 Bytes
Electronic Arts

296 Bytes
Minecraft

1023 Bytes
itch.io

870 Bytes
Logitech

371 Bytes
Origin

656 Bytes

Misc

Calendar

967 Bytes
SlideShare

661 Bytes
Dropbox

262 Bytes
PDF

674 Bytes
Digidentity

383 Bytes
Bluetooth

253 Bytes
ePub

323 Bytes
NextCloud

311 Bytes
Raspberry Pi

1010 Bytes
Printer

453 Bytes
Uber

864 Bytes
Amazon S3

648 Bytes
Ansible

430 Bytes
Gojek

294 Bytes
Amazon Alexa

365 Bytes
Finder

780 Bytes
Roundcube

537 Bytes
Fritz!

707 Bytes
Jacobin

241 Bytes
Keskonfai.fr

700 Bytes
Olympic Rings

678 Bytes
Apache Guacamole

1021 Bytes
Outlook

896 Bytes
Terraform

303 Bytes
Todoist

771 Bytes

Text editors

Sublime Text

728 Bytes
Visual Studio Code

923 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, Illustrator, or a text editor, then were minified using Yann Armelin's SVG Path Editor, 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!

Android Vector Drawables

Icons also available as Android Vector Drawables, so you can easily use them in Android apps.

They are converted using Android Studio and are not guaranteed to be under 1KB.

To convert in Android Studio, go to Tools Resource Manager Drawable + Import Drawables then select the SVGs.

Note Android Studio doesn't like rounded corners with a percentage length value. Before importing, run sed -i '/rx\=\"15\%\"/d' ./*.svg to remove the corner or sed -i -e '/rx\=/s/\"15\%\"/\"77\"/' ./*.svg to replace the percentage length value with a corresponding fixed length value.

See: https://issuetracker.google.com/issues/176694227

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

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

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, Tim Cuthbertson

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.

Package Sidebar

Install

npm i @staiia/super-tiny-icons

Weekly Downloads

0

Version

0.4.0

License

MIT

Unpacked Size

242 kB

Total Files

326

Last publish

Collaborators

  • billskate