What are suggested resolutions for icon designs
Suggested icons sizes for Android app
Suggested icons sizes for iOS app
Following are the sizes with 72 resolutions in Pixels.
The resolution you are using (320×480) is a typical MDPI resolution, so you could basically continue using it, as long as you deliver your graphical assets for the app in other DPI sizes as well:
In iOS, all of this is much easier, as you just have to provide two graphic assets, one for old screens (320×480) and one for new retina screens (640×960).
There are many important reasons to consider for designing an icon for IOS as the guidelines are pretty huge and as their product line up is varied, it requires a different set of sizes.
Here are few sizes as mentioned in the apple developers page.
| 180×180 | Icon-60@3x.png | Home screen on iPhone with retina HD display |
| 120×120 | Icon-60@2x.png | Home screen on iPhone/iPod Touch with retina display |
For a detailed list of other device specs, check out the developer’s page.
Creating effective and visually appealing icon designs requires careful consideration of various design principles and guidelines. Here are some suggested resolutions (dimensions) and tips for designing icons:
- Consistency: Maintain consistency in style, color palette, and visual elements across your icon set to create a cohesive and unified look.
- Simplicity: Icons should be simple and easily recognizable even at small sizes. Avoid excessive details that might become unclear or cluttered.
- Clarity: Ensure that your icons convey their meaning clearly and instantly. A user should be able to understand the icon’s purpose without needing to read labels.
- Scalability: Design icons to be scalable without losing their visual quality. Test your icons at different sizes to ensure they remain legible and appealing.
- Contrast: Use appropriate contrast between icon elements and background to ensure visibility. Consider using light and dark variations of your icon for different backgrounds.
- Size Variations: Create icons in various sizes to accommodate different screen resolutions and platforms (e.g., mobile devices, desktop, web). Common sizes include 16×16, 32×32, 64×64, and 128×128 pixels.
- Pixel Grid: Design icons on a pixel grid to ensure clean lines and edges, especially at smaller sizes. This helps prevent distortion and maintains sharpness.
- Color Palette: Choose a limited color palette that fits your design’s aesthetic and matches the overall theme. Consistent use of colors enhances the cohesiveness of your icon set.
- Negative Space: Use negative space effectively to create balance and enhance readability. Avoid overcrowding the icon with unnecessary details.
- Test and Iterate: Test your icons on various devices and backgrounds to ensure they work well in different contexts. Be open to feedback and iterate on your designs based on user input.
- Platform Guidelines: If designing icons for a specific platform (e.g., iOS, Android), review and adhere to the platform’s design guidelines for icon specifications and best practices.
- Accessibility: Consider accessibility by ensuring that your icons are distinguishable by users with color blindness or visual impairments. Using clear shapes and outlines can help.
- Symbolism: Icons often use symbolism to represent concepts. Use universally recognized symbols or metaphors to convey meanings effectively.
- Balance Detail and Recognizability: Balance the level of detail to maintain recognizability while adding enough visual interest to make the icon appealing.
- User Testing: Test your icon designs with actual users to gather feedback and insights. User input can help you identify any potential issues or improvements.
