Scott Hanselman

There is only one Cloud Icon in the Entire Universe

October 16, 2011 Comment on this post [45] Posted in Apple | Musings
Sponsored By

I recently worked on the update to the ASP.NET site, now in beta at http://beta.asp.net. On that site we used an icon from the Pictos collection. I have an email from March of 2010 where we selected that icon, in fact.

Recently we updated the old site's cloud icon from this, to this:

Old ASP.NET Cloud IconNew ASP.NET Cloud Icon

I saw a few tweets and got some emails that said "nice iCloud icon." Well, it does look familiar! ;)

iCloud Icon

Of course, MobileMe before this:

Mobile Me Icon

I knew I'd see this icon somewhere before. Folks have even written articles talking about how beautiful this icon is and how the Golden Ratio is infused in its design. There are even tutorials written on how to create the icon from scratch in PhotoShop.

iCloud Icon Golden Ratio

Apple's logo artists have infused the iCloud logo with some mathematical elegance. In this case, the golden ratio or φ...Simple, but profound. Awesome Apple's design philosophy.

Funny thing about the Golden Ratio, if you look for it, you'll find it everywhere. Read about it in the book "The Golden Ratio: The Story of PHI" or watch this video on the Golden Ratio.  It's intuitive. Cool, also that they attribute this icon and it's "brilliance" to the Apple Designers, except the icon isn't from Apple, it's straight from Pictos 1. I know, because we bought it from them for our site. Plus Pictos 1 has been around for years. It includes a regular cloud, clouds with arrows up and down and a lightening bolt cloud.

Pictos - The Original iCloud Icon

Of course, there's only so many ways to draw a cloud, right? But somehow this one just nails it and is itself iconic, if you'll excuse the pun.

Where else might you have seen this cloud icon? Seems everyone with an internet-connected or music app uses it:

Another app using the same cloud iconYet another app using the same cloud icon

Just a few...

Daum Cloud UtilitiesCloud 2 Go

Dreams ControllerCloud of Inspirations

Cloud WalletCosa Icon

Zendit iconWiFi Fast Connect

iStorage IconSound Cloud Icon

Even though the first appearance of this cloud icon was in the commercial Pictos 1 set, you'll find suspiciously similar clouds in other cloud icons packs like the one at Yay.se that's Creative Commons. Notice that you can change the look of the cloud icon slight if you the circles smaller or larger or add a border, push and pull, or squish and stretch.

More clouds!

But again, it's essentially four circles. My 3 year old draws similar clouds. At what point does a unique design stop being unique and just absorb into the consciousness?

Today, it seems there is only one cloud icon in the universe and it's four circles with a flat base. I like it.

UPDATE: Hat tip to Ian Griffiths who points out that the BBC Weather Service beat all of us to the iCloud icon, kind of...over 30 years ago. ;)

iCloud - BBC Style, 30 years ago

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
October 16, 2011 10:09
You missed another Microsoft one: Skydrive (http://explore.live.com/skydrive). Which is all I saw the second iCloud was announced.
October 16, 2011 10:11
As Steve Jobs once quotes Stravinsky: "good artists borrow, greater artists steal" (or something like that). Unfortunately a ton of Apple fanbois tens to think that everything great origins from Cupertino. A closer truth could be that a lot of great things from a lot of brilliant minds around the world and throughout history was beautifully wrapped I'm Cupertino (which impressive in its own right, though).
October 16, 2011 10:29
That is actually pretty awesome. Fun read and I learned something new - golden ratio in icons. :)
October 16, 2011 11:07
hehe, very nicely put
October 16, 2011 15:39
Is this fear from doing something different and abandoning the status quo?
October 16, 2011 15:50
Very interesting find Scott. I was already "aware" all these cloud icons looked the same, but this is more profound. Anyway, this is somehow the "minimal cloud" you can get: it's either flat+4 circles or 5 circles (and making it bulkier). Kudos to the unknown first designer (maybe it's for Pictos 1, maybe it was prior to it...). After all, icons can get quite iconic.

Ruben
October 16, 2011 17:38
Bizarre that the number phi keeps coming up of late. I just read this at io9.com the other day:

"Also, one of the main features of the pentagram that makes it important to Freemasonry is that all four lines constructing the symbol be of equal length, symbolizing the Golden Ratio."

more here:

http://io9.com/5847682/are-the-streets-of-washington-dc-supposed-to-form-a-pentagram?utm_source=io9+Newsletter&utm_campaign=e09eaa5ae5-UA-142218-29&utm_medium=email
October 16, 2011 19:52
For anyone who grew up in the UK there is only one definitive cloud icon, and it's based on THREE circles, not four. It's the classic BBC weather forecast cloud.
October 16, 2011 20:33
I used to love the old BBC weather. Pretty sure the clouds were magnetic, and I always wanted one :)
October 16, 2011 20:37
The multiple appearances of the golden ratio are nearly all coincidence. Anything that's slightly over 150% of something else gets classified as "oh look, the golden ratio again!".

Some places, like the star or pentagram, legitimately have phi in them. Most other things do not.

(The article itself was quite cool, though. I didn't realize how ubiquitous that cloud was!)
October 16, 2011 21:17
From Samuel_Michon @ HackerNews:

--

It puzzles me how the author of this article came to the conclusion that Apple borrrowed/stole its cloud icon from Pictos.

Apple's MobileMe was announced on June 6, 2008. From the start, it used the same cloud icon. [1]

According to the Pictos web site (and the Wayback Machine), the Pictos collection came into being in 2010. [2]

[1] http://web.archive.org/web/20080720090522/http://www.apple.com/mobileme/
[2] http://wayback.archive.org/web/20100701000000*/http://pictos.drewwilson.com/

--

There you are...
October 16, 2011 21:34
another one,

http://jsfiddle.net/

its a cloud coding site.
October 16, 2011 22:15
Samuel @ HackerNews via Napster commenter:

Good info and great use of the wayback machine. Perhaps Pictos took from Apple? I've asked the Pictos guy what the scoop is via Twitter. Even if it's reversed, it's interesting/cool how this one piece of iconography has seeped into the collective consciousness.

Odd though that Archive.org sees Pictos in May of 2010 and we purchased from him in March of 2010. Guess it took a while to take a snapshot.

Thanks for your comment!
October 16, 2011 23:25
<irony>
Is somebody going to patent this design? If not, I will.
</irony>
October 16, 2011 23:40
Great post! Apparently, many other blogs thought the same. ;)

The Cloud Icon phenomenon reminds me a lot of the Beta Badges during the early days of Web 2.0. Seems like every website had one. Some even transitioned to a perpetual beta status.

I believe the Cloud Icon branding will pass just as the Beta Badges phase dissipated...

What do you guys think?
TVD
October 17, 2011 6:51
This is really interesting when it comes to golden ration;

http://www.youtube.com/watch?v=19zUWMCJTnE
October 17, 2011 8:24
You forgot Coudflare ;) Pretty similar also :)
October 17, 2011 9:36
IBM cloud is different:
http://www.ibm.com/smarterplanet/au/en/cloud_computing/ideas/index.html
October 17, 2011 11:18
It looks to me like the "cloud of inspiration" icon is distinctly different. Five circles instead of four, the circles are differently-sized, and positioned differently. Nice article all the same, though.
October 17, 2011 12:39
i quite like these ones, not icons admittedly but quite pleasing to the eye nonetheless

http://thejoyofcode.com/Cloud_Artwork.aspx
October 17, 2011 15:24
My favourite explanation of the Golden Ratio http://www.youtube.com/watch?v=oT_Bxgah9zc
Yos
October 17, 2011 18:39
Interestingly, you'll notice one brand which uses lots of clouds, Skype, doesn't make use of this cloud icon shape.

www.skype.com
October 18, 2011 1:27
I just saw the clouds on DevReach, and Scott was complaining how such topic gets so huge attention. Well i guess now it will get even more... cheers :P
October 18, 2011 6:15
nice iCloud icon


The criticism is correct. That is the 4 year old MobileMe/iCloud logo. The name of the service changed recently, but not the logo or the apps. You're confusing users by using it to mean some other cloud service, or a generic upload icon.

Pictos also includes a podcast logo that originates with Apple. If you use it for something other than a podcast, you will confuse users. If a supermarket uses the Apple logo to mean "apples" that will also confuse users. They should not be surprised if they get email "nice Apple icon!"

Many 3rd party Mac OS and iOS apps sync with MobileMe/iCloud. The reason the iCloud icon is in Pictos may be for those developers to use to mean "iCloud," not for any developer to use to mean "upload to Internet." You may want to use it for that, but that is not what it means to users.

At what point does a unique design stop being unique and just absorb into the consciousness?


A unique design never stops being a unique design. No matter what excuses are made for copying it.

If an icon is designed to mean "cloud" and that is all it ever means, then you can use it to mean "cloud." But Apple not only made the MobileMe/iCloud icon, they made it famous. They put it in front of hundreds of millions of users and made it synonymous with "Apple cloud." That is the point of the icon. The fact that you think it is the prettiest cloud icon and want to use it for your own purposes it a compliment to Apple, but that won't make users think of it as anything other than iCloud. That won't change the meaning to "cloud."

There are over a quarter billion Apple users, and Apple's sales go up over 100% every year. The icon is going to mean "Apple cloud" to more and more and more people, not less. Over time it becomes less generic.

There is only one Cloud Icon in the Entire Universe


No, that is not true. The truth is, there is only one iCloud icon in the entire universe.

There are many, many, many cloud icons not only in the universe, but easily accessible in Google Image search … the following are all right off the servers of the companies who use them.

Microsoft's cloud icon

Google's cloud icon

Oracle's cloud icon

IBM cloud icon

HP cloud icon

There are hundreds of various cloud icon designs there that have not been burned into the retinas of a quarter billion Apple users over the past 4 years, or similarly into the retinas of all the various Microsoft, Google, Oracle, etc. users — the fact that they have not is what makes them "generic" so if you want to communicate "generic cloud" use any "meaningless" cloud icon and all that will say is "cloud":

Google image search for stock images cloud

It's not enough to just create a totally original graphic design, you also have to do some research to make sure it has not already been used, to make sure it does not already have a semantic meaning to a huge number of users, such as "Apple cloud." Similarly, you might come up with a totally original name for a cloud service: "iCloud." You may legitimately not know that is what Apple's service is named. But when you start telling people about "iCloud" they will think you mean the Apple cloud. That name is taken. That icon is taken.

These icons aren't widgets, like a #2 screw that you need to fit a #2 hole. They are communication. That means it goes further than just you expressing your own creativity by including that icon in your app because you decided that is a pretty cloud icon. There is a semantic meaning to the MobileMe/iCloud cloud. When I go to asp.net I see an icon that tells me "you can use this with iCloud," it does not say "you can use this with the cloud." When I find out that is not iCloud, that tells me, "unprofessional."

So you can very easily use a generic cloud icon for asp.net and that is an improvement in every single way. Or, you can use Microsoft's cloud icon. Why didn't you use that?

It is a great idea to get a visual designer involved, even if only for a few hours at the end of your project, to catch bugs like this. This is basic stuff to us. It's graphic design 101.

October 18, 2011 11:15
George Handel, when someone suggested he had plagerised, pointed out that his version was much better.

Cheers
October 18, 2011 15:25
Ahh finally, this was a cloud that I remember from when I was a kid back in the 70ties. We had it on the daily sunrise/sunset report.

http://www.youtube.com/watch?NR=1&v=V-4YxzTx3_Q
October 18, 2011 20:04
The Adobe Creative Cloud logo is a pretty nice take on it:

http://dosdigitos.com/2011/10/05/adobe-presenta-nube-creativa/adobe_creative_cloud_logotype_with_mnemonic_rgb_vertical/
October 18, 2011 20:05
October 18, 2011 20:59
Scott, wasn't expecting from you that you would copy the cloud from Apple.
October 19, 2011 10:34
This is my first time seen golden ratio on icon. I think it's cool. Nice post Scott!
October 21, 2011 6:42
Here is another one from the rackspace banner on your site

<img src="http://img696.imageshack.us/img696/5320/rackspacebanner.png"/>
October 22, 2011 5:23
BBC Cloud is not the same cloud...
October 24, 2011 1:02
Ours is different: Coton, cloud identification app
It is based on the Cloud Icon from The Noun Project :)
November 01, 2011 19:37
Even the advertisement on your web page have a cloud exactly the same.

http://ds.serving-sys.com/BurstingRes///Site-16990/Type-0/7bf8676f-936d-42d5-8e5d-4beb94f7f37a.gif
November 14, 2011 22:18
OK, I just had to say this. I read this blog regularly, so I knew this post existed, but I didn't expect it to be the 3rd result in Google when I went looking for a "Cloud Icon" for work. Nicely done.
December 20, 2011 13:34
French agency Digitas - a Publicis Groupe company - announces it's Cloud offering, and guess what ... ? ;)

http://www.digitas.fr/wp-content/uploads/2011/12/LOGO_DIGITASCLOUD-300x87.jpg

Christophe
March 06, 2012 15:55
You also missed Joyent Cloud:
http://www.joyentcloud.com/solutions/
:P
April 11, 2012 20:19
I used to love the old BBC weather. Pretty sure the clouds were magnetic, and I always wanted one :)
May 10, 2012 1:53
Odd that no one mentioned how Apple "borrowed" their logo from a certain group of British mop-tops! :-)
May 10, 2012 7:15
Reminds me of this article about the now ubiquitous snow flake icon:
http://idsgn.org/posts/no-two-snowflakes-alike/
May 13, 2012 22:59
I read this the first time today, and chuckled. Then I remembered that I drew a cloud icon just three weeks ago for a Mac app, so I took a look at it, and sure enough, it's very, very similar: https://dl.dropbox.com/u/599230/swiftdrop.png
May 17, 2012 20:41
The Kindle Cloud Reader also uses a very similar cloud in their icon...

Kindle Cloud Reader
June 06, 2012 3:26
An icon to mean "upload to the cloud" could use a little something added as a nod to what happens when the cloud server employees access your data or sell it or the service gets broken into. Maybe make the cloud darker or have a burglar's mask over the cloud or a T-pipe coming off the arrow going into the cloud or something like that. :)
February 02, 2013 1:48
This is great. Perhaps we could make the same point about the ubiquitous phone handset icon (in green or blue to answer, red to hang up), the stylized envelope representing email, the paperclip icon representing an attachment, the speech bubble icon representing chat or short messages...

These symbols are fast becoming the UI equivalent of a common language and I don't think any one company should be allowed to stake a claim on them.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.