
Principles of Icon Design - praveenscience
https://uxdesign.cc/7-principles-of-icon-design-e7187539e4a2
======
krm01
In the 10+ years I've been running a UI/UX design firm for software companies,
I've come to the conclusion that icon design, is not very different from logo
design and brand design. A Nike swish logo by itself, without context of the
brand we have with it today, is just a random piece of graphic. The pixels
itself are worth practically nothing. But because when we see the Nike logo,
we feel something (Athleticism, motivation, inspiration, energy, etc.) the
mark is worth billions. The magic is not in the mark itself, it's in the
context and meaning it builds up in the user's mind over time. Same goes for
icons. When seeing a play button with a red background and a white triangle,
it might suggest you're looking at a Youtube video. Icons, have no real
meaning or worth without context that's built up over time. Both are
'investment graphics'. So the purpose of an icon should be to make the user
familiar with something and initiate a mental model when you see it (You see
Nike, you feel something. You see a Play button, you know you need to click
it, etc.). Don't judge icons by their looks, but by their context. In other
words: Can the icon you are adding in your UI, _over time and by continuously
link the mark to a specific outcome_ , make the product easier to use because
it instantly gives the user a mental model of it's meaning and consequence
when clicked.

~~~
kaetemi
The play button points at the direction the tape will roll in your cassette
player. It had a very practical function once upon a time.

~~~
Isamu
Wow, I completely forgot about that fact. So the play triangle was an arrow
saying "tape is rolling in this direction" and fast-forward and reverse double
triangles were "tape is rolling fast" in the respective directions.

Did these buttons first show up on cassette players? The reel-to-reels I can
think of had multi-position switches.

~~~
c3534l
I looked it up and they date back to the 1960s on reel-to-reel tape recorders.
The pause button was added later when companies found that they couldn't
properly translate the word pause into every language. The idea is that the
two bars look like the square stop button and look like a frame stopped while
it is rolling to the next frame. The reasoning behind the square is that it's
the play triangle without a direction; it is stopped in both directions.

This machine is apparently from 1961, so it must have been quite early in the
60s:
[http://www.reelprosoundguys.com/images/1962_GRUNDIG_TK_46.jp...](http://www.reelprosoundguys.com/images/1962_GRUNDIG_TK_46.jpg)

------
c3534l
If I could lodge a complaint to all the UI designers: please stop making all
the icons look the same in order for them to have the same "style." If I'm
looking at a grid of essentially identical white-on-black pictograms with
overlapping forms composed entirely of outlines with no variation in thickness
or stroke, then you might as well just use actual words at that point.

~~~
bryanrasmussen
As a general rule icons take up less horizontal space than actual words
describing what they do, which is why designers prefer to use icons.

~~~
ta999999171
Word Wrap. Amateurs.

------
spectramax
I really think that icons should be judiciously used, in the event of
notification of a serious type. An alert, a warning or an immediate attention
to a hazard. Icons have a cognitive overhead of learning it - if we design
icons of different styles and artistic expression, they lose their efficiency
in cognitive detection. An interface with lots of icons without text (For e.g.
SolidWorks, 3DS MAX, Houdini) requires professional training and lots of
experience. But a universally recognized icon such as the ones defined in ISO
7010 [1] are popularized and standardized - why? Because, if these icons are
standardized, they gain popularity and recognizeability. I am guessing, the
cognitive overhead in icon detection and interpretation becomes less as we are
constantly exposed to these icons. It doesn’t have to be officially
standardized. For example, Floppy disk icon (save a file) and on/off icons.
Ofcourse, designers will continue to do things as a statement of artistic
expression at the expense of all kinds of things - legibility, accessibility
and as I said earlier, recognizeability. But that would make the world a
really boring place, so let's allow creativity.

There are a bunch of people that studied semiology of graphics. Frutiger did a
lot of work in iconography. Vignilli and a few other

[1]
[https://en.wikipedia.org/wiki/ISO_7010](https://en.wikipedia.org/wiki/ISO_7010)

PS - Btw, skeumorphic design is back, watch out for it in the next decade.

~~~
tpmx
This screen shot from the message/thread view in Gmail illustrates the
problems of using icons without text labels when the icons aren't obvious
enough:

[https://i.imgur.com/k7MFzdK.png](https://i.imgur.com/k7MFzdK.png)

------
DagAgren
I've started strongly leaning towards the principle that if I have to choose
between either an icon or text on a button, I will choose text. Icons are nice
landmarks to guide the eye, but they are absolutely worthless to convey
information or to find functions that you do not already have muscle memory
for. Text is clearer, and the varying word shapes and lengths gives the eye a
lot to work with already for locating things.

Try sitting someone who has never seen your UI before down in front of it, and
try to explain to them how to do something without pointing at the screen, and
see how much they struggle if your buttons only have icons.

~~~
jjoonathan
Yes! This was exactly the consensus in desktop app UX circles before mobile UX
popularized "hamburger menu and heiroglyph" design, which intentionally
sacrifices legibility to obtain screen space.

It's unfortunate that many designers these days often jump for hamburgers and
heiroglyphs in circumstances where that sacrifice doesn't make sense.

------
warpech
The author has criticised the design of the "electric power steering system
warning light" icon without suggesting a better alternative. What's the point
of criticizing then? Some concepts are easier to depict literally, others are
not.

The most important part about the car icons is the color: an orange icon means
you can go, a red icon means you must immediately stop.

~~~
falcolas
The one that entertained me was the water temp warning icon - an icon that’s
_at least_ 50 years old. Its meaning is as well (if not more) established as
the floppy disk as save.

------
cyxxon
Even if I generally agree with the premise of the article and the tipps it
gives, it too falls prey to some of the problems of icons. It presents the
Yelp food icons as well thought out and intuitive, and I would not have had
the slightest idea why the chinese food icon looks that way or what it should
represent, because around where I live chinese food is not served or sold in
these kind of boxes. The problem remains: if you don't already know the
meaning, you can at best guess, but don't understand it intuitively.

------
kaelig
I lead the team who built one of the public documentation sites mentioned in
this article ([https://polaris-icons.shopify.com/](https://polaris-
icons.shopify.com/)), ask me anything!

------
aspaviento
Since we are on topic, anybody has a suggestion for an icon that represents
body fat without representing an overweighted person?

~~~
torgoguys
The Noun Project has a few options that might work (most don't meet your
requirements), including a couple showing a lean person with arrows by the
midsection instead:
[https://thenounproject.com/search/?q=body%20fat](https://thenounproject.com/search/?q=body%20fat)

~~~
aspaviento
Thank you for your suggestion. It's not exactly what I look for but it can
help me as inspiration.

------
seanhunter
A much better guide would be to just follow Dieter Rams' 10 principles of good
design, which can be found here [1] and elsewhere

[1] [https://www.designprinciplesftw.com/collections/ten-
principl...](https://www.designprinciplesftw.com/collections/ten-principles-
for-good-design)

------
wdb
Arrows aren't really globally understood it's a cultural thing; depending on
how you navigate the world. You might understand the arrows differently when
used for indicating direction. It's a fascinating study in Anthropology :)

------
keith___talent
This is also a crap article on icon design. Too little focus on context or
actual implementation. Every medium article seems to me a crap resume builder,
loads of 1st year experts telling you the crap they learned in _profession_
bootcamp.

------
hizxy
This has literally nothing to do with UX Design.

------
yori
Off-topic question: I see a lot of new posts coming from .cc websites. What is
the appeal that .cc provides? Is it that the content is released under
Creative Commons? That's not the case here. What kind of messaging or
symbolism or underlying meaning one is aiming for when they are going for a
.cc domain?

~~~
hoorayimhelping
I doubt it has anything to do with the conceptual meaning of .cc and more with
the practical consideration that uxdesign.cc was available and much cheaper
than the alternatives.

------
b0rsuk
I really like the design of Heroes of Might and Magic 2 spells:

[https://www.pngkit.com/png/detail/204-2044131_spells-
heroes-...](https://www.pngkit.com/png/detail/204-2044131_spells-heroes-of-
might-and-magic-cursor.png)

Clear, quite colorful, and they communicate the spell function well. In the
worst case, they're easy to memorize. I still like the black&yellow style.

HOMM1 is also good.

Heroes of Might and Magic 3 made them more decorative, but they're still
clear: [https://www.spriters-
resource.com/resources/sheets/38/41309....](https://www.spriters-
resource.com/resources/sheets/38/41309.png)

HOMMIV spells - what do these do? [https://images.gog-
statics.com/e0b6ea10a02d03060d95cb9f79ebc...](https://images.gog-
statics.com/e0b6ea10a02d03060d95cb9f79ebce6e3bc4d8b219bd5b52494df1c543ac17b8_product_card_v2_mobile_slider_639.jpg)

Might and Magic Heroes 5 - you need an art historian to figure these out.
[http://www.heroesofmightandmagic.com/heroes5/spells.shtml](http://www.heroesofmightandmagic.com/heroes5/spells.shtml)

