WebAssembly logo

[jfbastien]

---

ＷｅｂＡｓｓｅｍｂｌｙ  Ｌｏｇｏ  Ｃｏｎｔｅｓｔ

⚠️⚠️⚠️⚠️⚠️ ⚠️ UPDATE ⚠️ ✅ vote for your favorite logo in ➡️ this thread ⬅️ ⚠️⚠️⚠️⚠️⚠️

---

ORIGINAL POST (now closed)

---

At the very start of the WebAssembly project, @sunfishcode hacked up a logo: It has nice ideas:

• Arrows coming together to represent "assemble".
• Arrows coming together can also represent compiling other languages to the web.

It would be nice to have something more fancy / web-y / designer-y, and keep it neutral so it belongs to the web and not one of the browser vendors.

Petr Hosek from the NaCl team proposed using the HTML5 technology class icons.

---

Ｈｅｒｅ＇ｓ  ｗｈｅｒｅ  ＹＯＵ  ｃｏｍｅ  ｉｎ！

Reply to this thread with your suggested WebAssembly logo.

We haven't decided how we'll pick the final logo, but it'll definitely be around "stable MVP" time.

---

[ild0tt0re]

+1 For @dcodeIO Black and Green logo

[LucasNatoli]

+1 For @dcodeIO Black and Green

[AbhinavMadahar]

Really like Raphael's first one

[bobajeff]

This is something I made while playing with Krita. Though the design has been floating around in my head for several months:

Here's an 80's-esk experiment I made while playing with effects:

[Fogaccio]

Hi everyone, I just wanted to add this contribution to the project, please use as you like.

Thanks

[armanx64]

Current HTML5/CSS/JS logos are ugly and old (as that technologies too, lol). Take that vector logo — simple, clean, powerful and goddamn flying — and do with it anything what you want.

wa_logo.zip

[davegomez]

I love @Fogaccio's work

[tiye]

I like @Fogaccio 's logo.

[fremail]

@Fogaccio's and @jjmiyao's works are cool!

[Art]

WASM text inspired by and thanks to Erik Demaine http://erikdemaine.org/fonts/hinged/ Note the W and M are symmetric. (As are some other characters, which makes for more fun.) Used/suggested for F#UN FSharp Experimental Incubator Project FSTWASM FSharp To WASM. Every letter and number in this font can be folded from one universal hinged chain of pieces, specifically 128 right isosceles triangles hinged at their sharp corners. In particular, every character has exactly the same area. In addition, the chain can fold into a square, represented by a period. See our paper “Hinged Dissection of the Alphabet”, Journal of Recreational Mathematics, 31(3):204–207, 2003.

[Art]

[addyosmani]

I'm a fan of @Fogaccio's logo. It's clean, instantly recognisable and feels more modern than some of the older web platform (HTML/CSS) logos that were created a few years ago.

[mbebenita]

+1 @Fogaccio's logo, it has nice ASCII art versions.

\ \ \  /\
 \/\/\   \

\ \ \   /\
 \ \ \    \
  \/\/\    \

\ \ \    /\
 \ \ \  /  \
  \ \ \     \
   \/\/\     \

...

[mbebenita]

@Fogacci,o do you have .svg, .ai version of the logo?

[Fogaccio]

@mbebenita yes I do .. =]

[Fogaccio]

But I need to prepare the files to delivery, I gonna go to do that as fast as possible

[kenchris]

@Fogaccio Any progress on this?

[Fogaccio]

@kenchris I'm working on assets productions.

[kenchris]

@Fogaccio friendly ping

[Fogaccio]

Hi @kenchris and @mbebenita, I'm close to finish the .svg and .ai assets, I think that I'll have that on Friday.

[1l0]

HTML tag symbol + AST.

[Fogaccio]

Hello everyone, Just to let you know that here (https://github.com/Fogaccio/OpenDesign/tree/master/webassembly_identity) are the files of the branding proposal that I’ve sent before. I hope that these resources can help you in the best way. Feel free to share thoughts and suggestions.

Thanks

[mbebenita]

@Fogaccio thanks, this is great. I'm looking at the small favicon 16x16 version:

https://raw.githubusercontent.com/Fogaccio/OpenDesign/master/webassembly_identity/favicon/png/browser/favicon_16x16.ico

Do you think this could be made somewhat more legible. This version of the icon may be used in IDEs, and other tools. We probably need a custom pixel art version of the logo for this size. I'd be happy to do this, if you don't already have something in mind.

[Fogaccio]

Hi @mbebenita, I've tried to do the pixel art to .ico, but I didn't have success, feel free to help me to do that =]

[Fogaccio]

I'll be very grateful for your help

[kenchris]

@Fogaccio using less color shades (and sharper colors - thus more contract with background/transparent/white) would probably make it look sharper

It's kind of hard though with only 16x16 size though :) Need to carefully choose the shades

[h00gs]

Here's another one. Its a solid object consisting of a "W" on top of an "A" that provides a very simplistic, old school pixelated 2d logo from one view, and a 3d logo from another view. Here is an animated gif:

The solid object is created programmatically using the following code in openscad

module LetterW(thickness=5,height=20,width=20,col="Chartreuse")
{
    color(col) {
        union() {
            cube([thickness,thickness,height],false);
            cube([thickness,width,thickness],false);
            translate(v=[width,width-thickness,0])rotate([0,0,90]) union() {
                    cube([thickness,thickness,height],false);
                    cube([thickness,width,thickness],false);
            }
            translate(v=[-1.5*thickness,1.5*thickness,0]) cube([thickness,thickness,height-1.0*thickness]);
            //translate(v=[-1.5*thickness,1.5*thickness,0]) cube([2.5*thickness,thickness,thickness]);
            rotate([0,0,45]) cube([thickness/sqrt(2),sqrt(2)*1.5*thickness,thickness]);
        }
    }

}

module LetterA(thickness=5,height=20,width=20,col="Chartreuse")
{
    offset=-2*thickness;
    color(col) {
        union() {
            translate(v=[0,0,-height]) cube([thickness,thickness,height],false);
            translate(v=[width-thickness,width-thickness,-height]) cube([thickness,thickness,height],false);
            /*
            translate(v=[0,0,offset]) cube([width,thickness,thickness],false);
            translate(v=[width-thickness,0,offset]) cube([thickness,width,thickness],false);
            */
            translate(v=[thickness,0,offset])rotate([0,0,45]) cube([sqrt(2)*(width-thickness),thickness/sqrt(2),thickness]);
        }
    }
}

thickness=5;
height=20;
width=20;
scale=1.0;
$vpr = [0,0,90];

LetterW(scale*thickness,scale*height,scale*width);
LetterA(scale*thickness,scale*height-0.5*thickness,scale*width);

$t = 0.0;
//$vpr = [0, 0, 90];
//$vpr = [$t*90, 0, 90];
$vpr = [90, 0, 90];
$vpr = [90-$t*25, 0, 90-$t*45];

Here is the 2d view:

and here is the 3d view:

I can produce variations and flesh out asset sets when necessary.

I played with a more symmetric bent cross arm for the A:

but I personally prefer the straight cross arm because the A is more obvious.

[jfbastien]

@h00gs interesting, you almost have an M. C. Escher thing going, I like.

[rfernbach]

I thought a wrench might communicate assembly and could be built from shapes akin to WA.

[pjuftring]

@rfernbach somehow your design looks like a viking to me:

...do we need a mascot? :)

[Fogaccio]

Hi @mbebenita How's the challenge to make the favicon in pixel art? ... =]

[h00gs]

So my initial efforts weren't quite right so I persevered and found a curved cross bar for the A looks nice. Here's an animation:

A logo proposal for Web Assembly from h00gs on Vimeo.

The main logo:  A comparison with its older sibling:  And some variations of possible 2d icons, with a 3d view: 

[Fogaccio]

@mbebenita Friendly ping .... :)

[gregtour]

I think @dcodeIO's submission is the simplest and @1l0's idea is possibly the best.

[dariusgarza]

Seriously think https://github.com/WebAssembly/design/issues/112#issuecomment-153463362 has ALOT of potential. Very nice!

[bobajeff]

I've been thinking this might make a good logo:

[geertdoornbos]

Or..., composed from ideas above ( @Teemperor and @fstark )

.

[cpeterso]

:wavy_dash: or \/\/\

[tiye]

I thought this issue is already closed thanks to Fogaccio's splendid work, isn't it? And it's 6 months ago.

[angryoctopus]

I don't see the harm in throwing around a few more ideas:

[snshn]

[avellable]

?

[Teemperor]

@jiyinyiyong The issue is still marked as open and AFAIK no final decision or vote has been made regarding the icon, so I think more icons and derivative works are welcome.

[ratishphilip]

[sippan]

[ErikHarmon]

Here is my logo for WebAssembler Incorporated.

[aarongrider]

[olalonde]

[dsaf]

The shield should have a version number - just like CSS3 and HTML5 ones:

It's important to make sure it reads as 1 and not I or l + the necessary perspective to follow the shape of the shield.

[emanuelpalm]

I associate assembly languages with old computers, terminals and microprocessors, and I wanted the logo to feel corporate and bulky. I took the blue color from the W3C logo. The three brighter lines of the blue logo could symbolize how the project is part of the W3C.

I took inspiration from @Namozag's proposal. ;)

SVG versions attached. Copyrights are given to the W3C WebAssembly Working Group. WASM_logo_bulky.zip