diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 0674c51f..00000000 --- a/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ - -images/svg/guidelines.svg - -images/svg/guidelines for small sizes.svg diff --git a/README.md b/README.md index ddc607d3..7d212edb 100644 --- a/README.md +++ b/README.md @@ -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/ - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + +<<<<<<< HEAD @@ -111,23 +110,67 @@ Originally created for my contact page - [https://edent.tel/](https://edent.tel/ +======= + + + + + + - - - - - - + + + + + + + + + + + + + + + + + + + + +>>>>>>> edent/master + + + + + + + + + + +<<<<<<< HEAD +======= + + + + + + +>>>>>>> edent/master + + +

230 Bytes
252 Bytes
270 Bytes
451 Bytes
438 Bytes
630 Bytes
230 Bytes
252 Bytes
270 Bytes
451 Bytes
438 Bytes
630 Bytes

326 Bytes
354 Bytes
372 Bytes
370 Bytes
316 Bytes
544 Bytes
326 Bytes
354 Bytes
372 Bytes
370 Bytes
316 Bytes
544 Bytes

492 Bytes
529 Bytes
532 Bytes
583 Bytes
747 Bytes
608 Bytes
492 Bytes
529 Bytes
532 Bytes
583 Bytes
747 Bytes
608 Bytes

375 Bytes
635 Bytes
964 Bytes
436 Bytes
619 Bytes
674 Bytes
375 Bytes
635 Bytes
964 Bytes
436 Bytes
619 Bytes
674 Bytes

859 Bytes
802 Bytes
374 Bytes
765 Bytes
423 Bytes
383 Bytes
859 Bytes
802 Bytes
374 Bytes
765 Bytes
423 Bytes
383 Bytes

597 Bytes
305 Bytes
573 Bytes
379 Bytes
664 Bytes
286 Bytes
597 Bytes
305 Bytes
573 Bytes
379 Bytes
664 Bytes
286 Bytes

493 Bytes
288 Bytes
632 Bytes
405 Bytes
399 Bytes
634 Bytes
493 Bytes
288 Bytes
632 Bytes
405 Bytes
399 Bytes
634 Bytes

479 Bytes
325 Bytes
269 Bytes
393 Bytes
634 Bytes
658 Bytes
479 Bytes
325 Bytes
269 Bytes
393 Bytes
634 Bytes
658 Bytes

503 Bytes
375 Bytes
526 Bytes
379 Bytes
572 Bytes
648 Bytes
503 Bytes
375 Bytes
526 Bytes
966 Bytes
313 Bytes
1010 Bytes

270 Bytes
398 Bytes
273 Bytes
256 Bytes
324 Bytes
276 Bytes
830 Bytes
799 Bytes
308 Bytes
575 Bytes
529 Bytes
255 Bytes

937 Bytes
946 Bytes
557 Bytes
402 Bytes
507 Bytes
569 Bytes

638 Bytes
267 Bytes
691 Bytes
379 Bytes
572 Bytes
648 Bytes

270 Bytes
398 Bytes
273 Bytes
256 Bytes
251 Bytes
276 Bytes

983 Bytes
286 Bytes
943 Bytes
879 Bytes
395 Bytes
983 Bytes
286 Bytes
943 Bytes
879 Bytes
509 Bytes
745 Bytes

395 Bytes
## 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 `` 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. 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 diff --git a/images/reference/gmail.svg b/images/reference/gmail.svg new file mode 100644 index 00000000..d4018b9e --- /dev/null +++ b/images/reference/gmail.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/reference/google_play.svg b/images/reference/google_play.svg new file mode 100644 index 00000000..f078fd9b --- /dev/null +++ b/images/reference/google_play.svg @@ -0,0 +1,35 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/reference/index.md b/images/reference/index.md index 32282731..568fc6ca 100644 --- a/images/reference/index.md +++ b/images/reference/index.md @@ -42,7 +42,7 @@ Where possible this links to the organisation's brand guidelines page. | | | https://github.com/Tox/tox.chat/blob/master/themes/website/static/img/icon.svg | | | | https://about.gitlab.com/press/ | | | | https://www.w3.org/html/logo/ | -| | | https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/f/1/d/highres_454596637.jpeg | +| | | https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/8/f/1/d/highres_454596637.jpeg | | | | https://line.me/en/logo | | | | https://lastpass.com/press-room/ | | | | 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. | | | https://disqus.com/brand/ | | | | https://ghost.org/design/ | | | | https://opensource.org/logo-usage-guidelines | -| | | https://www.patreon.com/brand/guidelines | +| | | https://www.patreon.com/brand/guidelines | | | | https://www.atlassian.com/company/news/press-kit | | | | https://newsroom.intel.com/news/intel-accelerates-ai-innovation-3-new-intel-capital-investments/intel-logo-default/ | | | | https://team.badoo.com/new/ | diff --git a/images/reference/meetup.jpeg b/images/reference/meetup.png similarity index 100% rename from images/reference/meetup.jpeg rename to images/reference/meetup.png diff --git a/images/reference/patreon.png b/images/reference/patreon.png new file mode 100644 index 00000000..577416c6 Binary files /dev/null and b/images/reference/patreon.png differ diff --git a/images/svg/evernote.svg b/images/svg/evernote.svg index 15a907f3..b4d624e9 100644 --- a/images/svg/evernote.svg +++ b/images/svg/evernote.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/images/svg/gitlab.svg b/images/svg/gitlab.svg index e2fd1de8..af713024 100644 --- a/images/svg/gitlab.svg +++ b/images/svg/gitlab.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/images/svg/gmail.svg b/images/svg/gmail.svg new file mode 100644 index 00000000..b0dbf571 --- /dev/null +++ b/images/svg/gmail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/google_play.svg b/images/svg/google_play.svg new file mode 100644 index 00000000..30404afa --- /dev/null +++ b/images/svg/google_play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/svg/patreon.svg b/images/svg/patreon.svg index 63dbbd5f..768e7811 100644 --- a/images/svg/patreon.svg +++ b/images/svg/patreon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/radius.html b/radius.html index c77d9287..0a7039f7 100644 --- a/radius.html +++ b/radius.html @@ -27,12 +27,30 @@ } svg { display: block; + position: absolute; + } + .overlay { + position: absolute; + opacity: 0.25; + } + .underlay { + position: relative; + height:150px; }

Super Tiny Icons

Download the SuperTinyIcons SVGs on GitHub +

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

Radius %