diff --git a/README.md b/README.md index 73ec509e..d764071b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Super Tiny Social Icons -Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is *under* 465 bytes! + +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. @@ -9,13 +10,14 @@ Say thanks! ## How Small? -| 542 Bytes SVG | 1,309 Bytes PNG | 433 Bytes SVG | 1,246 Bytes PNG | 250 Bytes SVG | 1,243 Bytes PNG | -|------ |----------- |------ |---------- |------ |----------- | -| | | | | | | +| 542 Bytes SVG | 1,309 Bytes PNG | 433 Bytes SVG | 1,246 Bytes PNG | 250 Bytes SVG | 1,243 Bytes PNG | +| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| | | | | | | ## What's Available so far? ### Social Media + @@ -36,6 +38,7 @@ Say thanks!
flickr

250 Bytes
### Media + @@ -48,6 +51,7 @@ Say thanks!
SoundCloud

959 Bytes
### Google + @@ -60,6 +64,7 @@ Say thanks!
Google

484 Bytes
### Communications + @@ -78,6 +83,7 @@ Say thanks!
WhatsApp

589 Bytes
### Websites + @@ -160,6 +166,7 @@ Say thanks!
Hacker News

229 Bytes
### Internet + @@ -175,6 +182,7 @@ Say thanks!
RSS

309 Bytes
### Browsers + @@ -182,11 +190,12 @@ Say thanks! - +
Chrome

378 Bytes
Samsung Internet

384 Bytes
Edge

646 Bytes
Opera

722 Bytes
Safari

747 Bytes
Safari

699 Bytes
### Podcasts + @@ -199,6 +208,7 @@ Say thanks!
iTunes

786 Bytes
### Logos + @@ -219,6 +229,7 @@ Say thanks!
Apple

417 Bytes
### Security + @@ -236,6 +247,7 @@ Say thanks!
Tox

494 Bytes
### Payments + @@ -254,6 +266,7 @@ Say thanks!
PayPal

548 Bytes
### Programming + @@ -281,6 +294,7 @@ Say thanks!
Python

552 Bytes
### Misc + @@ -299,37 +313,35 @@ Say thanks!
Calendar

959 Bytes
- - ## Why so smallious? -Bytes cost money. They cost money to store, transport, and process. Simplicity should be our goal in all endeavours. +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, then were minified using [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. -* 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. +- 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. +- 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! +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! +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! **New!** Icons also available in [Android Vector Drawables](https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html) so you can easily use them in Android apps. Converted using https://inloop.github.io/svg2android/ - not guaranteed to be under 1KB. ## Submitting Icons -I'd *love* you to submit something 😸 The rules are simple, your icon must: +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. +- 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 @@ -351,10 +363,11 @@ At a minimum, your icon needs these components: ### 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. +- `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/). @@ -364,9 +377,9 @@ This is the standard guideline. Use this to help with sizing your icons and they 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. +- **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 @@ -379,20 +392,19 @@ npm install --save super-tiny-icons The old-school way: ```html - + ``` The modern way, the React (JSX) example: ```jsx -import logo from 'super-tiny-icons/images/svg/github.svg'; +import logo from "super-tiny-icons/images/svg/github.svg"; - +; ``` The demo repository bootstrapped with `create-react-app`: [create-react-app-super-tiny-icons](https://github.com/limonte/create-react-app-super-tiny-icons) - ## Contributors ### Code Contributors @@ -427,44 +439,44 @@ Support this project with your organization. Your logo will show up here with a 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) -* [Yahoo!](https://commons.wikimedia.org/wiki/File:Yahoo!_logo.svg) -* [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/) +- [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) +- [Yahoo!](https://commons.wikimedia.org/wiki/File:Yahoo!_logo.svg) +- [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/) From [SVGporn](https://github.com/gilbarbara/logos/) - 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. +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. diff --git a/images/svg/safari.svg b/images/svg/safari.svg index c72b195f..e88b37fd 100644 --- a/images/svg/safari.svg +++ b/images/svg/safari.svg @@ -3,4 +3,4 @@ aria-label="Safari" role="img" viewBox="0 0 512 512"> +fill="#fff"/>