Designing iOS & Android system icons for your mobile app
Prior to my experience as a dedicated mobile product designer at Fanatics, I was designing on all platforms at any time, never having the luxury or responsibility of designing strictly for mobile. This meant there was less attention to detail for any specific platform. In a way this made my life as a designer easy because there was less to worry about — a single “Profile” icon could be applied on web, iOS and Android platforms, without thinking twice. In retrospect, the designs were not as great as they could have been.
Then I became the mobile design lead for Fanatics. The expectation of one-size-fits-all vanished. It quickly became apparent that the team and developers took a lot of pride in their respective platforms — iOS and Android. At the time, I didn’t fully understand or appreciate the value in designing for the platform. After doing expensive research with the hope of becoming an expert in platform-specific design standards, the task to rethink and redesign the app’s system icons arrived. After a long, yet successful saga, here are the steps I followed that lead us to a seamless, platform-specific design standard for our Android and iOS icons.
1. Take an inventory of your product’s current icon set
The first step in creating your own icon library for one or more platforms is to take an inventory of your current icon set. What are the different icons your app has in it today? Open your apps on both platforms and take screenshot each page of your app. Bring the photos to your computer and take a screenshot of each icon in your app. Open up Illustrator and paste the screenshots in. Then organize the icons by type. If you find 2–3 icons of the same shape, put them together. Guess what, finding two or three (or more) versions of what was intended to be the same icon is natural for any team or product. Finding the inconsistencies that can be ironed out via this exercise is one of the benefits of an icon redesign initiative.
As you can see, there were several “versions” of any given icon found within the same app. Not a problem — just an opportunity to make them consistent!
Although you will be tempted, this is not the time to decide on whether icons should/shouldn’t be used. Make notes on icons you feel may not be needed during your inventory but don’t let these ideas derail the task at hand, which is creating new icons.
2. Look for inspiration on the best icon for each use-case
Just because your designs show an icon with a certain style today doesn’t mean you should feel stuck with that shape/style. After you’ve taken an inventory and know what icons you have in your product, look at each icon shape and decide if it’s the “best” shape or depiction of the use of the icon. Go to thenounproject.com and do a search for your icon. Find several “best designs” of the icon you’re looking to redesign and leverage them as inspiration. Screenshot them and put them in your illustrator file.
These are some of the best designs I could find for the use-case we needed icons for. I used these as inspiration in creating our icons.
Note: It’s important to remember that end-users must be able to understand the shape for the icon to render the icons effective (Common sense right?). If the design community uses a cool new way to display shopping cart that your end-users may not be familiar with or may struggle understanding, it’d be best not to use that shape. For each icon use-case, stick with the shape/depiction that users will recognize most easily.
3. Set style rules for your new icon set
Now that you know what icons you need designed, it’s time to create a game plan on how you will design your new icon set so they are consistent and feel like they are part of a family. Here are some examples of icon sets that followed a set of consistent rules that turned out beautifully.
These are great examples of icon sets that follow a well-thought through set of rules. They are clean, simple and focus on a single message.
Remember to consider persona research and the brand these icons are being designed for — don’t just design them the way you (the designer) think is coolest. Design the icons so they align with the target demographic user of the product and compliment the personality established by the brand.
Here’s a simple set of rules that I use in the process of deciding what style attributes you want your icons to follow. It’s important to remember that it’s still too early to think about platform-specific stylings — that’s coming up.
4. Create your baseline icons by applying the style rules to your icons
It’s time to go to each icon shape and apply the rules you’ve decided to use for your icon set. Illustrator is hands-down the best tool for icon design. Remember: the first-pass of your newly designed icons are likely NOT going to be ready for any specific platform. i.e. The icons won’t look like “Android icons,” and that’s ok. Once we have a baseline design across all of our icons, we’ll dive deep and get them to-par for each platform.
When designing your icons, be sure to use strokes, not traced objects, with your icons so you can easily change the size or stroke weight at any time.
Notice that these are not yet platform-specific. What I did here was brought all the icons into a uniform style and format within a specific file. From here, “platformification” can happen more simply by applying the iOS and Android guidelines to separate versions of the above icon set.
5. Understand platform-specific icon guidelines
While this is the part many designers may dread, it’s actually not as bad as it sounds. Through the Material Design guidelines Google has produced for Android, Android icon styles are actually extremely clear (almost micro-managing clear). iOS isn’t so prescriptive as Android but you can get a sense of the style of iOS designs by looking at several at a time. Here are links to the respective iOS/Android design documentation for specifics on how to design icons for each platform:
Android: https://material.google.com/style/icons.html#icons-system-icons
iOS:https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/
6. Use platform-default icons where possible
Now that you understand the details on each platform and how they prescribe design styles for system icons, before you jump into applying all these rules to each icon, go through your set and see if the platforms already provide an icon that fits the use-case you need an icon form. This may seem too easy or obvious, but if you have a trash can to represent “Delete” in your app, both Android and iOS have trash can icons and it would be best to simply use their icons. The entire point of designing to be platform specific is so users don’t notice a difference between your icons and the system styles. With this in mind, make it simple for them to scan and find the delete option by representing “Delete” with an image they are familiar with.
7. Make visual tweaks to custom icons so they match each platform
For instances where the icons in your set do not have a native equivalent, follow the rules each platform sets forth and do your best to match the visual styling of the icon with the icon you need for your product. There is no “exact” perfect style for any icon. Generally, users don’t scrutinize any specific design within a product but evaluate the system. So if it has the attributes shared by other icons, it will feel like a natural continuation of the icon family.
8. Export your icons for development
Now that your icons are fully designed, it’s time to export them. Connect with your developers to understand how the app uses icons and get them the file types/sizes they need.
In some cases, it’s helpful to create a visual showing where icons will be replaced throughout the app, like this:
9. Show off your icons
After you’re done designing your new icon set, show them off to your team and the design community. Here are the native icons I designed following these steps for the new release of Fanatics:
Good luck on your next icon design initiative! Ping me with questions — happy to help.
If you enjoyed this post, go ahead and like it so others can find it! Thanks so much.
