Icon design for dummies part II: how to create an icon set from scratch

As I was chattering about in my previous post, I was asked to create an icon set from scratch for Plugsurfing, which is Europe’s leading independent EV charging service. In this post I’ll try to explain my process for creating an icon set that fits the brand. If you want to know more about the background, you can read about why you should consider a custom icon set here.

Step 1: Research and inspiration

Let’s jump right into it. The goal with this step is to find the right icon style and personality for the brand. Is the brand for instance friendly, classy or eccentric? Plugsurfing say that they are «the alliance of emobility that transforms charging», and that «Plugsurfing simplifies charging and makes electric driving easy». In other words they are passionate, driven and contribute to make your everyday tasks easier.

Unfortunately the brand redesign process was at a very early stage at the point when I started designing icons, but we knew that the logo was going to change, and that both the logo and the rest of the design would likely be inspired by waves (Plugsurfing) or bridges (between customers, networks etc.), energy and transportation. In retrospect I can say that it’s risky deciding upon the icon style this early in the process, so if you have the opportunity to wait until other brand elements or guidelines are landed, that’s a big advantage.

Just before I started the design process we had landed upon Overpass as the new font. It’s based on the Highway Gothic signage font drawn for the United States Federal Highway Administration. So a hint of classic, yet modern and with quite a lot of personality. We felt it was very suitable for the Plugsurfing brand.

Overpass was the new brand font

Plugsurfing already had some beautifully created detailed icons that we also thought was a good fit, but they were way too complex for the 24 px icons for the app. However we wanted to keep the artistic and playful expression.

With this in mind, these icons called for something playful and friendly, yet elegant and simple. How can you get all of this in one icon set, and where do you start?

First I found some examples from other brands and apps, and analysed some of them. The Norwegian online grocery store Oda had a good combination of characteristics that we loved and wanted to adopt: tasteful and artistic, yet friendly and playful.

Screenshots from the online grocery app Oda

Step 2: Sketching, testing and validating

Sharp edges and filled style are often used for more techie brands. Rounded shapes, caps and corners feel more friendly and organic, which would be a better match based on what we knew about the rebranding at this point. Stroke thickness obviously also affects the expression a lot. It’s important for the consistency that you keep the same stroke thickness, border radius and dimensions throughout the icon set.

I used the existing Plugsurfing icons and some other icon sets for inspiration, and did some sketches by hand. After I had some idea of the style and way forward, I had to design, iterate and test a few icons to see that it would work.

Sketching by hand often helps me “warm up”

The icons above probably seem like a pretty random selection, but I wanted to test:

• some generic or simple that would be viewed a lot: Profile (1), Home (2), Menu (6)
• some business specific that would be viewed a lot: My position (3) and Location (8)
• some complex: Cart (4), Support (7), Voucher (5)

Before I went on with the rest of the icons, I made sure these eight icons would fit with the app design and with the Overpass font seeing as they often will stand together. This was also a good time to present it to the other designers and the stakeholder to see if we were on the right track.

Step 3: Create guidelines and grid

Turned out everyone loved it. Yay! The next step was to create a grid and some guidelines as a base for all UI icons. If you’re creating a big icon set, a grid is essential to maintain consistency. But remember that the grid shouldn’t compromise clearness or balance, it’s just to help you make the set coherent. One good rule of thumb is that all parts of the grid should have roughly the same surface area.

Car icon in the grid

I also find it helpful to write down the “rules” for the icon set as I go. This can be used as guidelines later, which will help you remember the details next time you design a new icon, or if other designers will be creating icons for the same set. In the guidelines it is good to include stroke thickness, corner radius, any unique visual features and so on.

The conclusions after the research and sketches phase were that the Plugsurfing UI icons should be:

• Light and tasteful, artistic and playful
• Rounded, organic shapes
• Flat / front view (no dimensions or depth)
• 1 pixel strokes, rounded caps and 3 px corner radius

Step 4: The real fun starts

It is so satisfying to see how well the foundation you created with guidelines and grids works in practice. The result is a coherent icon set with the same visual weight. A clean and simple, yet friendly and playful expression.
Notice the garage touch for the home icon. I think it is so cool that Plugsurfing went for a personalised icon set.

Did you wonder why this post is called Part II? You can read part I here: Icon design for dummies: how to add new icons to an already perfect icon library