I'm building an app with Flutter, and right now when I run the project in the simulator, the Flutter logo shows up.
I already have a logo, but if I just apply it as-is, it doesn't look as polished as existing published apps because I hadn't considered padding or sizing.
So I looked into how to properly adjust the padding and size.
Since I made my existing logo using Figma, I searched the Figma community for an easy way to create app icons.
This App Icon Toolkit - iOS/macOS/Android toolkit shows keylines and various examples, so I can apply my icon to the component and easily preview how it looks. Even if you're not great at design, you can adjust padding and size by feel.
One thing to note is that inside the Icon_Art frame, Material - Grid and iOS - Grid are both visible at the same time. So it's better to choose one and either delete or hide the other. I chose iOS - Grid. Also, the bg layer makes the lines hard to see, so it's better to hide that too.
I used a 1024x1024 canvas with 892x892 as the main frame, making sure the logo fits inside the circle. Except for special cases, logos should generally fit within the circle. You can add padding within the circle if needed.
If you give 66px of left-right padding, 1024px becomes 892px. Then if you add another 66px of padding inside the 892x892 frame, you get 760px. So the logo is placed in a square that has 132px of left-right padding from the 1024px canvas.
For my logo size, this felt neither too big nor too small (sorry I can only explain this by feel since I'm not a design major).
Here are some additional links about app icons that I'd recommend checking out:
- An alternative Figma file to the App Icon Toolkit: Icon Grid Templates
- App UI Design Basics: Concepts and Guidelines for Icon Design - UX/UI Design Course 2-4
- Drawing iOS Apple Icons - 1. Grid Template Keyline
- Google Play icon design specifications
- Apple Developer App Icons
Once I've finalized the app icon design, I'll write about how to apply icons in Flutter later!
A fine quotation is a diamond on the finger of a man of wit, and a pebble in the hand of a fool.
— Joseph Roux
