Mobile application icon. The best icon sets for Android. Requirements for icons
1. Device screen resolution
Android apps are designed keeping in mind the device size and screen resolution.
Graphics and layout in applications are measured in units of DPI (dots per inch).
- Low DPI (LDPI) = 120DPI
- Medium DPI (MDPI) = 160DPI
- High DPI (HDPI) = 240DPI (Nexus S, SGS2)
- Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
- Extra Extra High DPI (XXHDPI) = 480DPI ( HTC One and SGS4)
Size and format of application launcher icons for Android
The application icon should be designed specifically for Android. Use the instructions for designing Android style icons Material Design, don't imitate visual elements and styles of other platforms.
The application launch icon must be 32-bit, in PNG format with an alpha channel (with a transparent background).
Base size - 48dp, with edges 1dp - for low resolution. The higher the screen pixel density (DPI), the more detail is displayed. For other resolutions you need to increase the scale by 400% 192 x 192 dp (with 4dp edges).
Do you want the perfect icon for any resolution and are not looking for easy ways? Make some icons different sizes for all resolution options using the table below. Can be enabled additional meanings for progressively larger sizes. For example, 96 x 96 pixel xhdpi icons might contain an intermediate size of 88 x 88 pixels with 4 pixels of padding on each side. The indentation creates a slight shadow and ensures that the icon is clear on any background.
|
XXXHDPI (640dpi) |
|||||
You, of course, remember: any scaling must preserve the proportions of the image.
Application icons for publishing on Google Play
The application icon for publishing on Google Play must be 512 x 512 pixels, high resolution.
This icon is used only for Google Play and does not replace the application launcher icon. The publish icon on Google Play should contain the same content as the app launch icon, with the exception of some identifying marks.
- JPEG or 24-bit PNG (no alpha channel)
- 1024 x 500 pixels
Location
- Do not post important information along the edges, especially in the lower third of the frame.
- Place the logo in the center, aligned horizontally and vertically.
- For text, use large font.
- Remember that the picture can be shown separately, without the application icon.
Application icon goals
The app icon has 3 main purposes:
- Brand promotion, story about the purpose of the application.
- Helping the user find an application on Google Play.
- Launch function.
Brand promotion
Create a unique and unforgettable icon. Use color scheme Your brand. Don't try to say too much with an icon. A simple icon makes the best impression. Do not include the application name in the icon - the name will always be shown next to the icon.
Application icon samples.
Help the user find the application on Google Play
The icon should attract the user's attention while scrolling. A high-quality icon design is a clear signal that your application is of the same high quality.
To develop an application icon, it is better to contact a designer.
Android Icon Design Rules
- Looks detailed and clear in a small size.
- Combines with any background.
- Illuminated by overhead lighting.
- May have a unique shape.
- This is not a cropped version of the larger image.
- Has the same weight as other icons.
For a 3D icon:
- The perspective does not contradict other icons.
- It is located in the direction of travel.
- Has little depth.
Icons that are too long and take up little space do not attract users’ attention and do not fit well with various backgrounds.
Right and wrong
Icon for the application on iOS
Dimensions
Every application should have a small and a large icon. Small icon used on home screen and in the system after installation. A large icon is needed for App Store.
It is necessary to create several small icons of different sizes for various devices. The small and large icons should match each other, but may differ in the amount of detail.
Also small icons are needed for display:
- V Spotlight search,
- in the smartphone settings application.
If you don't have small icons, iOS will reduce main icon applications to display in these directories.
| Device | Icon size in Spotlight search | Settings icon size |
| iPhone 6s Plus and above, iPhone 6 Plus and above | 120x120px | 87x87px |
| iPhone 6s and above, iPhone 6 and above, iPhone SE and above | 80x80px | 58x58px |
| iPad Pro, iPad, iPad mini | 80x80px | 58x58px |
Attention:
Don't add an overlay or border to the settings icon. iOS automatically adds 1 pixel padding to all icons to make them look good on a white background in the settings options.
Icon design rules for iOS:
Captivating simplicity
Find an element that conveys the essence of the application and place it in a simple, memorable form. Carefully add details. Too complex content or shape of the icon is difficult to distinguish, especially in reduced sizes.
Clear Focus
Create an icon with a clear focus that attracts attention and identifies the application.
Recognition
No one will analyze the icon to understand its meaning.
For example, as an icon mail application Traditionally, the image of an envelope is used, which is associated with mail. If you want a good icon, spend time developing an abstract symbol that is attractive and understandable to everyone.
No transparency, simple background
The icon should not be transparent and the background should not be cluttered. A simple background doesn't overwhelm other elements nearby.
Without inscriptions
Use lettering only as part of the logo. The application name appears below the icon on the home screen. Do not add words to the icon that repeat the name or are instructions for the application, for example, “Watch” or “Play”. If the icon design includes words, add only those that are relevant to the application's content.
Without photos, screenshots and interface elements
Do not include photographs, screenshots, or interface elements in the icon. The details in the photograph are difficult to see in small size. Screenshots don't tell you the purpose of the app. The interface elements in the icon mislead the user.
Without exact copies Apple products
Don't place the application icon everywhere in the interface
The user may be confused by the application icon appearing all over the interface. Just use the icon color scheme in the interface. See Color.
Test the icon on different wallpapers
People choose different wallpapers for their home screens, so you should test the app icon on different backgrounds.
Keep icon corners square
The system rounds the corners of the icon automatically.
That's all! We wish you good luck and a lot beautiful icons for your applications.
Icon- this is conditional graphic icon, which represents a tool, program, or application on the screen. Interface operating rooms systems built in such a way that virtually any an object presented as an icon. Icon design is useful for quick search by interface. At a time when text merges into a single heap, concise and precise icons for mobile applications help users easy to determine where are required applications . If you develop a logo mobile application qualitatively, the user will immediately guess it functional without even reading the description.
You'll get
personal project manager
the designer will draw 7 different concepts
application market research is being conducted
iOS Human Interface Guidelines and Android Design Guidelines
Each icon for the main menu interface of Android applications must be represented laconic graphic elements. They are unified according to the standards provided in the directory Android Design Guidelines. The palette should be consistent in a single stylistic direction.
The latest trends in icon design allow a person choose from several color themes, as they did in the set Moonrise. This icon pack is one of the best for TalkAndroid. It attracts not only with its rich dark colors and original icons, but also a huge amount icons to choose from. There are 580 of them in total.
Unlike strict canons for developing a menu interface, icons for gaming applications must captivate with their brightness and originality. They hint to the user about the joyful leisure time that awaits him.
Development of icons foriOS
iOS application interface kits have several unifying factors: color scheme, size, perspective and drawing style. One of the most popular themes for iOS is 0bscure7. Laconic design of black and white blocks with text description gathered many fans among users. The set contains over 670 application icons. The icons look stylish on geometric or monochromatic backgrounds, but the theme doesn't go well with photos. This feature is clearly visible in the illustration.
Making 3D icons for applications is becoming more profitable. After all, three-dimensional elements are better perceived by the user. Bright colors, naturalistic textures, watercolor stains evoke admiration and pleasantly please the eye.
Principles of creating application icons
Icon design development: color meaning
Color influence and their combinations per person undoubtedly. Historians and art historians, such as Michel Pastoureau, create huge monographs that devote to the history of colors and their interpretation in the creation of people.
Comparison of red and green most clear example in color indication. Red- bright, defiant and attractive to users. It is suitable for developing icons for gaming or sports applications, because red is often the color of challenge or competition. Green- more calm and peaceful, it is successfully used to refer to banking and office applications. It is incorrect to say that red negatively affects conversion and user perception. This can only work if you place green next to it.
Color perception It has changed quite a bit over time. During the Middle Ages yellow was the color of treason and dementia, Judas' clothing was often painted in a shade of light yellow. Now yellow has practically lost its negative properties; now it is the color of happiness, sun and warmth. It is used for their applications SprintDHL, Velloe AndNikon.
Blue- one of the most popular color solutions for designing application icons. Logos Vkontakte, Skype, Facebook, Twitter, LinkedIn, Telegram created using different shades of blue. It is considered ideal for communication: calm and balanced, concentrates attention well and does not overload vision. And in the era of Rome it was the least favorite color. It was avoided so much that a theory was born in science that the people of Antiquity simply did not perceive such a shade. Blue color was considered intimidating and unpleasant, and blue eyes were almost a physical handicap. Several centuries have passed and now it is one of the most common and popular colors. Therefore, KOLORO employees are always open to experimentation; we use unusual solutions that will become a style icon over the years.
Orange, violet and magenta colors- new favorites of developers. They are used by Viber, YAHOO!, Hallmark, Amazon, Kodak and Instagram.
KOLORO designers are excellent color specialists. We know and understand the history of each color, and are happy to We use our knowledge to create icons and, and over time it will become a unique symbol. Secondly, the target audience such applications has many differences: age, gender, religion or region of residence. And each user has his own idea of a color, a symbol, a gesture. The simpler the icon, the faster everyone will like it. In addition, you need to consider the size of the devices on which the applications will open. Simple geometric shapes will look advantageous and clear in any size. Oversaturation of the icon will provoke an incomprehensible conglomeration of colors and shapes when it is reduced to 120x120.
Order icon design for applications from KOLORO. We create unique icons that attract users' attention and increase business profitability.
Contact managers right now
After my acclaimed article “” (“Let's talk about white app icons”), which I admit was written in a slightly didactic tone, I decided to write another more constructive and practical article about design cool icons. This article is suitable for anyone: from beginner to professional. In it I will talk about the magic of icons and how to make their design even better.
In the video above, I talk about the five main aspects of icon design in 10 minutes and give real examples how I work with these aspects. The video contains a lot of stories, tips and pixels, and I hope that it will be interesting to everyone: both beginners and experienced designers. If you want a little more context, read on. I promise there will be bullies.
To start
Design of one single object graph. design that users will interact with every time they use a product can seem like a daunting task. A beautiful, recognizable and memorable icon can greatly influence the popularity and success of an application. But how exactly do you design a “good” app icon? What does this even mean? Fear not, I've put together some tips to help answer these questions. This article is your guide to designing cool icons.
What is an “application icon”?
The first thing you need to understand when starting to design is what an “application icon” is and what task it performs. An app icon is the visual anchor of your product. You can think of an icon as a small branding element that should not only look nice and stand out, but also convey the main essence of your application.
You can create icons in any editor that supports creating raster files. Typically, Photoshop, Illustrator and Sketch are used for this. Free tools like appicontemplate.com offer convenient PSD templates that will be an excellent help at the initial stage.
5 Key Aspects
Now let's explore some best practics designing application icons. We'll look at each of the five key aspects separately, and for each I will give some advice and give examples. Most of the examples are mine own works. This does not mean that my works are the best, but when creating them, I relied on the information that I presented in this article. As you read about each aspect, try to imagine your favorite icons and see in them what I will talk about. Well, let's get started.
1. Scalability
An app icon should look good in different resolutions and convey the essence of the concept regardless of size.
One of the most important aspects icons — this is scalability. The icon will be used in different sections of the platform and displayed in different sizes — so it’s important that it remains unique and clear at all times. The icon should look good in the App Store, on a retina display, and in the settings panel.
Overly complex icons that are overloaded with details tend to scale poorly.
When designing an app icon, you should pay a lot of attention to how gracefully your chosen design scales.
- The 1024x1024 canvas can be deceiving - be sure to test your design on a “live” device, in different contexts and sizes.
- Keep it simple and focus on one thing; it is preferable that it be some kind of unique shape or element that retains its properties and quality well when scaled.
- Make sure the icon looks good on different backgrounds.
2. Recognition
Icons can be detailed or simplistic, as long as they are creative, interesting, and accurately convey your intent.
The app icon is like a song: it is very important that it is easily recognizable among other tunes in the store (that is, other icons on the home screen). And just as the melody of a song touches the soul of the listener, the shapes, colors and idea of the icon should touch the user.
The design must convey a memorable and coherent image on both a functional and emotional level.
Your icon will compete for the user's attention with thousands of other icons of the same size, which also have their own intent and try to attract attention.
For recognition, not only scalability plays an important role, but also novelty. The main difficulty when designing an icon is to find a balance of these qualities.
- Tasteless, overloaded icons are the enemy of recognition. Start cleaning unnecessary details, as long as this can be done without compromising the concept. Then stop and analyze — has it gotten better? Has recognition increased?
- Create several different design variations. Place them side by side and look at them all at once. Notice which aspects of the design attract attention.
- Try to break down your favorite icons into their components and try to understand why you like them and why they attracted your attention.
3. Consistency
When the icon matches the interface, it visually reinforces the message of your app.
It is also important to achieve consistency between the process of interacting with the icon and the process of interacting with the application.
It seems to me that a good icon is a continuation of the idea of the application. If the icon and interface are consistent, the application will be better remembered by the user.
It is necessary to form a single, holistic image of the application in the minds of users - this increases overall satisfaction from using the product, and also promotes retention existing clients and attracting new ones.
In short, if your icon harmoniously complements the idea, functionality and design of the application, you can consider this a big win.
- One way to achieve consistency between your app and icon is to stick to one color palette and use a similar “design language.” For example, a green interface can be enhanced with a green icon.
- The following method is not always possible, but still: try to use symbols in the icon design that are directly related to the functionality of the application.
4. Uniqueness
Apps on the App Store in the Productivity category are a great example of a lack of uniqueness in design.
This one is pretty obvious: try to create something unique. Okay, you can use an existing style or trend, but make it your own!
Your icon will compete for the user's attention with other icons — and original design can be a great advantage.
Uniqueness is a tricky aspect of design: it's not just your skills that play a role, but also design solutions other “players” on the market who are trying to solve the same problem.
- Study what other designers in your niche are doing, and then try going in a different direction. Do some good research — the world doesn’t need another check mark icon.
- If you're aiming for uniqueness, a simple glyph on a plain background is a questionable strategy. Play with different colors and compositions and challenge yourself to find new, interesting metaphors.
- Color is great way to present an old concept in a new way (although many people miss it).
5. Don't use words
This is the most painful topic of all time. Only in very rare cases are words allowed in icons. I believe that if a designer resorts to using words, then he is not fully using his arsenal of images.
Words and pictures — it’s absolutely different instruments representation. An icon should serve as a graphical representation of the application, and if it is mixed with words and images, the result is cluttered and unfocused — and it’s harder for the user to grasp the idea of the icon. Well, was it really not found? the best way depict the idea of an app rather than just saying it in words? When I see icons with words, it always seems to me that the designer simply could not convey his idea more clearly.
Creating your own tag
There are a lot of boring and banal icons in the App Store and Google Play. Your icon is your strongest connection with the user. This is where your acquaintance with the application in the App Store begins. This is what the user interacts with every time they open the application. When an app has a poorly designed, ugly, or inappropriate icon, it loses its most important visual asset. The application icon is not an add-on that is remembered last, but an important part the entire application development process.
An application icon is a small piece of concentrated design. If you want to create a good icon, there are a number of aspects that you need to think about. Scalability, recognition, consistency and uniqueness — all of these aspects exist in other areas of design. If you learn how to create cool icons, you will improve your overall design level.
All icons — detailed and simplified, creative and ordinary — have something in common: they are the same in size, they all try to stand out from the competition and attract the user’s attention. This not an easy task, and the solution always lies within the same fixed number of pixels.
Of course, the designer may feel insecure: is it a joke to develop graphical representation entire application! But I hope that my advice will help you gain confidence and take on your work with confidence. Now go ahead — create a fantastic icon for your app!
Mental notes are a deck of 53 cards describing the psychophysiological patterns of human behavior that underlie the principles of web design. They help designers and planners better understand user behavior and find effective solutions when creating interface designs.
Icons are design components that you can't do without. Sometimes it's hard to find good ones mobile kits icons, and here is my list of 11 free ones mobile packages icons that I find particularly useful. There are many more packages that I haven't included in this article, but this list is a good collection for every designer's toolbox.
1. A General Vector Pack
No matter what mobile operating system you create a design, you will always need basic images of phones and other mobile devices. This icon pack contains many similar images. This general package vector icons of phones (mobile and landline), tablets, handsets and other items related to mobile calls and mobile use.
The icons are black and white, but since this is a vector pack, you can always add more color and/or change the icon sizes if you want.
2. Flat Phone Vector Icons
If you need more phone icons and prefer flat icons, check out these phone icons. This ordered package contains about 200 flat icons phones and other items related to mobile devices. Again, the package is black and white, but it has vector background, so it won't be difficult to change the colors and/or size of the icons. You can download either the entire package, or just the icons you need.
3. A Huge Megapack of iPhone, iOS7, Android andWindows 8 Icons
This huge mega pack of 10,000 icons for Android, iPhone, iOS7 and Windows8 is probably one of best resources, which can be found on the Internet, and it is free for both personal and commercial use. Once you download it, all other packages may become useless as it contains many useful icons.
10000 iPhone icons, Android, Windows8 and iOS applications- different sizes, for example, 20 × 20, 30 × 30, 60 × 60, 114 × 114, 512 × 512 and more. They are also equipped with extras and source files. Undoubtedly, every mobile designer should have this mega package. In addition to this free package, the authors offer paid version with over 80,000 icons.
4. Mixed Android Icons and More
Compared to the previous pack, this icon pack is not as impressive, but still has good Android icons that you can use in your personal and commercial projects. This is a pack of mixed icons for Android - icons for devices, general items, basic UI elements, etc.
This is not the only icon pack on this site. There are many other Android packages such as network icons, photo and video, flat user interface, purchasing goods, etc. If you're looking for icons on a specific theme, just browse the site to see what's still available.
5. Another Mixed Android Icons Pack
This icon pack is also for Android, but the icons are different from other packs. It's a relatively small pack of about 30 icons, but it's useful because it contains icons popular applications and sites, as well as settings, voice search etc.
Unlike the previous pack, the icons are colorful, but the downside is that they are only in PNG format, no vectors, which limits your editing options.
6. 350 Free Android Icons
Another pack of organized icons for Android. This is a large package - it contains 350 icons grouped into several categories, such as Basic, Buzz, Arrows, Shopping, Photo and Video, Music, Users and etc. The icons are not colored, but they are available in various formats, such as PSD, AI, EPS, SVG and PNG, so it's easy to edit them to add color or other modifications. By default, icons come in several sizes - from 24 to 512 pixels, but again, you can change the size if necessary.
7. More Free Android Icons
Unlike other Android icon packs, this pack is not for developers, but for end users. This pack can be used to replace native Android icons. However, since the package is huge - 207K (yes, thousands) of icons, chances are an Android designer will find quite a few icons to use - if not for their intended purpose, at least for inspiration. Not all icons are free, especially for commercial use, so check the license before using them.
8. Action Bar Icon Pack from Google
If you want icons from Google itself, you can look at the Action Bar Icon Pack. To download the package, click here. The icons in the pack are optimized for different screen resolutions and work best with the Holo Light and Holo Dark themes.
The package contains about 150 icons for ordinary actions, such as basic types of work (copying, pasting, editing, etc.), navigation, ratings, collection, content, social networks, location, camera, media, access devices, Hardware, alerts, and additional actions. Icons are in PNG format, which is not as good as vector icons, due to the limited PNG editing options it offers, but that still doesn't make the package useless.
9. iOS7 Line Icons
After the series Android icons, it's time for iOS. The first iOS icon pack is free package iOS7 Line Icons. The pack contains 80 icons in AI, PSD, SVG and PNG (and PNG@2x) formats. The icons cover a variety of categories - from calls to photos, music and navigation. The package mainly contains icons for iOS7, but there are also a few for iOS8. The package is free, but you must enter your address Email to receive the download link.
10. iOS7 Tab Bar Icons
If you are looking for tab bar icons for iOS7, check out this set. The package contains 36 tab bar icons for iOS7 in PSD format. Among other things, you will find icons for Inbox, Copy, Trash, Logout, Settings, Locked, etc. This basic package, but if you don't need more than that, you'll be comfortable with what you have.
11. An Android, iOS7, iPhone, and Windows8 Megapack
This is the second mega pack in this list and this pack includes icons for Android, IOS and Windows. This huge pack contains 175K icons in PNG formats and PSD. It also comes with several extras - icons in categories such as General, Accounting, Business, Database, Education, Graphics, Multimedia, Networking and Web Design. Account, Business, Database, Education, Graphics, Multimedia, Network and Web Design).
Conclusion
Your app or website may be chock full of features, but without quality icons, it may go completely unnoticed. Even if you can't create icons yourself, there are many alternatives, including free ones. Some of the best icon sets for Android, IOS, iPhone and Windows8 are free and I have included them in this article. Of course there are many others that didn't make the list, if you have any other suggestions we'd love to see them in the comments below.
