How to create an icon collection
After 4 icons collections and 6000 icons created, it was time for a change.
Our new “EGO” icon collection got a radical new style. It’s the most personal and conceptual icon set I’ve ever created. We spent months researching for inspiration, experimenting and defining a new style.
I’m sharing with you our work process: researching, drafting, refining, optimizing… You will learn how to design an icon collection on a large scale. We’ve already created 800 icons, and we plan for at least 1500 icons.
Download the first 100 icons from the EGO collection here [Free].
Three questions before you start
1- What style do you want for your icons?
A good icon collection needs consistency and personality. For EGO, I wanted a stylistic break from the rounded iOS icon style. Streamline Icons was successful and loved by designers and developers, but we had to stick to the Apple style with that collection. There remained a need for icons with more personality.
Design trends evolve in an infinite cycle. My intuition was that after years of roundness we needed more sharpness and angularity. From the beginning I was attracted by the angular style.
2- Who do you create these icons for?
With EGO, we target the iOS designers/developers market. The line style fits iPhone apps, but the icons can also be used on Android and web applications.
Moreover, I would love for them to be used for way-finding signs. Not because it’s a new juicy market, but for the pleasure of seeing our icons used in a museum, an airport or a corporate headquarter. Seing them printed or carved on a tangible object would be very rewarding :-)
3- What are the constraints?
Our biggest constraint was that all the icons had to be legible at a small size on iOS or Android apps, but at the same time elegant when enlarged for signage or illustrative design.
Each icon is designed on a 24px grid, and every horizontal and vertical line is aligned to the grid. We tried as often as possible to use angles of 45° or 30°, but we couldn’t make it a rule. You need to maintain freedom in the diagonal angles to get elegant and naturalistic icons.
The 24px grid is supposed to work well on both Android and iOS… But that’s problematic and a whole subject by itself. We are trying to find the perfect grid size on this forum conversation. Join if you dare :-)
A radical style: primitive and futuristic
Do you want your icons to be unique? These days, we see icons libraries published every day. But most of them look the same and don’t get attention.
To get a unique design, you need to search for your style first. My way is to dig into the art history to get inspiration (as an ex history student it’s always a pleasure). 95% of what you find won’t be used, but it does trigger some creative connections and open design directions. Some other designers will get inspiration in the nature or by observing the city life. Whatever inspires you…
Don’t jump straight to designing icons in Illustrator or Sketch. Take a step back and feed your brain with inspiration from unexpected sources. In my case, I have spent a lot of time browsing Pinterest looking for examples of angular or minimal line designs. Or wasting time on Wikipedia learning about art history ;-)
From all these inspirations, I started to see clearly the style I wanted. If we could make a formula for the EGO design style, it would be made from these four main inspirations.
EGO is a contrasting mix of opposite influences: archaic cave paintings, polygonal futurism, 80's New Wave geometry… Like a good recipe, it’s all about the variety of the ingredients :-)
Primitive art
When I started to search on Pinterest, I was shocked! From cavemen to ancient civilizations, our ancestors produced amazing art that could be featured in any modern art museum.
That provided us with tons of examples of minimal line design that could be featured in an iPhone app. That was incredibly inspiring, and I started to draft frenetically as ideas were popping up.
See below these brilliant examples of Native American symbols used to communicate. Isn’t the use of the arrows in “War” and “Peace” a beautiful example of consistency? That’s genius.
Eternal Symbols
Icons are an attempt to communicate universally with each viewer, no matters which culture he originates from. Of course, it’s not always possible and icon recognition is often just a convention issued from habit (yes, I’m talking about this “floppy disk” icon as the “save” symbol :-).
Still, there is the designer’s dream of creating an universal language, and digging into our history gave me the feeling to approach the core of the graphic Grail.
Look at the fantastic cave painting and geometrical statues below. See the way our ancestors intuitively represented human shapes:
- Simplicity of the lines with no extra decoration. This is deeply conceptual. We back to the same social acceptance of a symbol recognized by a whole community, just like an icon is accepted as a convention nowadays.
- Underlying or explicit geometrical shapes: triangles, crosses, circles… Maybe because straight and simple lines are easier to carve on stone. Or maybe because we have a fascination for the perfect geometric forms deep inside of us.
There is something magical and fascinating in this primitive art that I’ve tried to catch in the EGO icons. These artists force the symbol to fit an abstract geometric structure. This is pure and hypnotic.
Isn’t it mind-blowing that these different pieces of arts were produced by civilizations that didn’t know each other, on separate continents, at different times? Still, they share the same minimal geometric style. Like it’s hardwired in the human brain.
That brings me to Carl Jung’s theory, exposited with brio in his Man and His Symbols (one of the most important books I have ever read, strongly recommended if you are interested in the links between images, symbols and psychology).
For Carl Jung, we have some “primordial images” or “archetypes” in our soul that we collectively share at a subconscious level. No matter the culture, all humans share fundamental concepts represented by images. For example, the circle will represent the sun, and hence the divinity.
A more or less superficial layer of the unconscious is undoubtedly personal. I call it the “personal unconscious”. But this personal layer rests upon a deeper layer, which does not derive from personal experience and is not a personal acquisition but is inborn. This deeper layer I call the “collective unconscious.” I have chosen the term “collective” because this part of the unconscious is not individual but universal; in contrast to the personal psyche, it has contents and modes of behaviour that are more or less the same everywhere and in all individuals.
Carl Jung, “The Archetypes and the Collective Unconscious”
I believe that the fascination we feel for the primitive art shown above comes from these archetypal images that they convey.
I’ve tried to inject this “archetype” concept into the EGO icons, but it would be a dead end if I tried to do it literally. There are only a few universal symbols shared by humans, this ambition cannot work with a 1500 icon collection full of modern symbols.
Nevertheless, I’ve worked with this idea of connecting to the unconscious parts of our brain. I believe that using primitive, almost brutal, minimal shapes and forcing them into a geometric structure gives this sense of universality.
Primitive urban art with Keith Haring
The work that Keith Haring did in the 80's was deeply inspiring. I see it as a modern attempt to connect to this universal psyche, these “primordial images” described by Carl Jung (see above). He’s a sort of modern caveman using simple and energetic images to communicate emotions and spiritually elevate us.
This urban tribal style inspired us for the EGO icon characters. We cannot create the same fluidity working with a tiny 24px grid. But Keith Haring’s use of white space and lines that suggest movement was a great example to follow.
80's New Wave
Kid, the 80's were a fun time ;-) After the “back to the nature” 70' s, the 80's embraced the technology with enthusiasm. It was all about neon colors, geometric shapes, abstract constructions and post-modern experiments.
Geometrical motifs were extremely popular: triangles, zig-zag waves, circles, lozenges or stripes… Modernity is expressed via sharp angles and asymmetrical designs, and all with a zest of joyful chaos.
One element that we have used a lot, inspired by the 80's, is the zig-zag wave. We have also use a sort of “confetti” style for a few icons. The bright colors were an inspiration for the EGO website design, even if I’ve kept only the lime/blue lagoon color scheme. I tried to mix in a lot of neon colors, but it turned out chaotic, and I went back to a more classic design and color palette.
To be honest, I couldn’t use as much of the 80's style as I thought as was going in. I think this was because the style requires a lot of space, and asymmetry doesn’t fit small icons on a 24px grid. A “New Wave” style would be a better fit for illustrations.
More 80's inspiration below. I believe that this style could make a comeback soon, as a reaction to the clinical style we see too much around us now. But maybe I’m just nostalgic :-)
This was acceptable in the 80's :-)
After this article dedicated to research and inspiration in icon creation, my next article will detail the process of icon drafting, vectorization and refining.
Stay tuned!
Download the first 100 icons from the EGO collection here [Free].
Follow me on Twitter to get updates about my next articles and products.
