An icon is a graphic that will take a tiny portion of the actual screen and offers a fast, intuitive representation of the app or action. Hence, Icons will get people’s attention, which is more efficient than words.
Your icon design for Android 12.0 follows the general specification, and it focuses on three goals:
- The icons of the app merge beauty, simplicity, and purpose.
- Icons make life easier, are easy to understand, and are never overwhelmed with too many descriptions. When people use your app for the first time, it should grasp the essential functions.
- Create and manage the Icon sets for various densities to give the icons in such a way that they will be displayed optimally on any device, regardless of screen size or resolution.
Size and Format
Android icons should be about 32-bit PNGs with the alpha channel for transparency. These finished icons’ dimensions correspond to the provided generalized screen density, which is shown below in the table:
Table 1: Information on a finished icon dimension for every generalized screen density
Low density screen |
Medium density screen |
High density screen |
Extra-high density screen |
|
Launcher icon size | 36 X 36 px | 48 X 48 px | 72 X 72 px | 96 X96 px |
Action Bar icon size | 18 X 18 px | 24 X 24 px | 36 X36 px | 48 X 48 px |
Status Bar icon size | 18 X 18 px | 24 X 24 px | 36 X36 px | 48 X 48 px |
Dialog icon | 24 X 24 px | 32 X 32 px | 48 X48 px | |
List view icons | 24 X 24 px | 32 X 32 px | 48 X48 px |
Let’s see the description for the standard type of icons that are used throughout android applications.
Table 2: Brief information on icons
Launcher icons | Launcher icons on the mobile device are 48×48 dp. The launcher icon is used for displaying on Google Play, which is 512×512 pixels | Full assess,48x48dp | Utilize a distinct silhouette. Front view,3D with a slight perspective as it is viewed from the above so that users perceive some depth | |
Action Bar | For phones action bar icons must 32x32dp | Full asset,32*32dpOptical square,24*24dp | Flat, not too brief, Pictographic, with the shart shapes or smooth curves. If the graphic is thin, it rotates 45 degrees left or right to fill focal space. The thickness of the stroke and the negative space is a minimum of 2dp | Colors: #333333 Enables:60% opacity disable: 30% opacity colors:#FFFFFF Enables:80% opacity disable: 30%opacity |
Small icons | 16x16dp for the contextual icon | Full asset,16*16dpOptical square,12*12dp | Neutral, simple, and flat. Filled shapes are easy to view in comparison to strokes. It uses a single visual metaphor so that an app user can recognize and understand its purpose | Make use of the non-neutral colors with their purpose. Likewise, Gmail uses yellow in its star icon to indicate the bookmark message. If the icon is actionable, select the color that contrasts with the background |
Notification icon | 24x24dp | Full asset,24*24dpOptical square,22*22dp | Flat and simple,visual metaphor as the launcher icon | Icon notifications are entirely white. A system may scale down or darken the icons |
Tips for designers
1. Utilize vector shapes
Use the vector shapes whenever possible; if a need arises, then assets are scaled up without losing any information. Vectors easily align the edges and the corners to pixel boundaries at smaller resolutions.
2. Begins with the huge artboard
You are required to create the assets for the various screen densities; starting your icon designs on the large artboards with multiple target icon size dimensions is best.
3. Scaling, Redraw the bitmap layers as required
Suppose you scale the image up from the bitmap layer instead of the vector layer, then those layers are redrawn manually to view the crisp at any high densities.
4. Save image assets, and remove unnecessary metadata
Android SDK tools automatically compress the PNG when packaging app resources into the application binary; a good practice is to erase unnecessary headers and metadata from the PNG assets. Tools like OptiPNG or PngCrush assure that this metadata is removed and your image file size is optimized.
5. Corresponds assets for the multiple densities by using the similar file name
A corresponding icon assets file for the individual density using the same name is stored in density-specific resource directories. It grants the system to look up and load a proper resource per the gadget’s characteristic. Hence, ensure that a set of the assets in each directory has consistency and that particular files do not use density-specific suffixes.
Downloads Android icons
a. The android icon template pack
This template pack is a library of template designs, textures, and layer styles that makes it easy for you to build icons that follow any guidelines. A template icon is offered in the Adobe Photoshop file format that preserves the layers and design treatments used while creating the standard icons for the android platform.
b. Action Bar Icon Pack
These graphic buttons represent the most important actions people take with your app. A download package adds icons that are scaled for the multiple screen densities, and it is suitable for use with Holo light and Holo Dark themes. It also has unstyled icons that can modify to match your theme, plus source files.
c. Color swatches
Use the primary color for the emphasis. Select the colors that suit your brand and offer a contrast between the visual components. Each color has a corresponding darker shade, which is used as a complement when needed.
Conclusion
Through this blog, you get a clear idea of the design specification for the particular device size. If you need to develop a mobile application for your enterprise, you can hire the award-winning android mobile app development company, who will be happy to help you!
Frequently Asked Questions (FAQs)
1. Define the importance of icons in android
An icon represents your brand image, conveys its story, defines the app’s purpose, views uniqueness on the user’s device screen, and inspires the users to download and launch an app.
2. What are the app icons important?
It is the first point of engagement for a user. The icon increases download by 80%. However, of the options available for a particular search, a pictorial representation will catch the user’s attention and keep them away from unwanted apps.
Get a free consultation