edent/SuperTinyIcons
1
0
Fork 1
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'edent/master'

Browse Source 
# Conflicts:
#	README.md
This commit is contained in:
arturoacevedob
2017-12-03 23:12:27 -06:00
parent 95c665f1aa 2aa7f361fa
commit 6ae6adcdb5
13 changed files with 199 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -1,4 +0,0 @@
images/svg/guidelines.svg
images/svg/guidelines for small sizes.svg

163
README.md
View File

@@ -3,8 +3,6 @@ Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourit
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.
You can [play around with the corner radius size using our interactive tool](https://edent.github.io/SuperTinyIcons/radius.html)
Originally created for my contact page - [https://edent.tel/](https://edent.tel/)
## How Small?
@@ -17,70 +15,71 @@ Originally created for my contact page - [https://edent.tel/](https://edent.tel/
<table>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/hackernews.svg" width="125" title="Hacker News" /><br>230 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/flickr.svg" width="125" title="flickr" /><br>252 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/facebook.svg" width="125" title="Facebook" /><br>270 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/tumblr.svg" width="125" title="tumblr" /><br>451 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/twitter.svg" width="125" title="Twitter" /><br>438 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/whatsapp.svg" width="125" title="WhatsApp" /><br>630 Bytes</td>
<td><img src="images/svg/hackernews.svg" width="125" title="Hacker News" /><br>230 Bytes</td>
<td><img src="images/svg/flickr.svg" width="125" title="flickr" /><br>252 Bytes</td>
<td><img src="images/svg/facebook.svg" width="125" title="Facebook" /><br>270 Bytes</td>
<td><img src="images/svg/tumblr.svg" width="125" title="tumblr" /><br>451 Bytes</td>
<td><img src="images/svg/twitter.svg" width="125" title="Twitter" /><br>438 Bytes</td>
<td><img src="images/svg/whatsapp.svg" width="125" title="WhatsApp" /><br>630 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/dropbox.svg" width="125" title="Dropbox" /><br>326 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/telegram.svg" width="125" title="Telegram" /><br>354 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/linkedin.svg" width="125" title="LinkedIn" /><br>372 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/stackoverflow.svg" width="125" title="StackOverflow" /><br>370 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/instagram.svg" width="125" title="Instagram" /><br>316 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/wordpress.svg" width="125" title="WordPress" /><br>544 Bytes</td>
<td><img src="images/svg/dropbox.svg" width="125" title="Dropbox" /><br>326 Bytes</td>
<td><img src="images/svg/telegram.svg" width="125" title="Telegram" /><br>354 Bytes</td>
<td><img src="images/svg/linkedin.svg" width="125" title="LinkedIn" /><br>372 Bytes</td>
<td><img src="images/svg/stackoverflow.svg" width="125" title="StackOverflow" /><br>370 Bytes</td>
<td><img src="images/svg/instagram.svg" width="125" title="Instagram" /><br>316 Bytes</td>
<td><img src="images/svg/wordpress.svg" width="125" title="WordPress" /><br>544 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/skype.svg" width="125" title="Skype" /><br>492 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/reddit.svg" width="125" title="Reddit" /><br>529 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/pinterest.svg" width="125" title="Pinterest" /><br>532 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/paypal.svg" width="125" title="PayPal" /><br>583 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/github.svg" width="125" title="GitHub" /><br>747 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/wikipedia.svg" width="125" title="Wikipedia" /><br>608 Bytes</td>
<td><img src="images/svg/skype.svg" width="125" title="Skype" /><br>492 Bytes</td>
<td><img src="images/svg/reddit.svg" width="125" title="Reddit" /><br>529 Bytes</td>
<td><img src="images/svg/pinterest.svg" width="125" title="Pinterest" /><br>532 Bytes</td>
<td><img src="images/svg/paypal.svg" width="125" title="PayPal" /><br>583 Bytes</td>
<td><img src="images/svg/github.svg" width="125" title="GitHub" /><br>747 Bytes</td>
<td><img src="images/svg/wikipedia.svg" width="125" title="Wikipedia" /><br>608 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/vimeo.svg" width="125" title="Vimeo" /><br>375 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/slideshare.svg" width="125" title="SlideShare" /><br>635 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/soundcloud.svg" width="125" title="SoundCloud" /><br>964 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/spotify.svg" width="125" title="Spotify" /><br>436 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/snapchat.svg" width="125" title="SnapChat" /><br>619 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/amazon.svg" width="125" title="Amazon" /><br>674 Bytes</td>
<td><img src="images/svg/vimeo.svg" width="125" title="Vimeo" /><br>375 Bytes</td>
<td><img src="images/svg/slideshare.svg" width="125" title="SlideShare" /><br>635 Bytes</td>
<td><img src="images/svg/soundcloud.svg" width="125" title="SoundCloud" /><br>964 Bytes</td>
<td><img src="images/svg/spotify.svg" width="125" title="Spotify" /><br>436 Bytes</td>
<td><img src="images/svg/snapchat.svg" width="125" title="SnapChat" /><br>619 Bytes</td>
<td><img src="images/svg/amazon.svg" width="125" title="Amazon" /><br>674 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/steam.svg" width="125" title="Steam" /><br>859 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/google.svg" width="125" title="Google" /><br>802 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/google_plus.svg" width="125" title="Google Plus" /><br>374 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/wechat.svg" width="125" title="WeChat" /><br>765 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/youtube.svg" width="125" title="YouTube" /><br>423 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/pdf.svg" width="125" title="PDF" /><br>383 Bytes</td>
<td><img src="images/svg/steam.svg" width="125" title="Steam" /><br>859 Bytes</td>
<td><img src="images/svg/google.svg" width="125" title="Google" /><br>802 Bytes</td>
<td><img src="images/svg/google_plus.svg" width="125" title="Google Plus" /><br>374 Bytes</td>
<td><img src="images/svg/wechat.svg" width="125" title="WeChat" /><br>765 Bytes</td>
<td><img src="images/svg/youtube.svg" width="125" title="YouTube" /><br>423 Bytes</td>
<td><img src="images/svg/pdf.svg" width="125" title="PDF" /><br>383 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/vk.svg" width="125" title="VK" /><br>597 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/rss.svg" width="125" title="RSS" /><br>305 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/mail.svg" width="125" title="mail" /><br>573 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/email.svg" width="125" title="email" /><br>379 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/mastodon.svg" width="125" title="Mastodon" /><br>664 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/wire.svg" width="125" title="Wire" /><br>286 Bytes</td>
<td><img src="images/svg/vk.svg" width="125" title="VK" /><br>597 Bytes</td>
<td><img src="images/svg/rss.svg" width="125" title="RSS" /><br>305 Bytes</td>
<td><img src="images/svg/mail.svg" width="125" title="mail" /><br>573 Bytes</td>
<td><img src="images/svg/email.svg" width="125" title="email" /><br>379 Bytes</td>
<td><img src="images/svg/mastodon.svg" width="125" title="Mastodon" /><br>664 Bytes</td>
<td><img src="images/svg/wire.svg" width="125" title="Wire" /><br>286 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/tox.svg" width="125" title="Tox" /><br>493 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/gitlab.svg" width="125" title="GitLab" /><br>288 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/phone.svg" width="125" title="Phone" /><br>632 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/lock.svg" width="125" title="Lock" /><br>405 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/html5.svg" width="125" title="HTML5" /><br>399 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/meetup.svg" width="125" title="Meetup" /><br>634 Bytes</td>
<td><img src="images/svg/tox.svg" width="125" title="Tox" /><br>493 Bytes</td>
<td><img src="images/svg/gitlab.svg" width="125" title="GitLab" /><br>288 Bytes</td>
<td><img src="images/svg/phone.svg" width="125" title="Phone" /><br>632 Bytes</td>
<td><img src="images/svg/lock.svg" width="125" title="Lock" /><br>405 Bytes</td>
<td><img src="images/svg/html5.svg" width="125" title="HTML5" /><br>399 Bytes</td>
<td><img src="images/svg/meetup.svg" width="125" title="Meetup" /><br>634 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/line.svg" width="125" title="Line" /><br>479 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/lastpass.svg" width="125" title="LastPass" /><br>325 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/windows.svg" width="125" title="Microsoft Windows" /><br>269 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/digidentity.svg" width="125" title="Digidentity" /><br>393 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/ubuntu.svg" width="125" title="Ubuntu" /><br>634 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/bitbucket.svg" width="125" title="Atlassian BitBucket" /><br>658 Bytes</td>
<td><img src="images/svg/line.svg" width="125" title="Line" /><br>479 Bytes</td>
<td><img src="images/svg/lastpass.svg" width="125" title="LastPass" /><br>325 Bytes</td>
<td><img src="images/svg/windows.svg" width="125" title="Microsoft Windows" /><br>269 Bytes</td>
<td><img src="images/svg/digidentity.svg" width="125" title="Digidentity" /><br>393 Bytes</td>
<td><img src="images/svg/ubuntu.svg" width="125" title="Ubuntu" /><br>634 Bytes</td>
<td><img src="images/svg/bitbucket.svg" width="125" title="Atlassian BitBucket" /><br>658 Bytes</td>
</tr>
<tr>
<<<<<<< HEAD
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/apple.svg" width="125" title="Apple" /><br>503 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/npm.svg" width="125" title="NPM" /><br>375 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/docker.svg" width="125" title="Docker" /><br>526 Bytes</td>
@@ -111,23 +110,67 @@ Originally created for my contact page - [https://edent.tel/](https://edent.tel/
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/medium.svg" width="125" title="Medium" /><br>379 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/airbnb.svg" width="125" title="AirBnB" /><br>572 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/wifi.svg" width="125" title="Wi-Fi" /><br>648 Bytes</td>
=======
<td><img src="images/svg/apple.svg" width="125" title="Apple" /><br>503 Bytes</td>
<td><img src="images/svg/npm.svg" width="125" title="NPM" /><br>375 Bytes</td>
<td><img src="images/svg/docker.svg" width="125" title="Docker" /><br>526 Bytes</td>
<td><img src="images/svg/symantec.svg" width="125" title="Symantec" /><br>966 Bytes</td>
<td><img src="images/svg/yubico.svg" width="125" title="Yubico" /><br>313 Bytes</td>
<td><img src="images/svg/keybase.svg" width="125" title="Keybase" /><br>1010 Bytes</td>
</tr>
<tr>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/delicious.svg" width="125" title="delicious" /><br>270 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/disqus.svg" width="125" title="Disqus" /><br>398 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/ghost.svg" width="125" title="Ghost" /><br>273 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/opensource.svg" width="125" title="Open Source" /><br>256 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/patreon.svg" width="125" title="Patreon" /><br>324 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/trello.svg" width="125" title="Trello" /><br>276 Bytes</td>
<td><img src="images/svg/ebay.svg" width="125" title="eBay" /><br>830 Bytes</td>
<td><img src="images/svg/evernote.svg" width="125" title="Evernote" /><br>799 Bytes</td>
<td><img src="images/svg/kickstarter.svg" width="125" title="Kickstarter" /><br>308 Bytes</td>
<td><img src="images/svg/yahoo.svg" width="125" title="Yahoo!" /><br>575 Bytes</td>
<td><img src="images/svg/bitcoin.svg" width="125" title="BitCoin" /><br>529 Bytes</td>
<td><img src="images/svg/bluetooth.svg" width="125" title="bluetooth" /><br>255 Bytes</td>
</tr>
<tr>
<td><img src="images/svg/ibm.svg" width="125" title="IBM" /><br>937 Bytes</td>
<td><img src="images/svg/yammer.svg" width="125" title="Yammer" /><br>946 Bytes</td>
<td><img src="images/svg/android.svg" width="125" title="Android" /><br>557 Bytes</td>
<td><img src="images/svg/authy.svg" width="125" title="Authy" /><br>402 Bytes</td>
<td><img src="images/svg/blogger.svg" width="125" title="Blogger" /><br>507 Bytes</td>
<td><img src="images/svg/cloudflare.svg" width="125" title="CloudFlare" /><br>569 Bytes</td>
</tr>
<tr>
<td><img src="images/svg/codepen.svg" width="125" title="CodePen" /><br>638 Bytes</td>
<td><img src="images/svg/digitalocean.svg" width="125" title="Digital Ocean" /><br>267 Bytes</td>
<td><img src="images/svg/discord.svg" width="125" title="Discord" /><br>691 Bytes</td>
<td><img src="images/svg/medium.svg" width="125" title="Medium" /><br>379 Bytes</td>
<td><img src="images/svg/airbnb.svg" width="125" title="AirBnB" /><br>572 Bytes</td>
<td><img src="images/svg/wifi.svg" width="125" title="Wi-Fi" /><br>648 Bytes</td>
>>>>>>> edent/master
</tr>
<tr>
<td><img src="images/svg/delicious.svg" width="125" title="delicious" /><br>270 Bytes</td>
<td><img src="images/svg/disqus.svg" width="125" title="Disqus" /><br>398 Bytes</td>
<td><img src="images/svg/ghost.svg" width="125" title="Ghost" /><br>273 Bytes</td>
<td><img src="images/svg/opensource.svg" width="125" title="Open Source" /><br>256 Bytes</td>
<td><img src="images/svg/patreon.svg" width="125" title="Patreon" /><br>251 Bytes</td>
<td><img src="images/svg/trello.svg" width="125" title="Trello" /><br>276 Bytes</td>
</tr>
<tr>
<<<<<<< HEAD
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/intel.svg" width="125" title="intel" /><br>983 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/badoo.svg" width="125" title="Badoo" /><br>286 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/samsunginternet.svg" width="125" title="Samsung Internet" /><br>943 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/laravel.svg" width="125" title="Laravel" /><br>879 Bytes</td>
<td><img src="https://edent.github.io/SuperTinyIcons/images/svg/twilio.svg" width="125" title="Twilio" /><br>395 Bytes</td>
<td></td>
=======
<td><img src="images/svg/intel.svg" width="125" title="intel" /><br>983 Bytes</td>
<td><img src="images/svg/badoo.svg" width="125" title="Badoo" /><br>286 Bytes</td>
<td><img src="images/svg/samsunginternet.svg" width="125" title="Samsung Internet" /><br>943 Bytes</td>
<td><img src="images/svg/laravel.svg" width="125" title="Laravel" /><br>879 Bytes</td>
<td><img src="images/svg/google_play.svg" width="125" title="Google Play" /><br>509 Bytes</td>
<td><img src="images/svg/gmail.svg" width="125" title="Gmail" /><br>745 Bytes</td>
>>>>>>> edent/master
</tr>
<tr>
<td><img src="images/svg/twilio.svg" width="125" title="Twilio" /><br>395 Bytes</td>
<tr>
</table>
## Why so smallious?
@@ -136,7 +179,7 @@ Bytes cost money. They cost money to store, transport, and process. Simplicity
## Scream if you want to go smaller
These files 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!
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 `<svg>` 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.
@@ -171,7 +214,7 @@ I'd *love* you to submit something 😸 The rules are simple, your icon must:
### Guidelines
This is the standard guideline. Use this to help with sizing yout icons and they will look good no matter what border radius is chosen.
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.
<img src="https://edent.github.io/SuperTinyIcons/images/guidelines/guideline.svg" width="256" alt="A template for logos" />
@@ -179,6 +222,8 @@ This is the standard guideline. Use this to help with sizing yout icons and they
* **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.
To see how the logos look, you can [play around with the corner radius size using our interactive tool](https://edent.github.io/SuperTinyIcons/radius.html)
## Licenses
The majority of these vector logos are based on someone else's work.
@@ -213,6 +258,8 @@ The majority of these vector logos are based on someone else's work.
* [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)
From [SVGporn](https://github.com/gilbarbara/logos/) - CC0

28
images/reference/gmail.svg Normal file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 64 64" overflow="scroll" xml:space="preserve">
<path fill="#EAEAEA" d="M53,50H11c-1.657,0-3-1.343-3-3V17c0-1.657,1.343-3,3-3h42c1.657,0,3,1.343,3,3v30
C56,48.657,54.657,50,53,50z"/>
<path fill="#D54C3F" d="M14,50h-3c-1.657,0-3-1.343-3-3V17c0-1.657,1.343-3,3-3h0c1.657,0,3,1.343,3,3V50z"/>
<path fill="#B63524" d="M50,50h3c1.657,0,3-1.343,3-3V17c0-1.657-1.343-3-3-3h0c-1.657,0-3,1.343-3,3V50z"/>
<path fill="#DE5145" d="M54.718,19.46C55.493,18.917,56,18.018,56,17c0-1.657-1.343-3-3-3c-0.639,0-1.232,0.2-1.718,0.54
c0,0-19.28,14.037-19.28,14.037L32,28.578l-0.002-0.001L12.718,14.54C12.232,14.2,11.639,14,11,14c-1.657,0-3,1.343-3,3
c0,1.018,0.507,1.917,1.282,2.46l-0.08-0.059L32,36"/>
<line fill="#DE5145" x1="54.799" y1="19.401" x2="32" y2="36"/>
<path fill="#EFEFEF" d="M53,14c-0.639,0-1.232,0.2-1.718,0.54c0,0-19.28,14.037-19.28,14.037L32,28.578l-0.002-0.001L12.718,14.54
C12.232,14.2,11.639,14,11,14L53,14z"/>
<path fill="#C64132" d="M14.001,24.188L8.945,19.18l-0.002,0.004c0.106,0.1,0.219,0.192,0.339,0.276l-0.08-0.059l4.8,3.495
l-0.001,1.328"/>
<polyline fill="#E3E3E3" points="28.668,38.591 14,50 14.001,24.063 28.665,38.587 "/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.0005" y1="30.7436" x2="32" y2="30.7436">
<stop offset="0" style="stop-color:#C8C8C8"/>
<stop offset="1" style="stop-color:#CDCDCD"/>
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="28.668,38.591 32,36 14.001,22.896 14.001,24.063 28.665,38.587 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="28.6645" y1="36.4474" x2="50" y2="36.4474">
<stop offset="0" style="stop-color:#D9D9D9"/>
<stop offset="1" style="stop-color:#E2E2E2"/>
</linearGradient>
<polygon fill="url(#SVGID_2_)" points="40.061,50 50,50 50,22.895 32,36 28.665,38.587 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

35
images/reference/google_play.svg Normal file
View File

@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_2" x="0px" y="0px" width="120.92399" height="129.16048" viewBox="0 0 120.92399 129.16047" enable-background="new 0 0 841.89 595.28" xml:space="preserve" inkscape:version="0.48.5 r10040" sodipodi:docname="Google Play symbol 2012-2016.svg"><metadata id="metadata55"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs id="defs53"><linearGradient inkscape:collect="always" xlink:href="#linearGradient4501" id="linearGradient4507" x1="-4561.0913" y1="2932.0034" x2="-4561.0913" y2="3070.1477" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.8017479,0,0,1.8017479,3716.8332,-2503.325)" /><linearGradient id="linearGradient4501"><stop style="stop-color:#196eef;stop-opacity:1" offset="0" id="stop4503" /><stop id="stop4509" offset="0.5" style="stop-color:#186dee;stop-opacity:1" /><stop style="stop-color:#1065e7;stop-opacity:1" offset="1" id="stop4505" /></linearGradient><linearGradient id="linearGradient4511"><stop style="stop-color:#de5744;stop-opacity:1" offset="0" id="stop4513" /><stop id="stop4523" offset="0.5" style="stop-color:#db4632;stop-opacity:1" /><stop style="stop-color:#d13d29;stop-opacity:1" offset="1" id="stop4515" /></linearGradient><linearGradient id="linearGradient4535"><stop style="stop-color:#1a6fef;stop-opacity:1" offset="0" id="stop4537" /><stop id="stop4547" offset="0.25" style="stop-color:#1e72ef;stop-opacity:1" /><stop id="stop4545" offset="0.5" style="stop-color:#166bec;stop-opacity:1" /><stop id="stop4543" offset="0.75" style="stop-color:#1267e9;stop-opacity:1" /><stop style="stop-color:#1063e5;stop-opacity:0.87450981" offset="1" id="stop4539" /></linearGradient><linearGradient id="linearGradient4551"><stop style="stop-color:#0aa561;stop-opacity:1" offset="0" id="stop4553" /><stop id="stop4559" offset="0.5" style="stop-color:#009b58;stop-opacity:1" /><stop style="stop-color:#00914b;stop-opacity:1" offset="1" id="stop4555" /></linearGradient><linearGradient id="linearGradient4561"><stop style="stop-color:#de5644;stop-opacity:1" offset="0" id="stop4563" /><stop id="stop4569" offset="0.5" style="stop-color:#da4531;stop-opacity:1" /><stop style="stop-color:#ce3a28;stop-opacity:1" offset="1" id="stop4565" /></linearGradient><linearGradient id="linearGradient4525"><stop style="stop-color:#ffc01a;stop-opacity:1" offset="0" id="stop4527" /><stop id="stop4533" offset="0.5" style="stop-color:#ffba03;stop-opacity:1" /><stop style="stop-color:#ffb300;stop-opacity:1" offset="1" id="stop4529" /></linearGradient></defs><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1366" inkscape:window-height="706" id="namedview51" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:zoom="1.8773332" inkscape:cx="236.78482" inkscape:cy="65.546814" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="Layer_2" />
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="226.8584" y1="284.50681" x2="210.5396" y2="252.47929" gradientTransform="translate(-124.695,-206.60064)">
<stop offset="0" style="stop-color:#FCD08F" id="stop12" />
<stop offset="1" style="stop-color:#F79673" id="stop14" />
</linearGradient>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="203.1299" y1="279.73831" x2="140.9948" y2="346.37" gradientTransform="translate(-124.695,-206.60064)">
<stop offset="0" style="stop-color:#E74047" id="stop19" />
<stop offset="1" style="stop-color:#7F50A0" id="stop21" />
</linearGradient>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="203.4604" y1="261.66989" x2="140.33949" y2="196.3062" gradientTransform="translate(-124.695,-206.60064)">
<stop offset="0" style="stop-color:#E6FFAB" id="stop26" />
<stop offset="1" style="stop-color:#47BEBC" id="stop28" />
</linearGradient>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="159.23779" y1="335.7168" x2="159.23779" y2="206.7505" gradientTransform="translate(-124.695,-206.60064)">
<stop offset="0" style="stop-color:#84E9DB" id="stop33" />
<stop offset="1" style="stop-color:#197491" id="stop35" />
</linearGradient>
<g id="g3042" transform="translate(0,7.0250703e-6)"><path style="fill:#ffe300;fill-opacity:1" inkscape:connector-curvature="0" id="path16" d="m 89.178,84.522358 c 15.287,-8.367 26.962,-14.758 28.024,-15.34 3.168,-1.734 6.487,-6.159 0,-9.696 -2.085,-1.139 -13.446,-7.334 -28.042,-15.297 l -20.075,20.229 20.093,20.104 z" /><path style="fill:#ff4e54;fill-opacity:1" inkscape:connector-curvature="0" id="path23" d="M 69.084,64.418358 4.876,129.11636 c 1.45,0.184 3.194,-0.2 5.2,-1.298 4.153,-2.273 48.753,-26.686 79.102,-43.298002 l -20.094,-20.102 z" /><path style="fill:#00f085;fill-opacity:1" inkscape:connector-curvature="0" id="path30" d="m 69.084,64.418358 20.075,-20.229 c 0,0 -74.616,-40.7089996 -79.083,-43.1459996 C 8.359,0.10635843 6.487,-0.22064157 4.83,0.14835843 L 69.084,64.418358 z" /><path style="fill:#00e0ff;fill-opacity:1" inkscape:connector-curvature="0" id="path37" d="M 69.084,64.418358 4.829,0.14935843 C 2.175,0.74135843 0,3.0383584 0,7.6553584 0,15.155358 0,115.10836 0,121.40536 c 0,4.348 1.711,7.406 4.875,7.711 L 69.084,64.418358 z" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

4
images/reference/index.md
View File

@@ -42,7 +42,7 @@ Where possible this links to the organisation's brand guidelines page.
| <img src="/images/svg/tox.svg" width="256" /> | <img src="/images/reference/tox.svg" width="256" /> | https://github.com/Tox/tox.chat/blob/master/themes/website/static/img/icon.svg |
| <img src="/images/svg/gitlab.svg" width="256" /> | <img src="/images/reference/gitlab.svg" width="256" /> | https://about.gitlab.com/press/ |
| <img src="/images/svg/html5.svg" width="256" /> | <img src="/images/reference/html5.svg" width="256" /> | https://www.w3.org/html/logo/ |
| <img src="/images/svg/meetup.svg" width="256" /> | <img src="/images/reference/meetup.jpeg" width="256" /> | https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/f/1/d/highres_454596637.jpeg |
| <img src="/images/svg/meetup.svg" width="256" /> | <img src="/images/reference/meetup.png" width="256" /> | https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/f/1/d/highres_454596637.jpeg |
| <img src="/images/svg/line.svg" width="256" /> | <img src="/images/reference/line.svg" width="256" /> | https://line.me/en/logo |
| <img src="/images/svg/lastpass.svg" width="256" /> | <img src="/images/reference/lastpass.svg" width="256" /> | https://lastpass.com/press-room/ |
| <img src="/images/svg/windows.svg" width="256" /> | <img src="/images/reference/windows.png" width="256" /> | https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RE1voQq |
@@ -77,7 +77,7 @@ Where possible this links to the organisation's brand guidelines page.
| <img src="/images/svg/disqus.svg" width="256" /> | <img src="/images/reference/disqus.svg" width="256" /> | https://disqus.com/brand/ |
| <img src="/images/svg/ghost.svg" width="256" /> | <img src="/images/reference/ghost.svg" width="256" /> | https://ghost.org/design/ |
| <img src="/images/svg/opensource.svg" width="256" /> | <img src="/images/reference/opensource.png" width="256" /> | https://opensource.org/logo-usage-guidelines |
| <img src="/images/svg/patreon.svg" width="256" /> | <img src="/images/reference/patreon.svg" width="256" /> | https://www.patreon.com/brand/guidelines |
| <img src="/images/svg/patreon.svg" width="256" /> | <img src="/images/reference/patreon.png" width="256" /> | https://www.patreon.com/brand/guidelines |
| <img src="/images/svg/trello.svg" width="256" /> | <img src="/images/reference/trello.svg" width="256" /> | https://www.atlassian.com/company/news/press-kit |
| <img src="/images/svg/intel.svg" width="256" /> | <img src="/images/reference/intel.png" width="256" /> | https://newsroom.intel.com/news/intel-accelerates-ai-innovation-3-new-intel-capital-investments/intel-logo-default/ |
| <img src="/images/svg/badoo.svg" width="256" /> | <img src="/images/reference/badoo.svg" width="256" /> | https://team.badoo.com/new/ |

0
images/reference/meetup.jpeg → images/reference/meetup.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
images/reference/patreon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

2
images/svg/evernote.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" aria-label="Evernote" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#7bb13b" rx="15%"/><path d="M122 133h38c2 0 4-1 4-3l-1-42c0-7 2-13 4-19l2-2h-1l-73 72v1l4-2c6-3 14-5 23-5zm292-7c-3-16-12-24-21-27a400 400 0 0 0-106-11c-2-12-10-22-18-25-23-10-59-7-68-5-8 2-16 6-20 13-3 4-5 10-5 17v42c0 8-6 14-15 14h-37c-8 0-14 2-19 4s-8 5-10 8c-5 7-6 15-6 24l1 20c2 10 13 83 24 105 4 9 7 12 15 16 18 8 59 16 79 19 19 2 31 7 39-8l3-9c6-19 7-36 7-48 0-1 2-2 2 0 0 8-2 39 21 47 10 3 28 6 48 9 17 2 30 8 30 53 0 27-6 31-36 31-24 0-33 1-33-19 0-15 15-14 27-14 5 0 1-3 1-13 0-9 6-15 0-15-39-1-62 0-62 49 0 45 17 53 73 53 43 0 59-1 77-57 4-12 12-45 17-102 4-36-3-144-8-171zm-76 119l-16 1c2-11 6-24 23-24 17 1 20 18 20 29-8-3-17-5-27-6z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="#666" aria-label="Evernote" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#2dbe60" rx="15%"/><path d="M122 133h38c2 0 4-1 4-3l-1-42c0-7 2-13 4-19l2-2h-1l-73 72v1l4-2c6-3 14-5 23-5zm292-7c-3-16-12-24-21-27a400 400 0 0 0-106-11c-2-12-10-22-18-25-23-10-59-7-68-5-8 2-16 6-20 13-3 4-5 10-5 17v42c0 8-6 14-15 14h-37c-8 0-14 2-19 4s-8 5-10 8c-5 7-6 15-6 24l1 20c2 10 13 83 24 105 4 9 7 12 15 16 18 8 59 16 79 19 19 2 31 7 39-8l3-9c6-19 7-36 7-48 0-1 2-2 2 0 0 8-2 39 21 47 10 3 28 6 48 9 17 2 30 8 30 53 0 27-6 31-36 31-24 0-33 1-33-19 0-15 15-14 27-14 5 0 1-3 1-13 0-9 6-15 0-15-39-1-62 0-62 49 0 45 17 53 73 53 43 0 59-1 77-57 4-12 12-45 17-102 4-36-3-144-8-171zm-76 119l-16 1c2-11 6-24 23-24 17 1 20 18 20 29-8-3-17-5-27-6z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 799 B

After

Width:  |  Height:  |  Size: 800 B

2
images/svg/gitlab.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Gitlab" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#fc6d26" rx="15%"/><path fill="#fff" d="M389 77c-3-7-13-7-15 0l-44 136H182L138 77c-2-7-12-7-15 0L57 282c-2 6 0 13 5 17l194 141 194-141c5-4 7-11 5-17z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Gitlab" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#e65328" rx="15%"/><path fill="#fff" d="M389 77c-3-7-13-7-15 0l-44 136H182L138 77c-2-7-12-7-15 0L57 282c-2 6 0 13 5 17l194 141 194-141c5-4 7-11 5-17z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 288 B

After

Width:  |  Height:  |  Size: 289 B

1
images/svg/gmail.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Gmail" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#fff"/><rect width="360.041" height="267.049" x="75.777" y="122.563" ry="25.32" fill="#d54c3f"/><path fill="#eaeaea" d="M124.491 123.83h274.441v265.779H124.491z"/><path d="M233.36 304.911l-108.87 84.681.008-192.512 108.84 107.802" overflow="scroll" fill="#e3e3e3"/><path d="M317.327 389.636L92.17 164.55l307.687-7.305-.925 232.364z" overflow="scroll" opacity=".09"/><path d="M98.427 122.66L260.8 242.7l149.4-120.0z" fill="#efefef"/><path d="M426.7 162.9a22 22 0 1 0-25.5-36.5L258.1 230.5l-.015.1-.02-.007L115 126.405a22.3 22 0 0 0-25.5 36.5l-.593-.4 169.2 123.2m169.22-123.2l-170 124" fill="#de5145"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 745 B

1
images/svg/google_play.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Google Play" viewBox="0 0 512 512"><rect width="512" height="512" fill="#000" rx="15%"/><path d="M370 308a5820 5819 0 0 0 78-40c9-5 18-16 0-25-6-2-38-19-79-40l-56 52z" fill="#ffe300"/><path d="M314 255L135 425c4 .5 9-.5 14.5-3.4l220.9-113.2z" fill="#ff4e54"/><path d="M313.9 255.2L369 203 149.3 90a21.8 21.8 0 0 0-14.5-2z" fill="#00f085"/><path d="M314 255L135 88c-7.4 1.5-13.5 7.6-13.4 19.6V405c0 11.3 4.7 19.3 13.6 20.1z" fill="#00e0ff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 509 B

2
images/svg/patreon.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Patreon" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#fff" rx="15%"/><path fill="#ff5900" d="M256 81c-97 0-175 78-175 175v175h41V256a134 134 0 1 1 140 134c-22 0-42-4-50-9v-58c12 9 28 14 44 14a80 80 0 1 0-81-81v175h81a175 175 0 1 0 0-350z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Patreon" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#052d49" rx="15%"/><circle cx="327" cy="219" r="110" fill="#fff"/><path fill="#f96854" d="M185 402V109h-54v293z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 B

After

Width:  |  Height:  |  Size: 251 B

28
radius.html
View File

@@ -27,12 +27,30 @@
}
svg {
display: block;
position: absolute;
}
.overlay {
position: absolute;
opacity: 0.25;
}
.underlay {
position: relative;
height:150px;
}
</style>
</head>
<body>
<h1>Super Tiny Icons</h1>
<a href="https://github.com/edent/SuperTinyIcons">Download the SuperTinyIcons SVGs on GitHub</a>
<p>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.</p>
<img src="https://edent.github.io/SuperTinyIcons/images/guidelines/guideline.svg" width="128" alt="A template for logos" />
<ul>
<li><strong>Green</strong> is the safe zone, where the main body of the icon should be.</li>
<li><strong>Yellow</strong> is like a road shoulder, it is there if more space is needed. It should be used for protruding elements, like corners or ornaments.</li>
<li><strong>Red</strong> is off limits. It should not be touched by the icons. Red is also how a circular icon would look.</li>
</ul>
<section class="flex two four-800">
<h2>Radius %</h2>
<label>
@@ -47,6 +65,7 @@
<script>
var items = [
'../guidelines/guideline',
'amazon', 'github', 'html5', 'mastodon', 'reddit', 'soundcloud',
'tox', 'wechat', 'youtube', 'dropbox', 'gitlab', 'instagram',
'paypal', 'rss', 'spotify', 'tumblr', 'whatsapp', 'email',
@@ -60,7 +79,8 @@
'ibm', 'yammer', 'android', 'authy', 'blogger', 'cloudflare',
'codepen', 'digitalocean','discord', 'medium', 'airbnb', 'wifi',
'delicious', 'disqus', 'ghost', 'opensource', 'patreon', 'trello',
'intel', 'badoo', 'laravel', 'twilio', 'samsunginternet'
'intel', 'badoo', 'laravel', 'twilio', 'google_play', 'gmail',
'samsunginternet'
];
var container = document.querySelector('.icons');
@@ -80,7 +100,7 @@
var icons;
Promise.all(urls.map(url => fetch(url).then(res => res.text()))).then(all => {
icons = all.map(icon => {
return icon + '<b>' + icon.match(/aria-label\=\"(.*?)\"/)[1] + '</b>';
return icon;
});
render(range.value);
@@ -90,9 +110,9 @@
console.log('Rendering!', icons);
icons = icons.map(icon => {
return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
return icon.replace(/rx\=\"\d{0,2}\%/, 'rx="' + radius + '%"');
});
container.innerHTML = '<div>' + icons.join('</div><div>') + '</div>';
container.innerHTML = '<div class="underlay">' + icons.join('<img class="overlay" src="images/guidelines/guideline.svg"/></div><div class="underlay">') + '<img class="overlay" src="images/guidelines/guideline.svg"/></div>';
}
</script>
</body>