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
+
flickr 250 Bytes
@@ -36,6 +38,7 @@ Say thanks!
### Media
+
SoundCloud 959 Bytes
@@ -48,6 +51,7 @@ Say thanks!
### Google
+
Google 484 Bytes
@@ -60,6 +64,7 @@ Say thanks!
### Communications
+
WhatsApp 589 Bytes
@@ -78,6 +83,7 @@ Say thanks!
### Websites
+
Hacker News 229 Bytes
@@ -160,6 +166,7 @@ Say thanks!
### Internet
+
RSS 309 Bytes
@@ -175,6 +182,7 @@ Say thanks!
### Browsers
+
Chrome 378 Bytes
@@ -182,11 +190,12 @@ Say thanks!
Samsung Internet 384 Bytes
Edge 646 Bytes
Opera 722 Bytes
-Safari 747 Bytes
+Safari 699 Bytes
### Podcasts
+
iTunes 786 Bytes
@@ -199,6 +208,7 @@ Say thanks!
### Logos
+
Apple 417 Bytes
@@ -219,6 +229,7 @@ Say thanks!
### Security
+
Tox 494 Bytes
@@ -236,6 +247,7 @@ Say thanks!
### Payments
+
PayPal 548 Bytes
@@ -254,6 +266,7 @@ Say thanks!
### Programming
+
Python 552 Bytes
@@ -281,6 +294,7 @@ Say thanks!
### Misc
+
Calendar 959 Bytes
@@ -299,37 +313,35 @@ Say thanks!
-
-
## 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
-* **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"/>