Skip to content

Heads up - this blog post is more than 6 months old. Some details may be out of date.

Building Bulb

Little things matter: Bulb’s new icons

Bulb's icons on the app

Icons communicate a lot in a very small space. That’s what makes them so useful. They help our members to navigate around our digital spaces so they can find what they need, fast. In this post, Bulb designer Riccardo explains how we’ve made our icons feel like a part of the Bulb family.

After taking a fresh look at the icons in our app, we realised they could work much harder for members. Bulb is well-known for being clear and simple to use, and our iconography should follow these principles too. It was time for our icons to get a makeover.

Taking stock

I’d just joined Bulb to look after graphic design and branding, so the first thing I had to do was look at what we had in our icons library already. Only then could I start thinking about how it could be improved.

After gathering them together, it was clear that our icons weren’t consistent, and they weren’t always easy to understand. And that’s a big no-no for us.

Three of our outdated icons - there's room for improvement
Some of our old icons. High five or theatre curtain - you decide.

Making our icons 'Bulby'

When I set to work on creating new icons, I put together some guidelines. This was so all the new designs would feel related, and more importantly so they could be used in existing communications without looking out of place.

  • We want our icons to be robust, simple and personal.

  • They need to be easy to understand.

  • Their style will take the lead from the Bulb logo - each icon needs to have a feeling of momentum and flow.

Bulb’s logo is dynamic. It represents our energetic nature, and our industry. To reflect this, our icons should use a single flowing line as much as possible. People always think of ‘pixel perfect’ icons locked into a grid - so one of the first challenges was finding a way to free myself from this idea.

After a bit of digging I came across The Myth of the Pixel Perfect Grid where the author takes a different perspective from the ones I was used to. His point is that pixels are an abstract way for us to think about screens - but if you actually look at a screen through a microscope (yep, people have done it) you’ll see a very different picture. There are no squares to be seen - so why tie ourselves to a grid that doesn’t exist in the real world?

Added to the fact that we can use vector images for icons (which always stay sharp, even if you scale them up and down a million times) and my worries about creating flowing icons in a rigid grid were gone.

After the thinking and gathering phase, it was time for some sketching!

A sketchpad with some electric bolt icons doodled in pen
The tried and tested pen and paper method.
Our old truck icon next to our new one
Before and after, adding character and momentum.

Our new iconography family

The icons I designed for the Bulb account and app solved the problems we had. They reflect shapes from the logo and our illustrations, so they can get to work in our products straight away. They also have a human feel, avoiding surgical perfection and sharp edges.

An icon of a lightbulb
Spot the similarities: reflecting our illustration style in our icons.
some animated icons, a spinning turbine and a whooshing truck
The new icons are flexible and dynamic.

You can have a look at the whole icon family in Bulb’s Design System. It’s ever-expanding, so defining some simple principles for our icons has made the job of creating them much easier. If you’re curious to see them in action, it’s the perfect excuse to download our app.

What do you think of our new icons? Let us know over in the Bulb community.