diff --git a/README.md b/README.md index e69de29b..1c3b3dc8 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,765 @@ +# Super Tiny Icons + +Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. There are currently 371 icons and the average size is _under_ 515 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](https://www.ko-fi.com/img/donate_sm.png)](https://ko-fi.com/edent) + +## 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

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

283 bytes
JustGiving

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

574 bytes
matrix

641 bytes		Mattermost

291 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

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

205 bytes		Pocket

293 bytes		Pocket Casts

263 bytes		Pop!_OS

427 bytes
Pornhub

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

249 bytes		Venmo

271 bytes
Viber

692 bytes		Vim

754 bytes		Vimeo

332 bytes		Visual Studio Code

895 bytes		Vivino

279 bytes		VK

519 bytes
VLC

636 bytes		Vue

257 bytes		W3C

523 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

261 bytes		XING

347 bytes		XMPP

726 bytes		Yahoo!

280 bytes		Yammer

464 bytes		Yarn

497 bytes
Yelp

448 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](https://yqnn.github.io/svg-path-editor/), [svgo](https://github.com/svg/svgo), and [svgcleaner](https://github.com/RazrFalcon/svgcleaner). Further smallification may be possible. Try it! + +- Each of these has an `xmlns="http://www.w3.org/2000/svg"` in the `` 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](https://github.com/edent/SuperTinyIcons/blob/master/images/reference/index.md). If they still look wrong, tell me by raising an issue! + +## Android Vector Drawables + +Icons also available as [Android Vector Drawables](https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html), 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 + ... +``` + +### Icon accessibility + +The super tiny icons are accessible by default. Each icon has: + +- `role="img"`, to expose the `` 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 `` as the `src` for an `` element, the `alt` attribute should still be used on the `` element because the ARIA is not recognised in this context. + +CSS-Tricks has also an [article about accessible SVG icons](https://css-tricks.com/accessible-svgs/). + +### 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 + +```sh +npm install --save super-tiny-icons +``` + +## Usage + +The old-school way: + +```html + +``` + +The modern way, the React (JSX) example: + +```jsx +import logo from "super-tiny-icons/images/svg/github.svg"; + +; +``` + +[CSS](https://developer.mozilla.org/docs/Web/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: + +```html + + + + + +``` + +## Contributors + +### Code Contributors + +This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. + + +### Financial Contributors + +Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/SuperTinyIcons/contribute)] + +#### Individuals + + + +#### Organizations + +Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/SuperTinyIcons/contribute)] + + + + + + + + + + + + +## Licenses + +The majority of these vector logos are based on someone else's work. + +- [Social Media Icons by Aha-Soft](https://www.iconfinder.com/iconsets/social-flat-rounded-rects) - CC-BY +- [Phone Icon](https://www.iconfinder.com/icons/1807538/phone_icon#size=128) - Free +- [Lock Icon](https://www.iconfinder.com/icons/1814107/lock_padlock_secure_icon#size=512) - MIT +- [Wire Logo](https://commons.wikimedia.org/wiki/File:Wire_software_logo.svg) - Public Domain +- [Signal Logo](https://github.com/WhisperSystems/Signal-iOS/blob/master/Signal/Images.xcassets/logoSignal.imageset/logoSignal.pdf) - GPLv3 +- [RSS Icon](https://commons.wikimedia.org/wiki/File:Generic_Feed-icon.svg) - MPL 1.1 +- [PDF Icon](https://www.iconfinder.com/iconsets/line-icons-set) - Free +- [Google+](https://commons.wikimedia.org/wiki/File:Google_Plus_logo_2015.svg) - Public Domain +- [Google](http://svgshare.com/s/q) +- [Mastodon](https://github.com/tootsuite/mastodon/blob/0ad694f96b7f0e951950e7525bde52cd11454cb2/app/assets/images/logo.svg) - AGPLv3 +- [GitLab](https://about.gitlab.com/press/) +- [HTML5 Shield](https://www.w3.org/html/logo/) - CC-BY +- [npm Logo](https://commons.wikimedia.org/wiki/File:Npm-logo.svg) - CC-BY +- [Docker Logo](https://github.com/docker/docker.github.io/blob/master/LICENSE) - Apache +- [Steam](https://commons.wikimedia.org/wiki/File:Steam_icon_logo.svg) +- [Symantec](https://commons.wikimedia.org/wiki/File:Symantec_logo10.svg) +- [Yubico](https://github.com/Yubico/yubikey-manager-qt/blob/master/resources/icons/ykman.png) - BSD +- [Keybase](https://github.com/keybase/client/blob/master/shared/images/iconfont/kb-iconfont-keybase-16.svg) - BSD +- [eBay](https://commons.wikimedia.org/wiki/File:EBay_logo.svg) +- [Kickstarter](https://www.kickstarter.com/help/brand_assets) +- [Bitcoin](https://commons.wikimedia.org/wiki/File:Bitcoin_logo.svg) - CC0 +- [Bluetooth](https://commons.wikimedia.org/wiki/File:Bluetooth.svg) +- [Blogger](https://commons.wikimedia.org/wiki/File:Blogger_icon.svg) +- [Medium](https://medium.design/logos-and-brand-guidelines-f1a01a733592) +- [Ghost](https://commons.wikimedia.org/wiki/File:Ghost-Logo.svg) +- [Tumblr](https://www.tumblr.com/logo) +- [Intel](https://commons.wikimedia.org/wiki/File:Intel-logo.svg) +- [Badoo](https://team.badoo.com/new/) +- [YouTube](https://www.youtube.com/yt/about/brand-resources/#logos-icons-colors) +- [Google Play](https://commons.wikimedia.org/wiki/File:Google_Play_symbol_2016.svg) +- [Gmail](https://commons.wikimedia.org/wiki/File:Gmail_Icon.svg) +- [Samsung Internet](https://github.com/edent/SuperTinyIcons/pull/74/commits/8824bdaf1346a472ab425347f958e8e64c0948ee) +- [Plex](https://github.com/plexinc/plex-media-player/blob/master/resources/images/icon.svg) - GPLv2 +- [NHS](https://www.england.nhs.uk/nhsidentity/identity-guidelines/nhs-logo/) +- [Threema.](https://threema.ch/de/press) +- [CoreUI](https://github.com/coreui/coreui-icons) - CC-BY +- [NixOS](https://github.com/NixOS/nixos-artwork) - CC-BY + +From [SVGporn](https://github.com/gilbarbara/logos/) - 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.