10 Essential Design Tips for User Interface Icons

When a pixel-perfect icon set is used well in an app or on a website, it can help guide users through the product, add a pleasing aesthetic to the overall design, and create visual consistency. On the other hand, when icons are designed and implemented poorly, they can create a negative experience for the user.

With the release of Luminance, our first set of icons for mobile and web, we asked designers John Marstall and Josh Bryant to share some advice for creating beautiful and useful icons.

Tip #1: Create a Distinct Silhouette

“A distinct silhouette is the most important feature of an icon, above color and all other properties,” says Marstall.

As a user scans a row of icons, she should be able to distinguish what each one is without having to really examine it. A strong silhouette will make it easy for her to quickly identify what the icon represents.

Tip #2: Add Contrast

“Make sure there’s enough contrast between states, like active versus inactive, by using file or line weight,” says Bryant. This is especially important for tab bar icons, which typically sit in a row at the bottom or top of a mobile app’s UI. These icons help the user understand what they’re currently viewing and where to go next.

If you’re using outline tab bar icons, you can use a solid icon or one with a thicker line weight for the active state to differentiate it from the inactive state icons. The goal is to give just enough contrast, so the user can see the difference by scanning, not studying each icon’s details.

Tip #3: Uniformity is Key

“Sometimes it’s easy to get so focused on designing one icon or concept that you lose sight of how it fits into the larger project,” says Bryant.

Gather all of your icons together and judge them not just on individual merit but how well each fits into the set of the UI. Consistency with things like stroke weight, overall size, and corner radii will go a long way in making a UI feel coherent and polished.

Tip #4: Avoid Overuse

Icons shouldn’t be decorative. They should serve a purpose. If every label or control in the UI has an icon associated with it, it might take as much cognitive effort for a user to take in the icons and their meanings than it would to absorb that much text.

To prevent icon overload, Bryant recommends only using icons when it’s most helpful in communicating a concept or establishing a visual hierarchy. For example, you can help guide the user in where to go next by using icons on specific UI elements that are more important than other ones in the same view.

Tip #5: Familiarity Matters

Icons are like words, Marstall says. Clear communication is more important than being clever. Lean on traditional icon interpretations and use icons that your users are likely to know. This will help avoid confusion and potentially alienating someone who doesn’t understand what you’re trying to communicate.

Tip #6: Combine Icons Well

Sometimes you’ll need to combine two icons to form a compound concept. In this case, think of the two components as building blocks: One acts as a larger base and the other as a smaller modifier. “A compound concept with a clear visual hierarchy is easier to understand than one composed of equal-size parts,” says Marstall.

Tip #7: Size Counts

It’s best to design icons for target sizes at target resolutions. “Scaling a vector icon to arbitrary sizes results in half-pixel edges that make the icon appear soft even on today’s high resolution displays,” says Marstall.

That doesn’t mean you should avoid using SVG files altogether, he adds. Just be sure to tailor your SVG art according to its intended use. For more on the importance of custom-size icons, check out this detailed explanation from Firewheel Design.

Tip #8: Practice Proper Alignment

“Because icons come in all shapes, it always looks better when you ‘visually’ align icons with each other rather than ‘mathematically’ aligning them,” says Bryant. You may have certain icons that are heavier on one side or on the top and bottom. With these icons, try adjusting them by one or two points so the overall alignment looks correct.

This really comes into play when you have certain icons that don’t fill up the same amount of space. For example, you might have a row of icons that have bounds of 22 pixels by 22 pixels but one of those icons could be 20 pixels by 18 pixels.

Tip #9: Complement the UI

“I try to keep the actual product in mind when designing icons, so I don’t end up with the icons feeling generic or forced in the UI,” says Bryant.

If you’re working on icons for an app for sharing cute pet photos, icon details like rounded, exaggerated shapes and large corner radii may be appropriate. But if you’re designing icons for a professional business app, straight edges and sharp corners may work better. Understand the UI and make sure your icons complement it aesthetically.

Tip #10: Make Them Finger-Friendly

“Always make sure that an icon has enough tappable or clickable target area inside and around it,” says Bryant. The smaller an icon’s touch target is, the harder it will be for someone to interact with it. That’s particularly true for someone who uses their thumb when navigating mobile apps with one hand.

Give the user plenty of room by ensuring the entire area of an icon is the tappable target rather than just the bounds of the icon. According to Apple’s iOS Human Interface Guidelines, a minimum tappable area of 44 points by 44 points is recommended.

Icons should be beautiful, instantly recognizable, and help make an app or website easy to use. As we expand Luminance in the future, we’ll share more of what we learn. For now, you can download and try Luminance in your own projects, and let us know what you think on Twitter with the hashtag #BPXLicons.

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.

Black Pixel is a creative digital products agency. Learn more at blackpixel.com.