How to Create Icons for Your Web-Based App

Show:

July 26, 2022 Web development

If you’re building your first web app, there’s a lot to think about and a deluge of different aspects to consider from a design perspective.

Even something as seemingly simple as creating icons can feel like an uphill struggle for those who are just getting into app development.

Should your iconographic efforts feel lacking, the following tips will set you right and steer you towards a satisfying conclusion to your app development journey.

Start with the concept

First, you need to know what the icons will represent, and what function they’ll fulfill when a user interacts with them.

It might sound obvious, but having this fundamental information set out in front of you will help as you progress with the rest of the UX design.

Use icon sets

Now that you know what kinds of icons your web app requires, you can look for inspiration elsewhere. There are millions of icons out there already which will highlight best practices, as well as revealing imperfections.

For example, this Google icon set is packed with examples from one of the world’s biggest brands, and lets you examine the array of aesthetic touches you could implement.

You can also test out other web apps which serve the same market as your creation to discover how iconography is put to work. All the best creative minds borrow ideas from others, so there’s no shame in it!

Get sketching

If you’re not a gifted digital artist already, it’s easier to grab a pencil and a pad to start jotting out designs for web app icons.

Draw a grid and come up with as many different options for a given icon as you can think of, using the aforementioned inspiration techniques to fuel your sketching session.

At this stage, there are no wrong answers, so be as experimental as you like, generating ideas without restricting yourself whatsoever.

Narrow down the field

With your army of brainstormed icons, the time to whittle down the designs to a shortlist of potential finalists has arrived.

You can do this fairly objectively by thinking about how the three main aspects of good icon design apply to each example.

First, there’s the form it takes, which usually falls into one of three main shapes. Circular and square icons are most common, while triangular icons are also not unheard of.

Next there’s the consistency of the overall look; for example, have you kept each corner or vertex rounded-off for a soft and approachable look, or have you made it uniformly angular?

Last, there’s how recognizable the icon is. It has to be clear, crisp and easily decipherable to new users and experienced users alike. It also has to fit in with the wider aesthetics of the app, and also the brand identity of the broader business or organization it represents.

If in doubt, get a second opinion, as the fresh eyes of a colleague or collaborator will reveal issues that you haven’t spotted with your shortlist.

Compare icons side by side

You’ll be making many icons even for a fairly simple web app, so it’s not just important to have consistency and uniformity within each icon in isolation, but also across all icons in a set.

This is only possible if you compare them side by side, choose a cohesive design language to link them, and make adjustments if there’s a clash.

Test, test, test

Last, be sure to test your icons out in the app itself, getting users to engage with them and seeing if they fit the bill or fall short. With that, your icons should be well-honed and ready to roll out in a full blown release of your app!