Convert Figma logo to code with AI

edent logoSuperTinyIcons

Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

15,111
955
15,111
24

Top Related Projects

SVG icons for popular brands

The iconic SVG, font, and CSS toolkit

A scalable set of icons handcrafted with <3 by GitHub

7,700

Official open source SVG icon library for Bootstrap.

25,566

Simply beautiful open-source icons

17,855

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Quick Overview

SuperTinyIcons is a collection of ultra-small, minified SVG icons for popular websites, apps, and brands. These icons are designed to be as small as possible while maintaining recognizability, making them ideal for use in projects where file size is a critical concern.

Pros

  • Extremely small file sizes, often under 1KB each
  • Wide variety of popular brand and website icons
  • SVG format ensures scalability without loss of quality
  • Easy to customize and integrate into web projects

Cons

  • Limited to brand and website icons, not suitable for general-purpose iconography
  • Some icons may lack detail due to extreme minimization
  • Not all brands or websites are represented
  • Manual integration required; no package manager support

Getting Started

To use SuperTinyIcons in your project:

  1. Visit the SuperTinyIcons GitHub repository.
  2. Navigate to the images folder.
  3. Download the desired SVG icon(s).
  4. Include the SVG in your HTML:
<img src="path/to/icon.svg" alt="Icon Name" width="32" height="32">

Or inline the SVG directly in your HTML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- SVG content here -->
</svg>

You can also use the icons as background images in CSS:

.icon {
  background-image: url('path/to/icon.svg');
  background-size: contain;
  width: 32px;
  height: 32px;
}

Competitor Comparisons

SVG icons for popular brands

Pros of Simple Icons

  • Larger collection with over 2,000 brand icons
  • Consistent 24x24 pixel size for all icons
  • Available in multiple formats (SVG, PNG, EPS)

Cons of Simple Icons

  • Larger file sizes compared to SuperTinyIcons
  • Less focus on extreme minimalism and file size optimization
  • May require more bandwidth for loading multiple icons

Code Comparison

SuperTinyIcons SVG example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#1da1f2" d="M459 152l1 13c0 139-106 299-299 299-59 0-115-17-161-47a217 217 0 0 0 156-44c-47-1-85-31-98-72l19 1c10 0 19-1 28-3-48-10-84-52-84-103v-2c14 8 30 13 47 14A105 105 0 0 1 36 67c51 64 129 106 216 110-2-8-2-16-2-24a105 105 0 0 1 181-72c24-4 47-13 67-25-8 24-25 45-46 58 21-3 41-8 60-17-14 21-32 40-53 55z"/>
</svg>

Simple Icons SVG example:

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Twitter</title>
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

  • Extensive icon library with thousands of options
  • Regular updates and additions to the icon set
  • Supports multiple file formats (SVG, webfonts, etc.)

Cons of Font-Awesome

  • Larger file size, potentially impacting page load times
  • More complex implementation, especially for beginners
  • Some features require a paid subscription

Code Comparison

SuperTinyIcons:

<img src="https://github.com/edent/SuperTinyIcons/raw/master/images/svg/github.svg" width="32" height="32" alt="GitHub">

Font-Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fab fa-github"></i>

SuperTinyIcons focuses on providing ultra-small SVG icons, typically under 1KB each. This approach results in faster load times and simpler implementation. However, the icon selection is more limited compared to Font-Awesome.

Font-Awesome offers a vast library of icons with regular updates and multiple file format options. It provides more flexibility in terms of styling and customization. However, this comes at the cost of larger file sizes and a steeper learning curve for implementation.

The code comparison shows that SuperTinyIcons can be easily implemented using a standard <img> tag, while Font-Awesome requires linking to an external stylesheet and using specific classes for icon display.

A scalable set of icons handcrafted with <3 by GitHub

Pros of Octicons

  • Larger, more comprehensive set of icons (200+)
  • Official GitHub design system, ensuring consistency with GitHub's UI
  • Multiple file formats available (SVG, PNG, AI)

Cons of Octicons

  • Larger file sizes, potentially impacting load times
  • More complex implementation due to multiple formats and options
  • Specific to GitHub's design language, may not fit all projects

Code Comparison

SuperTinyIcons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#1da1f2" d="M512 97c-19 8-39 14-60 16 22-13 38-34 46-58-20 12-43 21-67 25-19-20-46-32-76-32-58 0-117 52-102 129-87-4-165-46-216-110-24 40-19 107 32 140-17 0-33-5-47-13v1c0 51 36 93 84 103-15 4-31 5-47 2 13 42 52 72 98 73-47 36-96 49-155 44 46 30 102 47 161 47 197 0 306-168 299-312 20-15 38-34 52-55z"/>
</svg>

Octicons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
7,700

Official open source SVG icon library for Bootstrap.

Pros of Icons

  • Larger collection with over 1,800 icons
  • Maintained by the Bootstrap team, ensuring consistency with the Bootstrap framework
  • Includes both SVG and web font versions for flexibility

Cons of Icons

  • Larger file sizes due to the comprehensive collection
  • May require more effort to customize or modify individual icons
  • Higher complexity in implementation, especially when using the full set

Code Comparison

SuperTinyIcons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="#1da1f2" d="M459 152l1 13c0 139-106 299-299 299-59 0-115-17-161-47a217 217 0 0 0 156-44c-47-1-85-31-98-72l19 1c10 0 19-1 28-3-48-10-84-52-84-103v-2c14 8 30 13 47 14A105 105 0 0 1 36 67c51 64 129 106 216 110-2-8-2-16-2-24a105 105 0 0 1 181-72c24-4 47-13 67-25-8 24-25 45-46 58 21-3 41-8 60-17-14 21-32 40-53 55z"/>
</svg>

Icons:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
  <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
25,566

Simply beautiful open-source icons

Pros of Feather

  • Larger icon set with over 280 icons, offering more variety
  • Consistent design style across all icons, ensuring a cohesive look
  • Available in multiple formats (SVG, React, Vue, etc.) for easy integration

Cons of Feather

  • Larger file sizes compared to SuperTinyIcons
  • Less emphasis on extreme minimalism and file size optimization
  • May require more customization for specific use cases

Code Comparison

SuperTinyIcons:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#1da1f2" d="M512 97c-19 8-39 14-60 16 22-13 38-34 46-58-20 12-43 21-67 25-19-20-46-32-76-32-58 0-117 52-102 129-87-4-165-46-216-110-24 40-19 107 32 140-17 0-33-5-47-13v1c0 51 36 93 84 103-15 4-34 5-47 2 13 42 52 72 98 73-47 36-96 49-155 44 49 32 108 50 168 50 181 0 285-147 280-278 20-14 37-32 51-52z"/>
</svg>

Feather:

import React from 'react'
import { Twitter } from 'react-feather'

const TwitterIcon = () => {
  return <Twitter />
}

export default TwitterIcon

SuperTinyIcons focuses on minimal SVG code for extremely small file sizes, while Feather provides a more flexible and developer-friendly approach with various implementation options.

17,855

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Pros of Ionicons

  • Larger icon set with over 1,300 icons, offering more variety
  • Designed specifically for use with Ionic Framework, ensuring seamless integration
  • Supports multiple file formats (SVG, WebFont, PNG) for flexibility in different use cases

Cons of Ionicons

  • Larger file sizes, potentially impacting load times and performance
  • More complex implementation, especially for non-Ionic projects
  • Regular updates may require maintenance to keep icons current

Code Comparison

SuperTinyIcons:

<svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512">
  <rect width="512" height="512" rx="15%" fill="#181717"/>
  <path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/>
</svg>

Ionicons:

<ion-icon name="logo-github"></ion-icon>

SuperTinyIcons focuses on minimal, lightweight SVG icons, while Ionicons provides a more comprehensive icon library with easier implementation for Ionic projects. SuperTinyIcons requires more manual HTML, but offers greater control over the icon's appearance. Ionicons simplifies usage with a custom element, but may have more overhead for non-Ionic projects.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Super Tiny Icons

Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. There are currently 423 icons and the average size is under 529 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.

DOI

How Small?

527 Bytes SVG3,328 Bytes PNG352 Bytes SVG2,987 Bytes PNG235 Bytes SVG1,615 Bytes PNG

Hacktoberfest!

This project welcomes Hacktoberfest participants. All we ask is that you:

  • ✅ Make your logo under 1,024 bytes.
  • ✅ Follow the Contributing Guidance.
  • ✅ Be friendly to other participants.
  • ✅ Choose a logo which is highly recognisable.
  • ❌ Don't use AI. That means no ChatGPT, Gemini, Claude, etc. This is your opportunity to learn.
  • ❌ Don't change the HTML
  • ❌ Don't send broken logos
  • ❌ Don't ignore the guidelines

If you do not follow the instructions, your contribution will be marked as spam and you will be disqualified from Hacktoberfest.

What's Available so far?

1Password

364 bytes
Acast

406 bytes
Access

353 bytes
ActivityPub

341 bytes
Adobe

224 bytes
Airbnb

360 bytes
Alpine Linux

546 bytes
Amazon

646 bytes
Amazon Alexa

256 bytes
Amazon Simple Storage Service

531 bytes
Amber Framework

419 bytes
andOTP

257 bytes
Android

376 bytes
AngelList

969 bytes
Angular

321 bytes
Ansible

315 bytes
Apache AGE

730 bytes
Apereo Foundation

461 bytes
Apple

358 bytes
Apple Music

494 bytes
Apple Podcasts

945 bytes
appwrite

728 bytes
Arch Linux

312 bytes
Atom

351 bytes
Auth0

603 bytes
Authy

337 bytes
Azure

843 bytes
Backbone

341 bytes
Badoo

302 bytes
Baidu

787 bytes
Bandcamp

192 bytes
Bash

760 bytes
Behance

670 bytes
Bing

943 bytes
Bitbucket

669 bytes
Bitcoin

518 bytes
Bitwarden

290 bytes
Blender

372 bytes
Blogger

346 bytes
Bluesky

400 bytes
Bluetooth

370 bytes
Brave

1000 bytes
Briar

440 bytes
Buffer

427 bytes
Bugcrowd

779 bytes
Bun

1020 bytes
C

596 bytes
Calendar

747 bytes
CentOS

684 bytes
Chrome

405 bytes
Chromium

407 bytes
Citrix

747 bytes
Citrix

353 bytes
Clojure

564 bytes
Cloudflare

482 bytes
Codeberg

467 bytes
CodePen

307 bytes
Coderwall

248 bytes
CoffeeScript

517 bytes
Coil

504 bytes
coinpot

714 bytes
Google Colab

377 bytes
C++

670 bytes
Crystal

218 bytes
CSS3

390 bytes
Dart

549 bytes
DataCamp

481 bytes
Debian

926 bytes
Deezer

710 bytes
Delicious

263 bytes
dev.to

524 bytes
DeviantArt

267 bytes
Digidentity

373 bytes
DigitalOcean

248 bytes
Discord

348 bytes
Disqus

263 bytes
Django Project

432 bytes
Docker

420 bytes
Draw.io

427 bytes
Dribble

369 bytes
Drone

295 bytes
Dropbox

251 bytes
Drupal

862 bytes
Drupal

846 bytes
DuckDuckGo

880 bytes
Electronic Arts

283 bytes
eBay

804 bytes
Ecosia

780 bytes
Edge

1017 bytes
elastic

699 bytes
Element

418 bytes
Elementary OS

455 bytes
Email

330 bytes
Endeavour OS

626 bytes
ePub

312 bytes
Espressif

581 bytes
Ethereum

385 bytes
Etsy

467 bytes
Evernote

617 bytes
ExpressionEngine

632 bytes
F-Droid

963 bytes
Facebook

262 bytes
Fediverse

1006 bytes
Fedora

465 bytes
Figma

623 bytes
Filestash

271 bytes
Finder

665 bytes
Firebase

692 bytes
Firefox

1009 bytes
Flask

881 bytes
Flatpak

565 bytes
Flattr

335 bytes
Flickr

241 bytes
Floatplane

827 bytes
Flutter

493 bytes
foobar2000

459 bytes
FreeBSD

703 bytes
freeCodeCamp

705 bytes
Friendica

825 bytes
Fritz!

571 bytes
Gandi

753 bytes
GateHub

395 bytes
GeeksForGeeks

518 bytes
Gemini

618 bytes
Ghost

248 bytes
Git

369 bytes
Gitea

752 bytes
GitHub

518 bytes
GitLab

429 bytes
Gitpod

547 bytes
Glitch

966 bytes
Gmail

446 bytes
Gmail

571 bytes
Go

570 bytes
Godot

585 bytes
GOG.com

653 bytes
Gojek

262 bytes
Goodreads

374 bytes
Google

451 bytes
Google Assistant

370 bytes
Google Authenticator

644 bytes
Google Calendar

583 bytes
Google Collaborative content tools

489 bytes
Google Docs Editors

474 bytes
Google Drive

564 bytes
Google Drive

304 bytes
Google Maps

556 bytes
Google Maps

638 bytes
Google Meet

517 bytes
Google Play

424 bytes
Google+

384 bytes
Google Podcasts

449 bytes
Google Scholar

521 bytes
Gradle

658 bytes
Grafana

677 bytes
GraphQL

510 bytes
Grok

556 bytes
Guacamole

658 bytes
Guilded

334 bytes
h-card

403 bytes
h-entry

389 bytes
h-feed

478 bytes
Hacker News

217 bytes
HackerOne

430 bytes
HAML

877 bytes
Heroku

438 bytes
Homekit

736 bytes
HP

475 bytes
HTML5

439 bytes
Hulu

463 bytes
Humble Bundle

956 bytes
i18next

716 bytes
IBM

481 bytes
iHeartRadio

772 bytes
IMDb

510 bytes
Imgur

267 bytes
Instagram

704 bytes
Intel

557 bytes
Intercom

418 bytes
Internet Archive

804 bytes
itch.io

856 bytes
iTunes

748 bytes
Jacobin

230 bytes
Java

783 bytes
JavaScript

408 bytes
Jellyfin

616 bytes
jQuery

1010 bytes
JSON-LD

894 bytes
JSON

512 bytes
JSON Feed

669 bytes
JSR

415 bytes
Julia

287 bytes
JustGiving

353 bytes
Kaggle

301 bytes
KeePassDX

520 bytes
Kemal Framework

329 bytes
Keskonfai

683 bytes
Keybase

636 bytes
Kickstarter

277 bytes
Ko-Fi

401 bytes
Kodi

756 bytes
Kotlin

240 bytes
Laravel

388 bytes
LastPass

285 bytes
LeetCode

557 bytes
Liberapay

548 bytes
LibreSpeed

945 bytes
LINE

458 bytes
Linear

394 bytes
LinkedIn

360 bytes
Linux

954 bytes
Linux Mint

359 bytes
LinuxContainers

563 bytes
Lobste.rs

508 bytes
Lock

381 bytes
Logitech

313 bytes
Lucky Framework

475 bytes
macOS

758 bytes
Mail

555 bytes
Mailchimp

985 bytes
Malt

417 bytes
Manjaro

226 bytes
Markdown

422 bytes
mastercard

326 bytes
Mastodon

578 bytes
matrix

645 bytes
Mattermost

295 bytes
McAfee

266 bytes
McDonald's

438 bytes
Medium

229 bytes
Meetup

506 bytes
Messenger

683 bytes
microformats

787 bytes
micropython

262 bytes
Microsoft

325 bytes
Minecraft

957 bytes
MongoDB

357 bytes
MySQL

1011 bytes
NetBeans

525 bytes
NetBSD

422 bytes
Netflix

439 bytes
NextCloud

253 bytes
NGINX

454 bytes
NHS

478 bytes
NixOS

532 bytes
nobara

838 bytes
Node.js

655 bytes
NordVPN

386 bytes
Notion

971 bytes
npm

281 bytes
obs-logo

747 bytes
OK.ru

354 bytes
Olympic Rings

673 bytes
OnlyFans

405 bytes
OpenBenches

617 bytes
Open Bug Bounty

491 bytes
Opencast

298 bytes
Open Collective

308 bytes
OpenCores

269 bytes
Open Source

282 bytes
OpenStreetMap

955 bytes
OpenVPN

282 bytes
Opera

297 bytes
Orcid

315 bytes
Origin

634 bytes
Outlook

880 bytes
Overcast

765 bytes
Overleaf

441 bytes
Patreon

209 bytes
PayPal

499 bytes
PDF

654 bytes
PeerTube

281 bytes
Phone

578 bytes
PHP

528 bytes
Pinboard

245 bytes
Pinterest

512 bytes
Pixelfed

975 bytes
Plausible

971 bytes
PlayStation

519 bytes
Plex

209 bytes
Pocket

297 bytes
Pocket Casts

267 bytes
Pop!_OS

431 bytes
Pornhub

814 bytes
portronics

841 bytes
Postman

734 bytes
PowerShell

947 bytes
Preact

337 bytes
Printer

276 bytes
ProductHunt

402 bytes
Prometheus

983 bytes
Proton Mail

632 bytes
Python

499 bytes
QQ

937 bytes
quora

268 bytes
R

956 bytes
Raspberry Pi

909 bytes
React

343 bytes
Reddit

596 bytes
RedHat

538 bytes
Replit

535 bytes
Research Gate

870 bytes
Roblox

289 bytes
Rockstar Games

839 bytes
Roundcube

518 bytes
RSS

280 bytes
Ruby

945 bytes
Ruby Gems

275 bytes
Ruby On Rails

451 bytes
Rust

904 bytes
Safari

689 bytes
Samsung

834 bytes
Samsung Internet

316 bytes
Samsung

606 bytes
Samsung

871 bytes
Sass

505 bytes
Semantic Web

421 bytes
Semaphore CI

395 bytes
Sentry

363 bytes
Signal

427 bytes
Sketch

357 bytes
Skype

472 bytes
Slack

389 bytes
SlideShare

650 bytes
Snapchat

637 bytes
SOGo

828 bytes
solana

398 bytes
Solidity

552 bytes
SoundCloud

948 bytes
SPARQL

796 bytes
Spotify

422 bytes
Square Cash

779 bytes
Stack Exchange

390 bytes
Stack Overflow

290 bytes
Steam

445 bytes
Stitcher

376 bytes
Strava

273 bytes
StumbleUpon

347 bytes
Sublime Merge

555 bytes
Sublime Text

593 bytes
SubscribeStar

587 bytes
Svelte

474 bytes
SVG

750 bytes
Swift

662 bytes
Symantec

600 bytes
Symfony

613 bytes
taiga.io

735 bytes
tailwindCss

539 bytes
TATA

1013 bytes
Teamspeak

925 bytes
Telegram

480 bytes
TensorFlow

445 bytes
Terraform

288 bytes
This American Life

282 bytes
Threads

368 bytes
Threema

385 bytes
TikTok

343 bytes
Todoist

741 bytes
Tox

484 bytes
Trello

266 bytes
TripAdvisor

646 bytes
Tumblr

255 bytes
TuneIn

574 bytes
Tutanota

526 bytes
Twilio

315 bytes
Twitch

275 bytes
Twitter

356 bytes
TypeScript

607 bytes
Uber

591 bytes
Ubiquiti

544 bytes
Ubisoft

507 bytes
Ubuntu

442 bytes
Udemy

293 bytes
Unicode

364 bytes
Unreal Engine

959 bytes
Untappd

399 bytes
Uphold

803 bytes
Uplay

521 bytes
Upwork

488 bytes
Vagrant

541 bytes
Vegetarian

672 bytes
Venmo

275 bytes
Vercel

184 bytes
Viber

697 bytes
VictoriaMetrics

377 bytes
Vim

703 bytes
Vimeo

336 bytes
visa

627 bytes
Visual Studio Code

899 bytes
Vivino

284 bytes
VK

523 bytes
VLC

640 bytes
Vue

261 bytes
W3C

527 bytes
Wayland

910 bytes
WebAssembly

480 bytes
WebMention

266 bytes
WebToons

977 bytes
WeChat

611 bytes
Wekan

970 bytes
WhatsApp

439 bytes
WHATWG

317 bytes
WiFi

566 bytes
Wikipedia

567 bytes
Windows

230 bytes
Wire

260 bytes
WireGuard

952 bytes
WordPress

492 bytes
Workato

367 bytes
X

291 bytes
X11

760 bytes
XING

351 bytes
XMPP

681 bytes
Yahoo!

285 bytes
YAML

400 bytes
Yammer

468 bytes
Yarn

501 bytes
Yelp

452 bytes
Yii

767 bytes
YouTube

337 bytes
Yubico

254 bytes
Zoom

519 bytes
Zorinos

258 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.
  • 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 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.
  • 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"><path
d="m0 0H512V512H0"
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} />;

CSS can be used to customize an icon's appearance. The following example shows styles for small/medium/large icons with square/rounded/circular frames:

<style>
  .small-square {
    width: 20px;
  }
  .medium-rounded {
    width: 50px;
    border-radius: 10%;
  }
  .large-circular {
    width: 100px;
    border-radius: 50%;
  }
</style>

<img src="images/svg/reddit.svg" class="small-square" />
<img src="images/svg/reddit.svg" class="medium-rounded" />
<img src="images/svg/reddit.svg" class="large-circular" />

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.

NPM DownloadsLast 30 Days