Super Tiny Social Icons

Tontuf Co.
Tontuf Co.

Super Tiny Social Icons from Edent

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

623 Bytes		 Goodreads

669 Bytes		 TikTok

433 Bytes		 Friendica

849 Bytes

Media

SoundCloud

959 Bytes		 Vimeo

376 Bytes		 Spotify

436 Bytes		 YouTube

359 Bytes		 Apple Music

514 Bytes		 Bandcamp

200 Bytes
Deezer

733 Bytes		 iHeartRadio

893 Bytes		 Kodi

771 Bytes		 foobar2000

926 Bytes		 Pornhub

850 Bytes		 SubscribeStar

873 Bytes
Netflix

825 Bytes		 Hulu

482 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

558 Bytes		 Google Maps

778 Bytes		 Google Scholar

533 Bytes		 Google Drive

314 Bytes		 Google CoLaboratory

604 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

639 Bytes		 Signal

439 Bytes
Phone

591 Bytes		 LINE

478 Bytes		 Viber

713 Bytes		 Mailchimp

998 Bytes		 Threema

768 Bytes		 Mattermost

614 Bytes
Protonmail

437 Bytes		 XMPP/Jabber

797 Bytes		 Tutanota

627 Bytes		 Messenger

824 Bytes		 Discord

993 Bytes		 Zoom

530 Bytes
Wire

271 Bytes		 Teamspeak

936 Bytes		 Element

444 Bytes		 Briar

563 Bytes		 Guilded

816 Bytes		 SOGo

1021 Bytes

Education

Udemy

537 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

297 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

598 Bytes		 Opencast

312 Bytes		 Buffer

489 Bytes		 Upwork

666 Bytes
Duck Duck Go

925 Bytes		 Bing

241 Bytes		 IMDb

526 Bytes		 Heroku

450 Bytes		 Research Gate

913 Bytes		 OpenCores

309 Bytes
OpenBenches

754 Bytes		 TripAdvisor

712 Bytes		 Sentry

506 Bytes		 Behance

872 Bytes		 Taiga.io

759 Bytes		 Coil.com

515 Bytes
Glitch

1012 Bytes		 AngelList

983 Bytes		 Jellyfin

1003 Bytes		 Gandi

788 Bytes		 Kaggle

517 Bytes		 Humble Bundle

978 Bytes
freeCodeCamp

727 Bytes		 Codeberg

837 Bytes		 BitBucket

681 Bytes		 Etsy

538 Bytes		 Intercom

839 Bytes		 Overleaf

452 Bytes
Malt

1015 Bytes		 DataCamp

491 Bytes		 Lobste.rs

676 Bytes		 Quora

894 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

Browsers

Chrome

378 Bytes		 Firefox

1022 Bytes		 Samsung Internet

346 Bytes		 Edge

964 Bytes		 Opera

721 Bytes		 Safari

708 Bytes		 Brave

1001 Bytes
Chromium

379 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

Apple

417 Bytes		 npm

299 Bytes		 Docker

431 Bytes		 IBM

503 Bytes		 Open Source

259 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		 Pixelfed

989 Bytes		 Samsung

1023 Bytes		 Samsung (alt.)

864 Bytes		 Samsung (alt. 2)

934 Bytes
Uphold

819 Bytes		 CoinPot

739 Bytes		 This American Life

302 Bytes		 WHATWG

463 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

481 Bytes		 andOTP

608 Bytes		 OpenBugBounty

503 Bytes
OpenVPN

555 Bytes		 KeePassDX

772 Bytes		 WireGuard VPN

970 Bytes		 Bugcrowd VPN

799 Bytes		 Citrix

819 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

523 Bytes		 Drupal

899 Bytes		 React

360 Bytes
Angular

388 Bytes		 Sass

531 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

708 Bytes		 Backbone

463 Bytes
Vue

272 Bytes		 Gradle

690 Bytes		 Amber

753 Bytes		 Gitea

766 Bytes		 Drone.io

490 Bytes		 Ruby Gems

402 Bytes
Lucky Framework

486 Bytes		 Wekan

981 Bytes		 Kemal Framework

340 Bytes		 Ruby On Rails

480 Bytes		 Kotlin

251 Bytes		 Crystal

229 Bytes
Semaphore CI

640 Bytes		 Django Project

443 Bytes		 Ruby

983 Bytes		 SVG

790 Bytes		 Preact

530 Bytes		 Svelte

997 Bytes
C++

776 Bytes		 Elastic

730 Bytes		 TypeScript

1014 Bytes		 Dart

571 Bytes		 i18next

728 Bytes

Operating Systems / Kernel

Android

741 Bytes		 Arch Linux

425 Bytes		 GNU/Linux

965 Bytes		 Ubuntu

455 Bytes		 Windows

252 Bytes		 Elementary OS

466 Bytes		 Manjaro

375 Bytes
Debian

937 Bytes		 Linux Mint

989 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

832 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

567 Bytes		 Uber

864 Bytes		 Amazon S3

648 Bytes
Ansible

430 Bytes		 Gojek

376 Bytes		 Amazon Alexa

365 Bytes		 Finder

780 Bytes		 Roundcube

838 Bytes		 Fritz!

707 Bytes
Jacobin

241 Bytes		 Keskonfai.fr

700 Bytes		 Olympic Rings

678 Bytes		 Apache Guacamole

1021 Bytes		 Outlook

973 Bytes		 Terraform

303 Bytes		 Todoist

825 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

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.

Drummitup
Tags

You may like these posts

Show more


Our website uses cookies to enhance your experience. Learn More
Accept !