Mobile Icons
The more we use symbols in design, the more users understand their meaning.
. 5 min read
The nuts and bolts: The majority of mobile apps, as well as most mobile phones, use similar iconography and are quite uniform. Taping these symbols on a touchscreen device functions as a button to execute a specific job or action.
Designers find many ways to communicate with end users. Space to organize and guide the eye. Color to grab attention or create mood. Typography can be both decorative and used to create hierarchy.
And then there are icons: Ideas expressed in a single glyph. Many icons have become so commonplace that we take them for granted. Unwritten and unofficial, some icons find their way into common use … by being used. It’s a Catch-22. The more designers use them, the more users associate icons with an action, and the more incentive designers have to keep using them.
But over the last few years, as mobile technologies and social media began to change our lives, designers have had to invent new conventions.
Common Icons Become Common Knowledge
Before we can define “mobile” icons, let’s review what users take for granted.
Strictly speaking, social media “icons” aren’t icons in the literal sense. They’re smaller versions of full-size logos. They take on icon-ish qualities in how they’re used — users associate the tiny logos as actions, not entities.
We’ve seen this before. Even today, users may think something’s broken if tapping a website’s logo doesn’t take them to the home page. No one made clickable logos a standard. It simply came to be expected. As users and technology change, new standards emerge.
Icons and Styles in the Age of “Sharing on the Go”
Common icons aren’t going away, but mobile’s influence is hard to miss. Icons made popular by social sharing and mobile devices include:
Aesthetically, certain trends emerge when we step back to see the concepts behind the pixels.
- Symmetry. Centered is trendy, and that’s not bad. Icons have limited space to convey an idea. Centered isn’t just easy — it’s efficient.
- “Skeuomorphic” shapes — not textures. Realistic textures may be out, but people still recognize notebooks, pencils, cars and other real-world objects.
- Silhouettes are great. If it isn’t readable above a colorful background, it won’t work.
- No lines. Flat color isn’t just a matter of using few gradients and no texture. Regions of color that bump against each other is very common.
- Lines. We’re also seeing a spate of uniform-width, rectilinear lines. These work best when icons don’t have to be tiny. Say, 32px square and larger.
Convey Meaning With Your Own Icons
Having a common visual language is great — if you’re trying to stay on the same frequency as everyone else. We’ve found that if you want to stand out, repetition is your best friend.
This chart compares how often icons are used to how familiar users are. The correlation is simple — the more icons are used, the more users accept them. It’s possible to create new icons as long as:
- You use them often enough for users to get comfortable with them
- You label them at least once
- Users learn that experimenting (“what does this do?”) doesn’t have dire consequences
Designers and users find many ways to communicate with each other. Icons are compact and efficient — and useful, as long as they’re not strangers.
Test your icons with this Helio test template:
Mobile Icons Test
Use this template for:
- Test whether your audience understands your icons
- See which icons make the most sense to your audience
