There is a cog hidden in the React logo

Look at the React logo. Three ellipses crossing a dot, in that unmistakable cyan. An atom, obviously — components are the smallest unit you build everything from, so: atoms.

Now look at the shape in the middle, where the three ellipses overlap.

That’s a cog. It is there on purpose.

The designer says so himself

The logo was drawn by Maykel Loomans in spring 2013, while he was working with Pete Hunt at Instagram, in the run-up to Facebook open-sourcing React. He has written about it, which is a rarer thing than it should be — most logo origin stories are reconstructed by other people years later.

His account is refreshingly mechanical. He drew three ovals. He rotated two of them by sixty degrees. And in the negative space where they intersected, a cog appeared — not planned, but immediately obviously right.

The FedEx principle

The reason he kept it is the reason you already know, even if you have never thought about it.

The FedEx logo has an arrow in it. It sits in the negative space between the E and the x, and once somebody points it out you cannot look at a FedEx van again without seeing it. Loomans describes chasing exactly that — the moment the shapes came together and gave him, in his words, that “FedEx logo feeling”.

That is a specific and unusually honest design goal: not “make it look good” but “make it the kind of thing people tell each other about.” Hidden-figure logos are sticky because spotting one feels like being let in on something.

What the mark is actually saying

Stack it up and the logo is doing three jobs at once:

• The name. React, as in a chemical reaction — hence atoms.
• The structure. Components composed from smaller components, which is what an atom diagram looks like.
• The tool. A cog, because underneath the metaphor this is a piece of machinery you build with.

Three ideas in a shape you can draw from memory. That is a good logo, and the React designs here trade on the fact that it survives being printed at any size.

Two things the internet added

The story has picked up embellishments, as these always do.

You will find claims that the central shape is specifically a nod to Bolt.js, the client-side framework Facebook’s front-end team was working on at the time. It is a tidy story. Loomans’s own account describes a cog and does not make that connection, so treat it as folklore until someone produces a source.

You will also find the logo confidently described as showing electrons orbiting a nucleus. It doesn’t, quite — and neither does any atom in the last century of physics. Those neat elliptical paths are the Rutherford–Bohr model, superseded in the 1920s by orbitals, which are probability clouds rather than racetracks. Electrons do not go round like planets.

The diagram survived because it is legible, not because it is accurate. Which is a fair description of most good abstractions, including the one the logo is attached to: React’s mental model is not what the browser actually does either. It is just a much better thing to hold in your head.

Go and look

The three-ellipse construction is easy to miss because the cyan is doing so much work. Turn the brightness down, or squint, and the cog is unmistakable.

That is the mark of the thing working as intended. It was not hidden to be clever. It was hidden so that finding it would feel like yours.