Aligned to guideline and path optimized Airbnb, Amazon, Authy, Badoo and Bitcoin. (#98)

* Visually centered a few icons, some new paths and optimizations.

Apple - Visually centered and change the path to more a accurate one.
Bytes: 1011 —> 580.

Dropbox - Visually centered and change the path to fix point alignment.
Bytes: 338 —> 350.

Twitter - Visually centered.
Bytes: 425 —> 431.

Ubuntu - Visually centered and change the path and color to a more
accurate one.
Bytes: 755 —> 674.

Vimeo - Visually centered.
Bytes: 375 —> 379.

WhatsApp - Visually centered and change the path and color to more a
accurate one.
Bytes: 646 —> 611.

Windows - Visually centered and change the path to fix the lines
between shapes.
Bytes: 274 —> 284.

Hope this helps.

FYI: Wikicommons have good SVG shapes and most companies have brand
guidelines with accurate logo renditions and colors.

* Removed newlines, fixed Ubuntu color and updated ReadMe and Twitter PNG.

* Twitter PNG Artifacts Fix.

* Optimizations and new color palettes.

Apple - New color palette that better represents the brand, and tiny
bit smaller.

Ubuntu - I keep finding ways to make this one smaller.

Wikipedia - New color palette that better represents the brand, and bit
smaller.

* Update

* Update drama

* Solving conflicts

* Solved conflicts.

* Optimizations and new color palettes

Apple - New color palette that better represents the brand, and tiny
bit smaller.

Ubuntu - I keep finding ways to make this one smaller.

Wikipedia - New color palette that better represents the brand, and bit
smaller.

* More Ubuntu optimizations.

Learning SVG as we go.

* Revert "More Ubuntu optimizations."

This reverts commit 74c1a45959.

* More Ubuntu Optimizations.

* Guidelines Folder.

* Guidelines.

Added guidelines with instructions.

* Revert "Guidelines."

This reverts commit eb30dfe163.

* Revert "Revert "Guidelines.""

This reverts commit 76edce25ec.

* Removed guidelines for small squares.

* Aligned to guideline and path optimized Airbnb, Amazon, Authy, Badoo and Bitcoin.

All were aligned accordingly and optimized to the following percentages:

Airbnb - 43%
Amazon - 0%
Authy - 38%
Badoo - 23%
Bitcoin + 1%

I’ll update Readme.

* Fixed Amazon radius. Whops.
This commit is contained in:
Arturo Acevedo
2017-12-01 13:14:56 -06:00
committed by Terence Eden
parent 7f879ca1b8
commit fa8fdaabac
7 changed files with 24 additions and 5 deletions

View File

@@ -0,0 +1,13 @@
# Guidelines
This is the standard guideline. It helps with sizing for both square and circle icons, so they would look good no matter what border radius is chosen.
* **Green** is the safe zone, where the main body of the icon should be.
* **Yellow** is like a road shoulder, it's 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.
——
Needless to say, these are just guides. If they don't accommodate a certain shape, then they shouldn't be followed strictly.

6
guidelines/guideline.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Guidelines" role="img">
<rect fill="#222" height="512" rx="15%" width="512"/>
<rect fill="#ff3f32" height="512" rx="50%" width="512"/>
<rect fill="#ffd900" height="435" rx="50%" width="435" x="39" y="39"/>
<rect fill="#4cd966" height="384" rx="50%" width="384" x="64" y="64"/>
</svg>

After

Width:  |  Height:  |  Size: 361 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Airbandb" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#FF5A5F" rx="15%"/><path fill="#fff" d="M400 348c-3 18-15 34-33 42-8 3-18 4-27 3s-18-4-28-9c-13-7-25-18-41-35 24-29 39-56 44-80 2-11 3-21 2-30-2-9-5-18-10-25a61 61 0 0 0-51-25c-21 0-39 9-51 25-5 7-8 16-9 25-2 9-1 20 2 30 5 24 20 51 43 80-15 17-28 28-41 35a58 58 0 0 1-55 6c-17-7-30-23-33-42-1-9 0-18 4-28l4-12 9-18c25-54 52-109 79-162l1-2 9-17 10-16a38 38 0 0 1 58 0l10 16 9 17 1 2c27 53 54 108 79 162l8 18 4 12c3 9 4 18 3 28zm-144-17c-19-25-32-48-36-67-2-9-2-16-1-22 0-6 3-11 6-16 6-9 18-15 31-15 14 0 25 5 32 15 3 5 5 10 6 16s0 14-1 22c-5 19-17 42-37 67zm163-19l-6-13-8-18v-1c-25-54-52-109-80-163l-1-2-9-17c-3-6-7-13-13-20a58 58 0 0 0-45-22c-18 0-35 8-47 22-5 6-9 13-12 19l-9 17-1 3c-28 54-55 108-80 162v1l-9 19-5 12c-5 14-6 26-4 39a77 77 0 0 0 85 65c12-1 24-5 36-12 15-8 29-20 45-37 16 17 30 29 45 37a95 95 0 0 0 45 13 76 76 0 0 0 76-66c3-12 1-25-3-38z"/></svg> <svg stroke-linejoin="round" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Airbandb" role="img"><rect fill="#ff5a5f" height="512" rx="15%" width="512"/><path d="M256 83.7c-28.9.1-40.5 23.9-40.5 23.9a3058 3058 0 0 0-101.2 203.2s-27.5 49.8 13.8 84.5c38.4 32.3 83 13.4 127.5-38.7 34.3-40 49.8-73.2 48.3-100.6-1.3-23.9-15.8-43.7-47.9-43.7-47.3-.2-48.3 44.6-48.5 43.7 0 46.6 42.8 93.5 56 108.6 13.3 15.1 70.8 73.4 121.5 30 40-34.1 13.1-83.8 13.1-83.8-30.6-67.6-51-111.5-99.9-203.2 0 0-10.6-24-42.2-24z" fill="none" stroke="#fff" stroke-width="23"/></svg>

Before

Width:  |  Height:  |  Size: 996 B

After

Width:  |  Height:  |  Size: 572 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Amazon" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f90" rx="15%"/><path fill="#fff" d="M293 184c-65 2-127 20-127 85 1 44 28 66 64 66 32 0 53-12 71-31 8 11 10 17 25 28 3 2 8 2 10-1l33-28c4-3 2-8 0-11-8-11-16-19-16-40v-67c0-28 2-54-19-73-17-16-39-21-64-22-56-1-92 29-97 65-1 6 4 9 7 9l39 6c6 1 9-5 10-9 6-23 30-29 45-24 21 7 19 30 19 47zm-38 109c-16 0-26-13-26-31 1-37 30-44 64-44v19c0 34-18 56-38 56zm175 111c14-11 27-40 26-59 0-8-1-9-8-11-14-4-48-5-65 11-3 3-2 5 1 5 12-2 47-6 52 2 5 7-8 36-12 49-2 5 2 6 6 3zM58 346c100 94 258 98 360 26 7-5 0-13-7-10-119 54-259 32-349-22-4-3-8 2-4 6z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" aria-label="Amazon" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f90" rx="15%"/><path d="M283 187c-62 2-121 19-121 81 0 43 26 64 61 64 31 0 51-12 68-30 8 11 10 16 24 27 3 2 8 2 10-1l31-27c4-3 2-8 0-10-7-11-15-19-15-39v-64c0-27 2-52-18-70-17-16-38-20-62-21-53-1-88 28-93 62-1 6 4 9 7 9l37 5c6 1 9-4 10-8 6-22 29-28 43-23 20 6 18 29 18 45zm-36 105c-15 0-25-13-25-30 1-36 29-42 61-42v18c0 32-17 54-36 54zm168 106c13-11 26-38 25-57 0-7-1-8-8-10-13-4-46-5-62 10-3 3-2 5 1 5 11-2 45-6 50 2 4 7-8 35-12 47-2 5 2 6 6 3zM58 342c96 91 247 94 345 25 7-4 0-12-6-9a376 376 0 0 1-335-21c-4-3-8 2-4 5z" fill="#fff"/></svg>

Before

Width:  |  Height:  |  Size: 674 B

After

Width:  |  Height:  |  Size: 674 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" aria-label="Authy" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#ec1c24" rx="15%"/><path d="M234 201.8l61.4 61.3a22.7 22.7 0 0 0 32.2-32l-61.4-61.5a114.7 114.7 0 0 0-161-1.1l-.6.6-.5.5-1.1 1.2a114.8 114.8 0 0 0 2.2 159.8l61.4 61.4a22.7 22.7 0 0 0 32.1-32.1l-61.4-61.4a69.2 69.2 0 0 1-.5-97.3 69.2 69.2 0 0 1 97.2.6zm79.3-81.8a22.7 22.7 0 0 0 0 32.2l61.4 61.3a69.3 69.3 0 0 1 .5 97.3 69.2 69.2 0 0 1-97.3-.6L216.6 249a22.7 22.7 0 1 0-32.2 32.1l61.4 61.4c44 44 115 44.6 159.8 2.2l1.2-1 .5-.7.6-.5 1.1-1.2a114.7 114.7 0 0 0-2.2-159.8L345.4 120a22.7 22.7 0 0 0-32.1 0z"/></svg> <svg stroke-linecap="round" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Authy" role="img"><rect fill="#ec1c24" height="512" rx="15%" width="512"/><path d="m179 381-65-65a97 97 0 0 1 0-134c34-35 98-36 131-4l69 69" fill="none" stroke="#fff" stroke-width="46"/><path d="m333 131 65 65c35 36 35 96 0 134-34 34-99 36-132 4l-68-69" fill="none" stroke="#fff" stroke-width="46"/></svg>

Before

Width:  |  Height:  |  Size: 650 B

After

Width:  |  Height:  |  Size: 402 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" aria-label="Badoo" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#7000E3" rx="15%"/><path fill="#FF671B" d="M256 169.63A90.33 90.33 0 0 0 183.4 133c-49.84 0-90.4 40.77-90.4 90.83C93 306 202.08 409 256 409s163-103.06 163-185.17c0-50.06-40.56-90.83-90.4-90.83a90.42 90.42 0 0 0-72.6 36.63z"/></svg> <svg fill="#fff" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Badoo"><rect fill="#7000e3" height="512" rx="15%" width="512"/><path d="M256 160a102 105 0 0 0-183 61c0 92 122 208 183 208s183-116 183-208c0-56-45-102-101-102-33 0-63 15-82 41z" fill="#ff671b"/></svg>

Before

Width:  |  Height:  |  Size: 372 B

After

Width:  |  Height:  |  Size: 286 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" aria-label="Bitcoin" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f7931a" rx="15%"/><path d="M369 220c5-35-21-53-56-65l11-46-28-7-11 45-23-6 12-45-29-7-11 46-18-4-39-10-7 30 20 5c12 3 14 11 13 17l-13 52 3 1-3-1-18 74c-2 4-5 9-13 7l-20-5-14 32 36 9 20 5-11 47 28 7 11-46 22 5-11 46 28 7 12-46c48 9 84 5 99-38 12-35-1-55-26-68 18-4 32-17 36-41zm-64 90c-9 34-68 16-87 11l16-62c19 5 80 14 71 51zm8-91c-8 32-56 16-72 12l14-56c16 4 67 11 58 44z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" aria-label="Bitcoin" role="img" viewBox="0 0 512 512"><rect width="512" height="512" fill="#f7931a" rx="15%"/><path d="M391 216c6-43-25-64-68-79l14-55-34-9-13 54-28-7 14-54-35-9-13 56-22-5-47-12-8 36 24 6c14 4 17 14 15 21l-15 63 3 1-3-1-22 89c-2 5-6 11-16 8l-24-6-17 39 68 17-13 57 33 8 14-55 26 6-13 55 34 9 14-56c58 11 102 6 120-46 14-42-1-66-32-82 22-5 39-20 44-49zm-77 108c-11 41-82 20-105 14l19-75c23 6 97 17 86 61zm9-110c-9 39-67 20-87 15l17-68c20 5 81 14 70 53z"/></svg>

Before

Width:  |  Height:  |  Size: 525 B

After

Width:  |  Height:  |  Size: 529 B