SuperTinyIcons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
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
Official open source SVG icon library for Bootstrap.
Simply beautiful open-source icons
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:
- Visit the SuperTinyIcons GitHub repository.
- Navigate to the
imagesfolder. - Download the desired SVG icon(s).
- 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>
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>
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.
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 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Super Tiny Icons
Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. There are currently 386 icons and the average size is under 522 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!
How Small?
| 527 Bytes SVG | 3,328 Bytes PNG | 352 Bytes SVG | 2,987 Bytes PNG | 235 Bytes SVG | 1,615 Bytes PNG |
|---|---|---|---|---|---|
 |  |  |  |  |  |
What's Available so far?
1Password 360 bytes |
Acast 402 bytes |
Access 349 bytes |
ActivityPub 337 bytes |
Adobe 220 bytes |
Airbnb 356 bytes |
Amazon 642 bytes |
Amazon Alexa 252 bytes |
Amazon Simple Storage Service 527 bytes |
Amber Framework 415 bytes |
andOTP 253 bytes |
Android 372 bytes |
AngelList 965 bytes |
Angular 317 bytes |
Ansible 311 bytes |
Apereo Foundation 453 bytes |
Apple 354 bytes |
Apple Music 490 bytes |
Apple Podcasts 940 bytes |
Arch Linux 308 bytes |
Atom 347 bytes |
Auth0 387 bytes |
Authy 329 bytes |
Azure 841 bytes |
Backbone 337 bytes |
Badoo 298 bytes |
Baidu 783 bytes |
Bandcamp 188 bytes |
Bash 756 bytes |
Behance 666 bytes |
Bing 939 bytes |
Bitbucket 665 bytes |
Bitcoin 514 bytes |
Bitwarden 286 bytes |
Blender 368 bytes |
Blogger 339 bytes |
Bluesky 397 bytes |
Bluetooth 366 bytes |
Brave 996 bytes |
Briar 491 bytes |
Buffer 471 bytes |
Bugcrowd 774 bytes |
Bun 1016 bytes |
Calendar 744 bytes |
CentOS 728 bytes |
Chrome 401 bytes |
Chromium 403 bytes |
Citrix 743 bytes |
Citrix 348 bytes |
Clojure 560 bytes |
Cloudflare 478 bytes |
Codeberg 463 bytes |
CodePen 303 bytes |
Coderwall 244 bytes |
CoffeeScript 513 bytes |
Coil 500 bytes |
coinpot 710 bytes |
Google Colab 373 bytes |
C++ 666 bytes |
Crystal 214 bytes |
CSS3 384 bytes |
Dart 545 bytes |
DataCamp 476 bytes |
Debian 922 bytes |
Deezer 717 bytes |
Delicious 259 bytes |
dev.to 521 bytes |
DeviantArt 263 bytes |
Digidentity 366 bytes |
DigitalOcean 244 bytes |
Discord 345 bytes |
Disqus 259 bytes |
Django Project 428 bytes |
Docker 416 bytes |
Dribble 365 bytes |
Drone 291 bytes |
Dropbox 246 bytes |
Drupal 842 bytes |
DuckDuckGo 879 bytes |
Electronic Arts 279 bytes |
eBay 800 bytes |
Ecosia 776 bytes |
Edge 1013 bytes |
elastic 695 bytes |
Element 414 bytes |
Elementary OS 451 bytes |
Email 326 bytes |
Endeavour OS 622 bytes |
ePub 308 bytes |
Espressif 577 bytes |
Ethereum 381 bytes |
Etsy 462 bytes |
Evernote 613 bytes |
ExpressionEngine 628 bytes |
F-Droid 1015 bytes |
Facebook 258 bytes |
Fediverse 1003 bytes |
Filestash 267 bytes |
Finder 661 bytes |
Firefox 1005 bytes |
Flattr 331 bytes |
Flickr 235 bytes |
Floatplane 823 bytes |
Flutter 489 bytes |
foobar2000 455 bytes |
FreeBSD 700 bytes |
freeCodeCamp 701 bytes |
Friendica 821 bytes |
Fritz! 616 bytes |
Gandi 749 bytes |
GateHub 447 bytes |
Gemini 615 bytes |
Ghost 244 bytes |
Git 365 bytes |
Gitea 748 bytes |
GitHub 514 bytes |
GitLab 425 bytes |
Gitpod 543 bytes |
Glitch 1017 bytes |
Gmail 442 bytes |
Gmail 567 bytes |
Go 566 bytes |
Godot 683 bytes |
GOG.com 703 bytes |
Gojek 258 bytes |
Goodreads 370 bytes |
Google 447 bytes |
Google Assistant 366 bytes |
Google Calendar 579 bytes |
Google Collaborative content tools 485 bytes |
Google Docs Editors 470 bytes |
Google Drive 560 bytes |
Google Drive 298 bytes |
Google Maps 553 bytes |
Google Maps 683 bytes |
Google Meet 513 bytes |
Google Play 420 bytes |
Google+ 380 bytes |
Google Podcasts 444 bytes |
Google Scholar 517 bytes |
Gradle 654 bytes |
Grafana 674 bytes |
Guacamole 655 bytes |
Guilded 330 bytes |
h-card 399 bytes |
h-entry 386 bytes |
h-feed 474 bytes |
Hacker News 213 bytes |
HackerOne 426 bytes |
HAML 922 bytes |
Heroku 435 bytes |
Homekit 732 bytes |
HP 471 bytes |
HTML5 397 bytes |
Hulu 459 bytes |
Humble Bundle 952 bytes |
i18next 713 bytes |
IBM 477 bytes |
iHeartRadio 817 bytes |
IMDb 506 bytes |
Imgur 263 bytes |
Instagram 752 bytes |
Intel 553 bytes |
Intercom 414 bytes |
Internet Archive 800 bytes |
itch.io 852 bytes |
iTunes 744 bytes |
Jacobin 226 bytes |
Java 779 bytes |
JavaScript 404 bytes |
Jellyfin 655 bytes |
jQuery 1006 bytes |
JSON-LD 890 bytes |
JSON 508 bytes |
JSON Feed 665 bytes |
JSR 411 bytes |
Julia 283 bytes |
JustGiving 351 bytes |
Kaggle 297 bytes |
KeePassDX 516 bytes |
Kemal Framework 325 bytes |
Keskonfai 679 bytes |
Keybase 632 bytes |
Kickstarter 273 bytes |
Ko-Fi 397 bytes |
Kodi 752 bytes |
Kotlin 236 bytes |
Laravel 384 bytes |
LastPass 281 bytes |
LeetCode Logo 829 bytes |
Liberapay 544 bytes |
LibreSpeed 942 bytes |
LINE 454 bytes |
Linear 390 bytes |
LinkedIn 355 bytes |
Linux 950 bytes |
Linux Mint 355 bytes |
Lobste.rs 504 bytes |
Lock 377 bytes |
Logitech 352 bytes |
Lucky Framework 471 bytes |
macOS 754 bytes |
Mail 551 bytes |
Mailchimp 981 bytes |
Malt 412 bytes |
Manjaro 222 bytes |
Markdown 418 bytes |
mastercard 322 bytes |
Mastodon 574 bytes |
matrix 641 bytes |
Mattermost 291 bytes |
McDonald's 434 bytes |
Medium 225 bytes |
Meetup 502 bytes |
Messenger 679 bytes |
microformats 783 bytes |
Microsoft 321 bytes |
Minecraft 1002 bytes |
MongoDB 353 bytes |
MySQL 1007 bytes |
NetBeans 521 bytes |
NetBSD 419 bytes |
Netflix 435 bytes |
NextCloud 250 bytes |
NGINX 450 bytes |
NHS 474 bytes |
NixOS 528 bytes |
Node.js 651 bytes |
npm 277 bytes |
OK.ru 348 bytes |
Olympic Rings 661 bytes |
OnlyFans 401 bytes |
OpenBenches 613 bytes |
Open Bug Bounty 487 bytes |
Opencast 294 bytes |
Open Collective 304 bytes |
OpenCores 265 bytes |
Open Source 278 bytes |
OpenStreetMap 951 bytes |
OpenVPN 278 bytes |
Opera 293 bytes |
Orcid 311 bytes |
Origin 630 bytes |
Outlook 876 bytes |
Overcast 760 bytes |
Overleaf 437 bytes |
Patreon 205 bytes |
PayPal 495 bytes |
PDF 650 bytes |
PeerTube 278 bytes |
Phone 574 bytes |
PHP 573 bytes |
Pinboard 241 bytes |
Pinterest 508 bytes |
Pixelfed 971 bytes |
PlayStation 703 bytes |
Plex 205 bytes |
Pocket 293 bytes |
Pocket Casts 263 bytes |
Pop!_OS 427 bytes |
Pornhub 811 bytes |
Postman 730 bytes |
PowerShell 992 bytes |
Preact 333 bytes |
Printer 272 bytes |
Proton Mail 628 bytes |
Python 544 bytes |
QQ 924 bytes |
quora 264 bytes |
Raspberry Pi 954 bytes |
React 339 bytes |
Reddit 592 bytes |
RedHat 534 bytes |
Research Gate 866 bytes |
Rockstar Games 838 bytes |
Roundcube 514 bytes |
RSS 276 bytes |
Ruby 941 bytes |
Ruby Gems 271 bytes |
Ruby On Rails 447 bytes |
Rust 985 bytes |
Safari 685 bytes |
Samsung 830 bytes |
Samsung Internet 312 bytes |
Samsung 602 bytes |
Samsung 867 bytes |
Sass 501 bytes |
Semaphore CI 446 bytes |
Sentry 359 bytes |
Signal 423 bytes |
Sketch 353 bytes |
Skype 468 bytes |
Slack 384 bytes |
SlideShare 646 bytes |
Snapchat 633 bytes |
SOGo 824 bytes |
Solidity 548 bytes |
SoundCloud 944 bytes |
Spotify 418 bytes |
Square Cash 775 bytes |
Stack Exchange 385 bytes |
Stack Overflow 286 bytes |
Steam 440 bytes |
Stitcher 372 bytes |
Strava 269 bytes |
StumbleUpon 343 bytes |
Sublime Merge 551 bytes |
Sublime Text 589 bytes |
SubscribeStar 584 bytes |
Svelte 470 bytes |
SVG 746 bytes |
Swift 659 bytes |
Symantec 596 bytes |
Symfony 609 bytes |
taiga.io 731 bytes |
tailwindCss 536 bytes |
TATA 1009 bytes |
Teamspeak 921 bytes |
Telegram 476 bytes |
Terraform 284 bytes |
This American Life 277 bytes |
Threads 365 bytes |
Threema 381 bytes |
TikTok 388 bytes |
Todoist 737 bytes |
Tox 479 bytes |
Trello 261 bytes |
TripAdvisor 691 bytes |
Tumblr 251 bytes |
TuneIn 570 bytes |
Tutanota 522 bytes |
Twilio 311 bytes |
Twitch 271 bytes |
Twitter 352 bytes |
TypeScript 603 bytes |
Uber 588 bytes |
Ubiquiti 540 bytes |
Ubisoft 504 bytes |
Ubuntu 438 bytes |
Udemy 289 bytes |
Unicode 360 bytes |
Untappd 395 bytes |
Uphold 800 bytes |
Uplay 517 bytes |
Upwork 484 bytes |
Vagrant 537 bytes |
Vegetarian 668 bytes |
Venmo 271 bytes |
Viber 692 bytes |
Vim 754 bytes |
Vimeo 332 bytes |
visa 623 bytes |
Visual Studio Code 895 bytes |
Vivino 279 bytes |
VK 519 bytes |
VLC 636 bytes |
Vue 257 bytes |
W3C 523 bytes |
Wayland 905 bytes |
WebAssembly 475 bytes |
WebMention 261 bytes |
WebToons 973 bytes |
WeChat 606 bytes |
Wekan 966 bytes |
WhatsApp 435 bytes |
WHATWG 313 bytes |
WiFi 562 bytes |
Wikipedia 563 bytes |
Windows 226 bytes |
Wire 256 bytes |
WireGuard 948 bytes |
WordPress 488 bytes |
Workato 362 bytes |
X 287 bytes |
X11 756 bytes |
XING 347 bytes |
XMPP 726 bytes |
Yahoo! 280 bytes |
Yammer 464 bytes |
Yarn 497 bytes |
Yelp 448 bytes |
Yii 763 bytes |
YouTube 333 bytes |
Yubico 250 bytes |
Zoom 515 bytes |
Zorinos 254 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.
#FF0000becomesred. - 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 treearia-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.
- 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.
- Social Media Icons by Aha-Soft - CC-BY
- Phone Icon - Free
- Lock Icon - MIT
- Wire Logo - Public Domain
- Signal Logo - GPLv3
- RSS Icon - MPL 1.1
- PDF Icon - Free
- Google+ - Public Domain
- Mastodon - AGPLv3
- GitLab
- HTML5 Shield - CC-BY
- npm Logo - CC-BY
- Docker Logo - Apache
- Steam
- Symantec
- Yubico - BSD
- Keybase - BSD
- eBay
- Kickstarter
- Bitcoin - CC0
- Bluetooth
- Blogger
- Medium
- Ghost
- Tumblr
- Intel
- Badoo
- YouTube
- Google Play
- Gmail
- Samsung Internet
- Plex - GPLv2
- NHS
- Threema.
- CoreUI - CC-BY
- NixOS - CC-BY
- Yii PHP Framework - CC BY-ND 3.0
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.
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
Official open source SVG icon library for Bootstrap.
Simply beautiful open-source icons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot