Designing Android Icons
(1) Where to get an icon?
- Before you start to design an icon yourself, please search from the material design icon library. Most of the time, there is already an icon that suits your need.
- The material design icon library collects icon which represents a feature or a common action in Android. If you are looking for a broader collection of icons, you can consider the icons8 library.
- If both fails, then make your own icons following the material design guideline.
(2) What is the size?
- Depends on where do you use the icon, usually the size is already defined and you do not need to guess.
- Notification icons 24x24
- Menu / Action bar icons 24x24
- Launcher icons 48x48
- App Shortcuts 48x48
- Other icons - The size in your design with relative to 360. E.g. an icon that occupied 1/4 of the screen width in your design, it is likely to be around 90x90.
- Now the size we have above is called the baseline size. You need to supply icons for screens with higher density. The ratio as below:
- mdpi - 1X
- tvdpi - 1.33X (Not necessary unless you are supporting tv screen)
- hdpi - 1.5X
- xhdpi - 2X
- xxhdpi - 3X
- xxxhdpi - 4X
(3) Any special requirements for each type of icons?
- Notification icons - Always white color and with a transparent background. (Image 1 below)
- Menu / Action bar icons - Light or Dark icon or custom color to suit your action bar's color. Usually 1 color with a transparent background. (Image 2 below)
- App Shortcuts - Usually comes with a round filled background. (Image 3 below)
(4) How to name the icons?
Follow the prefix table below, use only a-z0-9 and underscore. Start the name with a-z.
(5) Useful links
- https://romannurik.github.io/AndroidAssetStudio/index.html - This is useful for generating icons from material design collections. It also serves as designer's reference.
- https://design.google.com/resources/ - All the useful resources and guidelines for Google Material Design.
- https://developer.android.com/guide/practices/ui_guidelines/icon_design.html - Check the "Tips for designer" section.
AI Summary
Chrome On-device AI
2024-09-19 18:41:33
Share Article