Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.

Settings metaphor

Written on November 12, 2015

I’ve recently been working on an icon set of my own. Something that I’ve never done before. I started this set because I realized that I don’t always find one set that fits my needs. Instead of spending countless hours searching for a specific icon only to realize that it doesn’t fit the style of the icons in the rest of the set used in a project, I decided to just start my own.

In doing so, it has definitely been challenging. Some challenges include figuring out what dimensions to use, thinking through metaphors and making sure that the icon accurately represents what I’m drawing a metaphor from or even learning how to use Sketch, my current vector app of choice.

When designing icons, it is really easy to accept what everyone else has used but I wanted to give some thought and explore other options than what everyone else was using.

Take for example the settings icon. I’m not quite sure who first came up with the metaphor, but when I finally gave some thought to it, I didn’t think the often used gear was an accurate representation for settings.

The definition of settings according to Dictionary.com:

Noun - the act of a person or thing that sets.

Verb - to put (something or someone) in a particular place

How do you extract a gear from that? When I think about setting, I think about setting a dining table. You place objects in a particular place on a flat surface. In the context of software, settings is often used to set a user’s preferences or set their information.

For this reason, I decided to go with this icon.

Settings icon

I’ve seen it before but I think it is far less used to represent settings. But when I think through it I think it is a better representation of settings. The lines each represent a different preference that could be set by the user. The dots are used to denote the user’s preference, hence the differing positions along each line.

I thought about using toggles to represent settings as well but I felt like that was too binary in nature. Many toggles are often found in settings but they aren’t the only preference that you would set. Like setting a table has different placings and doesn’t always have to be uniform, settings too are often consisted of different type of placings for information.

I may end up adding an icon of toggles to also represent settings in the future, since this is something you see often in iOS. But for now, I’m happy with this icon being the metaphor for settings in my set.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design and side projects. Sign up and I'll send you my articles straight to your email.