UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

Member-only story

The ultimate guide to designing icons

Paul Wilshaw
UX Collective
Published in
12 min readNov 6, 2021

Designing your own icons helps to establish a consistent visual design language. In this guide, I’ll take you through all the steps to consider a well thought out and consistent icon pack.

In this example of a support icon, I’ve taken the base 16x16px size and added details as the size increases, even reinforcing the message with my standard illustration by using the original icon.

Icon first

You’ve probably heard the phrase mobile first, there’s a reason for this I talk more about this in my podcast Faster Horses; Apple Podcasts or Spotify. In the same way we’re going to design the smallest possible area so we know that we can fit all our ideas in that small confined space and then build upwards adding more details where needed — I like to call this icon first.

I’m using a heart icon to convey ‘support’

Dieter Rams explains it really well “Weniger, aber besser” (Less but better), in this sense we’re going to remove as much as possible from our icons.

Let’s also get our communication right and tell our colleagues and peers what an icon is and, just as important, what it’s not and how often to use them. I borrow a similar armour or weapon rarity scale from your favourite RPG or shooter game…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Written by Paul Wilshaw

INNOVATOR | DESIGN THINKER | EXPERIENCE EXPERT | FUTURE GAZER | TECHNOLOGY AMBASSADOR | SPEAKER 👨‍💻 👨‍🔬 👨‍🚀 👨‍🎨 👨‍🏫 🧙‍♂️

Responses (2)

Write a response

Please accept my gratitude for writing such an excellent piece.

--

Thanks for this great article 👍

--