top of page

The Evolution of Icons

Intro Heart.png

What is the origin of the Heart icon
and what’s love got to do with it?

3.45m

Intro Arrow.png

The Arrow is one of the most useful icons. Do you know the route it went through?

3.00m

Intro Settings.png

How did the gear shape convert into the Settings icon?

3.10m

Have you ever stopped to think about why icons look the way they do and what is their origin? Well, yeah… everybody knows that the Save icon originates from the good old floppy disk; and that the WhatsApp logo portrays a vintage phone receiver, but there are quite a few icons with a far less known, and a very fascinating, origin story.

Floppy and WhatsApp.png

The Save icon originates from the good old floppy disk

WhatsApp logo portrays a vintage phone receiver

So, what was it all about?

UXI LIVE, May 2021

I was honored to be one of the lecturers at the biggest UX conference in Israel. My part turned out to be special and unique: 3 short video clips that revealed the origin stories of 3 popular icons.

 

Sounds easy? Hell, no!

It took hours upon hours of research, reading, studying, writing, designing, rewriting and editing.

I was amazed to find out that those stories fold so much history, archaeology, art, cinema and

other areas. It all comes down to those small objects that even in the size of 16px can express a whole concept.

Heart

The origins of the heart shape:
Heart Origins

The human heart is where feelings and character traits are

Heart-shaped leaves of a plant called silphium, which produced a birth control medicine in ancient Greece

The Heart in Art and Culture:
Heart Art and Valentine

The Sacred Heart of Christ expresses the limitless love of Jesus for mankind

Valentine's Day is heavily celebrated and has a huge PR investment around the world

Arrow

The origins of the arrow shape:
Arrow Origins

Prehistoric men used arrowed-spear, bow and arrow

Middle Ages archers squads

The arrow as the symbol of direction and movement:
Arrow Direction and Movement

Settings

The gear as settings icon: a metaphor taken from the physical-mechanical world

Gears are used for tuning physical instruments; changing their location, size or type will affect the operation of the instruments. Changing something in the mechanism will change the way the machine works.

 

Similarly, the setting icon in an interface allows changes and adjustments tailored to our needs: change language, update date and time, switch to dark mode and more.

 

So, the use of gear as a setting icon is actually a metaphor taken from the physical-mechanical world into the visual-digital world.

Gear into Settings.
Gears throughout history and culture
Gear History A.png

The Antikythera Mechanism dated 2nd century BC, was found on 1900

James Watt 1774 Steam Engine Model

Gear History - The Big Ben Clock

The famous Big Ben in London has precise, well-maintained carved gears

Modern Times

"Modern Times", 1936, Charlie Chaplin

Conference day

bottom of page