Panic

Panic Blog

Copywriter: Cabel.

Clear

Quick: what’s a good, one-color icon shape that says “clear”?

A circle with an X? A circle slash? No, this isn’t delete — this is like clearing the list in Safari’s download window. Just removing things you don’t need to see anymore. A little brush, dustpan style? Without color, it reads as a paintbrush, and seems too detailed.

As it turns out, this is tricky. Apple solved this problem… by using the word “Clear”.

Cheaters! Well, fully understandable cheaters.

Well, for your curiosity, here’s what the Panic Art Department has come up with so far:

Our final choice? None of these. You’ll have to wait for a future software release to see what we decided on. (Yeah. Total mocktease.)

As a side note, amazingly, Google dug up an actual patent for “CLEAR DATA FROM A BATCH QUEUE” ICON FOR A DISPLAY SCREEN OF A PROGRAMMED COMPUTER SYSTEM. Well, that sounds perfect!

Yeah… I don’t think we’re going to use that one.

Posted at 12:27 pm 77 Comments

I’d go for a wiper icon like in cars.

BabyGotMac

2/2/2010 12:42 PM

I think the price tag/reverse delete icon (top row, 3rd over) would work…maybe add an x to it.

I think the last one in the 2nd row, but add a dust bin next to it.

Alex Muller

2/2/2010 12:46 PM

I like the three “empty set”-ish icons, but can understand why you didn’t go with any of those.

A windshield wiper would have done it for me.

I’m reminded of the “Clear Log” icon in Xcode’s Debugger Console: an eraser is wiping away part of the icon.

Jan Cornelissen

2/2/2010 12:56 PM

The moment I read your question, I would pick the icon used on Apple keyboards to clear/empty. On alu keyboards, the key under F16. But I like the vacuum cleaner.

I know: a giant truck full of papers, driving away towards a recycling factory in the distance (and yeah, maybe with the windshield wipers running). You already have the truck icon, just need to add the factory. Problem solved!

Maybe “C” as in Clear from a calculator?

Or you could just go without an icon and stick with the label! :P

Love the dustbuster icon. You need to find another appropriate use for it.

Joel Day

2/2/2010 1:00 PM

Oh, and by the way, if you did go with the “C” idea, it should definitely be some kinda perfectly circular, symmetrical “C” that isn’t the system font.

Jan Cornelissen

2/2/2010 1:07 PM

Sorry, on U.S. keyboards it seems there is just the “clear” label. On European keyboards there is an icon: http://twitpic.com/112itp

How about a defibrillator?

Clearing the queue for Transmission 4, maybe? :-)

I’m going for the dustbuster too.

Perhaps not the most appropriate, but the most fun.

Vasily Myazin

2/2/2010 1:29 PM

I like the windshield wiper metaphor. Her is my take on it:

http://twitpic.com/112m93

I can’t believe you can actually patent that.

MacPhreak

2/2/2010 2:33 PM

I am *really* hoping this would be an update to Coda. I’m dying for an update to Coda! :)
As far as the clear icon – how about an image of the space between Steve Ballmer’s ears when he said back in 2007 “There’s no chance that the iPhone is going to get any significant market share. No chance…”. Yup, the iPhone has been a total flop for Apple hasn’t it? ;)

Hey, Jan Cornelissen’s post seems to have uncovered the “official” Apple symbol for “clear.” I can confirm that US Apple keyboards have the text “clear” in that button position.

Holy cow, “mocktease”? Patent that shizz and you’ll be able to retire off the royalties I pay you from how hard I’m going to use that. Amazing.

I like the windshield wiper idea. Maybe something like this:
http://tinyurl.com/ydmphs7
But without the squirt. And a little extra detail on the wiper so it doesn’t look like a pointer. And maybe slightly less curve to the glass so it doesn’t look like a whatever-meter. Well, you have an art department.

Jan Cornelissen: Customers with ISO keyboards do have a leg up in that their keycaps use the standard menu glyphs, unlike US keyboards. So the problem is solved! Except the majority of our customers don’t have ISO keyboards and would still be confused. :?

FWIW, http://www.unicode.org/Public/MAPPINGS/VENDORS/APPLE/KEYBOARD.TXT says the Unicode character for the glyph in question is ⌧ (U+2327 X IN A RECTANGLE BOX).

The obvious solution is clearly a button with no icon at all.

You’re welcome. You can paypal me at this address.

James Wheare

2/2/2010 6:54 PM

This is solved by Apple for some inputs. The Google field in Safari: http://grab.by/29Ax

The same icon is also used to clear various fields on the iPhone. It’s clearing an input rather than a list of stuff you’re done with, but it’s good prior art.

I like the squeegee, but it’s not terribly obvious that’s what it is. My face could be red! Maybe that combined with a wiper style ‘clean area’.

The dust buster is a brilliant idea though

Ken Ferry

2/2/2010 9:42 PM

YOU ARE WELCOME.

http://twitpic.com/114tt5

Also: Acne-ridden face with tube appliqué? Trap door (and animate the items falling out the bottom)? Mushroom cloud? Defibrilator?

Weird, deja vu.. Feels like I’ve read this article before. Is it a repost?

Simon: No, but I Tweeted the question once, so your déja is justified. :)

James: The problem with “Circle X” is that, in Safari’s download manager, it’s used to cancel a download. So if the same icon was in the toolbar, does it mean “Clear List”, or “Cancel All Transfers”? Tricky.

Phillip Platz

2/3/2010 1:45 AM

I’m surprised you blogged this after your tweet, actually… simply because I remember seeing an awesome one tweeted back at you.

I’m not an icon artist, but I believe it looked something like this:

http://www.platzproductions.com/phillip/panic-clear1.jpg

Of course, I just realized this doesn’t look WONDERFUL in a tiny icon size, but I’m sure the concept could be easily re-adapted into something more along the lines of…

http://www.platzproductions.com/phillip/panic-clear2.jpg

If you use it, can I be in the application’s “about” pane? Or get a free Coda t-shirt? </needy>

Ha! The reply to James’ comment confirms that the Transmit update is on its way. We’re getting closer and closer to Coda 2.

Burger Party

2/3/2010 3:47 AM

why is the text so blurry on this post, thought i was losing my vision for a moment

I would add another vote for a wiper icon… nothing works better (in my mind) than that!

I love the puff of smoke. It might not be the most practicle, but as Mac user I love it!

You could use the circled “X” from URL/Google inputs in Mobile Safari. That would feel pretty native if you had to use an icon and not the actual word.

Ken Ferry

2/3/2010 10:35 AM

Featherduster? Sun dawning over the horizon, symbolizing a clean fresh new day for downloading? Snowplow (and animate completed items being pushed off in direction snowplow faces)?

James Wheare

2/3/2010 11:55 AM

Cezar: Could also be Unison. Or Coda :)

Burger Party: It’s rotated to fit the angle of the background with this CSS: -webkit-transform: rotate(0.808807deg); Safari doesn’t always cope that well with anti aliasing the text while rotated.

Dear Panic: Not sure if you’re aware of this but Chrome for Windows doesn’t render your slanty text correctly. It goes all stepy like it did when you tried to implement it in Firefox.

On a few of my applications, I make use of the hand broom to signify “Clear”. OmniWeb and Console also use the hand broom.

how about a chalkboard duster wiping away some letters!

Floggy Bottom

2/4/2010 4:23 AM

Webkit rotate is cute, but in this post it demonstrates why it’s not always a good thing; the icons are quite distorted, which diminishes our ability to judge them accurately.

The dust pan brush isn’t just a bad idea because it could be confused with a paint brush; it’s a bad idea because it’s not what a dustpan brush look likes outside of North America:
US: http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=dustpan+brush
UK: http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=dustpan+brush

I use an email reader that uses a coloured version of this icon for this purpose, and it wasn’t till I moved to the US that I had any clue what is was (and thats after using the program for years).

Is that a webkit css3 effect that is making the text all smudgy? No likey.

I think you are using metaphors that are too disjointed and confusing. Here’s a solution that’s been used for decades in other media:
http://i46.tinypic.com/t05li1.png

Lauren Herda

2/5/2010 8:42 AM

I remember seeing Cabel tweet about this a while back. Here was my take on it… http://tinyurl.com/ygn9ly2

Joe Simms

2/6/2010 7:43 PM

How about a chalk board with and eraser erasing it?

Vasily Myazin

2/7/2010 1:31 AM

Pat: what is this supposed to symbolize?

Yeah I can see that it’s really hard to read. It symbolises my failure to create tiny pictures.

Here’s a bigger shot: http://i49.tinypic.com/wagjz5.png
I’d love to see if someone can make a small version that doesn’t look like a pair of earphones…

Hey Pat thats the winner in my books! Thought the exact same thing, seems whenever I hear the word CLEAR I think of the show Emergency!.

Cheers!

How about the “poof” image from Apple when you drag something off your Finder or Menu.

Your blog is absolutely awesome!

This could be interesting: http://www.iconfinder.net/icondetails/25787/16/ Might be mistaken for delete, though.

I like the one in the lower right, because to me it says “ADD AWESOME 80S RALLY STRIPES TO THIS,” which is a feature I think you guys need to start including in your applications.

Daniel Bramhall

2/16/2010 4:01 PM

Wow, you guys are talented. What do you think they use for that design? Answers appreciated.

One more vote for clearing the windscreen with a wipers icon.

“A windshield wiper would have done it for me” >> Yeah!

I think the regular assortment of delete / “X” icons work fine. I don’t think there’s really any point in having a different icon for two actions that perform two different things, as long as the *context* in which those icons appear is unequivocally clear.

The X when you’re typing in a search bar means “clear,” not “close this window.” People know that. How? Context. Putting a delete icon contextually makes sense to me, although you might want an icon that represents “delete all” as well (otherwise the context is unclear, and the user may think it only deletes one, selected item).

I think sometimes less is more. But I don’t want to rain on the parade here. Those are some pretty cool looking icons by my recollection!

Justin Viger

2/18/2010 12:32 PM

I guess I wasn’t the only person to immediately think of windshield wiper. I think it’s a good on though. Like from Clean My Mac http://macpaw.com/cleanmymac.

Great problem! :)

http://www.iconfinder.net/search/?q=clear features this handsome icon: http://www.iconfinder.net/icondetails/9220/48/ and this one: http://www.iconfinder.net/icondetails/3887/32/ . As others have said, delete/x works.

Gary Hussey

2/18/2010 8:34 PM

why not use an old school eraser like photoshop’s aptly names eraser tool.

I actually like Phillip Platz’s suggestion, clear and scales well.

good choice only if all your users can read in English.

Tobias Wright

2/19/2010 7:24 AM

How about the math convention for empty set? ‘{ }’

Michael Critz

2/19/2010 2:33 PM

I think “Clear” (or it’s localized equivalent) is a good solution because it warns the user implicitly that they are about to lose some form of data. Which is true, the user’s metadata is about to vanish.

That being said, I like icons that illustrate what’s about to happen. I’m sure Panic’s art team has something much better, but here’s my goofy attempt — http://twitpic.com/146ugv

Mike Czepiel

2/19/2010 11:51 PM

I like the erasing icons others have listed. It even shows up in Xcode’s debugger console and is pretty obvious there.

Linda Sandvik

2/21/2010 3:03 AM

I quite like the “empty set” ones, but they might not be so obvious for people who lack a certain level of education, so I wouldn’t use it unless it was on, say, the New Scientist website.
The eraser seems most intuative, even children know what an eraser is and how to use it, none of the above symbols really look like an eraser though (is the brick-like one supposed to be an eraser..?).

Mark Jaquith

2/21/2010 9:14 PM

A toilet flusher?

Surely if so many people can come up with so many alternatives without agreeing, there’s no suitable icon?

Any Icon should be easily understood by its audience without explanation, and it seems pretty clear this ain’t going to happen in this case…

A trick I’ve used before is to get a bunch of people, ideally potential/actual users, and definitely not only geeks, to draw the icon they think means ‘clear’, or whatever – if a decent number come up with something similar, work it up, show it to a bunch more peeps and see what they think it means. It soon becomes clear if there’s anything that’ll be universally understood…

kevadamson

2/22/2010 9:20 AM

I’ve seen a few apps use a “scissors” icon

For an icon symbol, I think I would stick with convention, or at least Apple’s conventions.

If you look at Keyboard Viewer (formerly known as “Key Caps”), the symbol Apple uses as the “Clear” key on extended keyboards is this:

That’s the Unicode character U+2327, ‘X IN A RECTANGLE BOX’, or Apple GID 952: A simple box with an “X” over it. Not quite as stylish as the “white x in a dark circle”, but at a quick glance, its meaning is relatively clear (no pun intended).

There’s also Unicode char U+2392, ‘CLEAR SCREEN SYMBOL’, but it’s not really supported by many fonts and it’s (quite frankly) pretty crappy looking.

Joshua Choi

2/23/2010 11:04 AM

This is one of Jef Raskin’s original guidelines that he wrote way back in the 1980s or 1990s. He identified that icons are very often used when text would be better. A ton of programs back in the ’90s had this problem—they tried to use icons for everything.

I love the dustbuster.

I’m not sure if it says Clear or not. But I do think you have to find some place to use it.

David Kaneda

3/4/2010 1:57 PM

I would definitely stay away from any sort of (x) or delete imagery. If you’re going graphic (not sure “clear” is wrong, per se) I would say the broom metaphor is the clearest (pun intended).

This is *so* for an iPad app. OH YES.

Martin Carlsson

5/27/2010 6:00 PM

Is the “future sofware” released yet? There’s an X in the transfer’s view in Transmit 4.. Is that what you finally went for?

So whats the deal? Where is the great reveal? Is this part of Transmit 4/Unison, etc?

I like the one used in NewsLeecher the best .. its an old-style eraser (two-tone) and says “CleanUp” next to it.

That’s a genuinely impisesrve answer.

Sharlene Raskin

2/5/2016 12:15 AM

Thought-provoking piece . Incidentally , if anyone are wanting to merge PDF or PNG files , my secretary used a service here http://goo.gl/TU6PA7