The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (2024)

The Complete Guide To Designing App Icons with Adobe Illustrator https://logosbynick.com/wp-content/uploads/2020/12/design-app-icons-with-illustrator.png 800 470Nick SaporitoNick Saporitohttps://secure.gravatar.com/avatar/d9a1bc4f29b2352da1ce14ad033328ab?s=96&d=mm&r=g

In this tutorial I’ll be demonstrating how you can design your own app icons with Adobe Illustrator. I’ll be going over what the design guidelines are for both iOS and Android, setting up the artboard for app icon design, and then exporting your icon in all of the required sizes and formats.

For a more immersive learning experience I would recommend checking out the video tutorial below. Otherwise the written tutorial should serve you well enough.

App Icon Design Guidelines

Before we begin designing app icons with Adobe Illustrator, we first need to comb through the design guidelines for both iOS and Android so that we can abide by them. Both platforms have the capacity to reject designs that fail to meet their specifications, so it’s important to have this information before beginning.

Guidelines for iOS

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (1)

Apple has outlined a series of design guidelines for designing app icons for their operating system. It is highly recommended that you read through these guidelines before proceeding so that you can be sure that you’re abiding by them when creating your design.

Best Practices

In summary, here are some best practices for designing app icons for the iOS platform…

  • Provide a single focus point. Trying to communicate too much creates confusion. Pick a single idea or concept that you’d like to communicate and focus on that.
  • Use a simple background and avoid transparency. Don’t let your background draw too much attention from the focus point.
  • Avoid using words unless they’re part of your logo. The name of your app will be displayed within the operating system, below the app icon, so it would be redundant to include the name of the app in the icon.
  • Avoid using photos, screenshots, and interface elements. Apple advises against using imagery with lots of details that are difficult to make out at small sizes, as well as interface icons that can be misleading.

This is just a summary of some of the more important guidelines to abide by. Make sure to check the developer guidelines for the complete list!

Rounded Corners

One thing you may have noticed about app icons on the iOS platform is that they all have similarly rounded corners.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (2)

All app icons in the iOS operating system have rounded corners.

This is because Apple applies a mask to each icon that gives it a rounded corner.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (3)

App icons are to be designed with squared corners. A mask will be applied on the OS end to give the icon rounded corners.

This means that when you are designing your app icon in Adobe Illustrator, you do not need to add rounded corners to your design. It is required that your icon be submitted with squared corners. Apple will apply the mask to give your icon rounded corners once you’ve uploaded your artwork.

Icon Sizes

Because your app icon is going to be used in various different contexts — including the home screen, the app store, in notifications, and so on — you’re going to need numerous different sizes. This is also to accommodate different devices and screen resolutions (iPhones, iPads, etc.)

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (4)

App icons are used in a variety of sizes and contexts, meaning you’ll have to provide size variations of your design.

The sizes specified by Apple’s developer guidelines are as follows.

Dimensions (in pixels)
  • 40 x 40
  • 58 x 58
  • 60 x 60
  • 80 x 80
  • 87 x 87
  • 120 x 120
  • 152 x 152
  • 167 x 167
  • 180 x 180
  • 1024 x 1024

It should be noted that these sizes may change over time, so it would be wise to check the developer guidelines page just to be sure.

Guidelines for Android/Google Play

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (5)

Much like Apple, Android has also produced guidelines that should be followed when designing app icons for the Android operating system. These guidelines aren’t too different from Apple’s, but there are some differences worth noting.

Rounded Corners

Android used to be a little more accommodating to those of us who like to get creative with app icon designs — mainly as it pertains to the shape. There was once a time when your app icon could be designed in any shape you’d like.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (6)

In the past, Android allowed app icons with custom shapes.

Unfortunately, Android has since adopted an Apple-like policy in requiring that app icons have square corners so that a rounded mask can be applied on their end. Their reasoning is as follows…

Uniformed shapes are visually more appealing and easier to digest. They help users focus on the artwork, as opposed to the shape. They fix alignment issues caused by random open space to better present surrounding information, such as the title, rating, and price.

The good news for us, as designers, is that we no longer need to make different icon designs for both the Android and iOS operating systems. If your design abides one set of guidelines, chances are it abides by the other as well.

The bad news is that our creativity has been a little more restricted.

Sizing

Although your app icon will be used in just as many sizes on the Android platform as it will on iOS, you won’t have to produce nearly as many sizes. In fact, there’s only 1 size required.

Dimensions (in pixels)
  • 512 x 512

And that’s it! Smaller copies will be rendered by the operating system as needed.

Keyline Grids

The Android developer guidelines recommend using the provided keyline grid for reference when designing your app icon.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (7)

Credit: Google Play icon design specifications

The keyline grid can be downloaded and imported into Adobe Illustrator, and is intended to be referenced when determining the size and position of your logo, icon, or artwork.

To be safe, it is recommended that you keep the primary artwork (excluding the background) within the 384 x 384 pixel area centered within the icon. If your logo is a circle, try to make the circle the same size and position as the circle in the keyline grid. And the same goes for all of the other shapes.

Other Best Practices

Finally, here are some miscellaneous best practices for designing your Android app icon, according to Android.

  • Don’t force your artwork to the full bleed. Use the keyline grid as a reference.
  • Don’t scale backgrounds and full frame illustrations to fit the keylines.
  • Don’t add drop shadows to your icons. They will be applied on the OS end.
  • Avoid adding tags and badges to your icon. This includes labels, text, logos, sales and promotions.

These are just a few. Be sure to check out the Android and Google Play Store developer guidelines to ensure that your design abides by their specifications.

Design an App Icon with Adobe Illustrator

Now that we’ve gone over some critical specifications and best practices for designing app icons for the two major mobile operating systems, we can begin the process of designing app icons with Adobe Illustrator.

The following is just a summarized overview of the steps we’ll be taking to design our app icon in Illustrator. For a more detailed explanation, it is advised that you watch the video tutorial at the top of the page.

Step 1: Set Up The Artboard

The first thing we need to do is create a new document and set up the artboard to be sized at 1,024 x 1,024 pixels. This is the largest size required of either operating system, so it makes sense to design it at its largest so it can be scaled down as needed.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (8)

The artboard should be sized for the largest icon, which is 1,024 x 1,024 pixels.

Because of how powerful Illustrator’s Export for Screens feature is, we won’t have to manually reproduce all of the needed sizes. We can simply design it at a single size and then render variations at scale later on.

Step 2: Set A Background

Now we’re going to create a background for the app icon. This can be a pattern, a gradient, or a solid fill. For this demonstration I’ll be using a blue gradient.

Simply create a rectangle and size it to fit your artboard. You can do this with the Alignment Tool or by enabling Smart Guides (control + u) so that it snaps to the corners of the page. Make sure the rectangle doesn’t have a stroke applied.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (9)

For this demonstration, a background with a blue gradient is used.

Go ahead and fill in your rectangle with whatever you’d like. Please refer to the video tutorial for instructions on how to apply a gradient to the background of your app icon.

Step 3: Import Your Logo/Design

Next, we’re going to import a logo, icon, or some other kind of graphic for use as the focal point of the app icon. Ideally, this should be a vector file (files that end in .ai, .eps, .svg and sometimes .pdf) for compatibility and scaling reasons.

If you don’t have a graphic to import then you can use a letter, number, symbol, or create a logo of your own using one of my logo design tutorials for Illustrator. For this demonstration I’ll be using a sample logo design. This is an unused concept from a past client project. It’s an abstract depiction of a letter W.

To import your artwork, navigate to File > Place and then choose the file you’d like to import. Then, center it up on your document and scale it so that it fits nicely within your background, with modest padding around the edges. Refer to the previously mentioned keyline grid if you plan to use this design for the Android operating system.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (10)

Center your artwork over the background, then scale it as needed.

At this point you can proceed to style the focal point of your app icon however you’d like. For this demonstration I have applied a long shadow to the logo, just to give it a little pop.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (11)

For this demonstration I’ve applied a long shadow to the logo.

This isn’t a necessary part of the lesson, but I have included instructions for how to do this in the video tutorial at the top of the page.

Step 4: Export Your Work

Once you have finished styling your app icon design with Adobe Illustrator, it’s time to save your work and then prepare for it to be exported to all of the different sizes required.

First, save a vector copy of your work (in .ai format) so that you’ll always have an editable master file on hand. To do this, navigate to File > Save As and choose a place to save your work.

Now, we’re going to open the Export for Screens menu by navigating to File > Export > Export for Screens, or by pressing control + alt + e on your keyboard.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (12)

The Export for Screens menu allows you to export your app icon in a variety of sizes with a single click.

From the menu, we want to designate a location for the app icons to be rendered in, and then define the file format and scale.

For each size that we need to render for our app icon, we want to add a new scale and use the following presets for each size…

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (13)

Add a scale for each size needed for your app icon.

Important to note…

  • Beneath the thumbnail preview of the icon design, make sure to define the name of the file to be exported. For this demonstration I am simply naming the icon “icon”.
  • From the Scale dropdown, make sure to choose Width so that you can manually define the size.
  • In the Suffix field, type in the size so that each app icon will have its size added to its name so that they’re easy to distinguish.
  • PNG format is what’s required for use at the app icon design, so that needs to be the export format for each size.

Once you have your scales and presets defined, go ahead and click the Export Artboard button to render your app icons.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (14)

All of the app icon sizes have been rendered and are ready to be uploaded.

Your newly-designed app icons are now finished and ready for submission to Apple and/or Android!

Conclusion

Designing app icons with Adobe Illustrator is a simple and enjoyable process thanks to some of its more useful features, like the Export for Screens menu. In other applications you’d have to manually create duplicate copies of each app icon, resize them, then export them one by one. Luckily Illustrator makes this process easy.

If you have any questions, or if any part of these instructions were unclear, simply leave a comment below. As always, thanks for visiting!

Learn To Master The Software

Gain a complete understanding of your favorite design apps with my comprehensive collection of video courses. Each course grants access to our private community where you can ask questions and get help when needed.

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (16) 81 Videos

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (17) 11 Modules

The Inkscape Master Class

Tutorials, quizzes and practice exercises for learning every tool & feature in Inkscape.


The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (18) Nick Saporito

Price: $17

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (20) 77 Videos

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (21) 7 Modules

Affinity Designer Master Class

Tutorials, quizzes and practice exercises for learning every tool & feature in Affinity Designer.


The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (22) Nick Saporito

Price: $17

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (24) 98 Videos

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (25) 7 Modules

Illustrator Master Class

Tutorials, quizzes and practice exercises for learning every tool & feature in Illustrator.


The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (26) Nick Saporito

Price: $17

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (28) 70 Videos

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (29) 9 Modules

GIMP Master Class

Learn how to use all of the primary tools and features in the GIMP application.


The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (30) Nick Saporito

Price: $17

View All Courses

The Complete Guide To Designing App Icons with Adobe Illustrator - Logos By Nick (2024)

FAQs

How do I create an icon in Illustrator? ›

Create an icon
  1. Draw a circle. ...
  2. Double-click the Scale tool. ...
  3. Select each circle and apply a different fill color.
  4. Select both circles and from the Effects menu, experiment with Pucker & Bloat. ...
  5. Choose an effect you like; we're making a clover.
  6. We added a stem with the Arc tool and adjusted the color and stroke.

How to design a logo in illustrator? ›

How to make a logo in Illustrator
  1. Start with the creative brief. Before you even open Illustrator, you need to have a well-written brief from your client. ...
  2. Find your keywords. ...
  3. Sketch your ideas. ...
  4. Refine your sketches. ...
  5. Get client feedback. ...
  6. Digitize your sketch. ...
  7. Add text. ...
  8. Add color.
Nov 24, 2022

How to design mobile app icons? ›

To design a good app icon, make sure that the colors align with your brand. Take the time to think about how to make your icon stand out in the search results: Bright colors can help an app attract the user's attention. Don't use too many colors either – one or two main colors should be enough.

How are app icons made? ›

Find a concept or element that captures the essence of your app or game, make it the core idea of the icon, and express it in a simple, unique way. Avoid adding too many details, because they can be hard to discern and can make an icon appear muddy, especially at smaller sizes.

Does Illustrator have logo templates? ›

Check out free logo design templates.

Craft a memorable logo for your brand, business, or personal use with templates for Illustrator.

How do you make an icon from scratch? ›

How to design an interface icon from scratch
  1. Choose the right metaphor. ...
  2. Use simple geometric shapes as the basis of the icon and logical operations for more complex shapes. ...
  3. Create pixel-snapped icons to sit precisely on a pixel grid. ...
  4. Create icons for the size they will be used. ...
  5. Use the grid only if it's really necessary.
Mar 10, 2022

Is Illustrator best for logo design? ›

With its comprehensive digital design toolset, Adobe Illustrator is ideal for any logo, icon or graphic design project.

What is the best format for a logo in Illustrator? ›

A svg file is ideal for logos, icons, and basic graphics. This is why we use an svg file format for our logo on the website. For logos and illustrations on the web, svgs provide an overall sharper crispness versus png or jpg.

Is Illustrator good for logo design? ›

Use vector shapes in Adobe Illustrator to create a logo that looks good onscreen and in print. The best part about vector art is that it scales to any size — from business cards to billboards — without losing quality.

What is the difference between app logo and icon? ›

Icons simplify operation with a graphical representation to the user. Icons are normally used in applications, to represent what the app use for, and a key element in the UI/UX interface. An icon can have nothing to do with a logo. A logo is the visual face for your company.

Which software is best for making icon? ›

Adobe Illustrator is a standard vector graphic design software solution that can create beautiful logos, drawings and icons. It can also be used to create illustrations for print, web, video and mobile. Adobe Illustrator is designed for designers, photographers, students, small and medium-sized businesses.

What size are app icons in Illustrator? ›

App icon design specifications for Google Play Store

The final size should be 512 × 512px. The platform will scale it automatically. The file should be in 32-bit PNG format. The color space should be sRGB.

How do I make a logo mockup in Illustrator? ›

Select both the image and the logo and go to Object> Mock-up> Make in the top menu. You can now drag your logo around the file and position it in the best place. You can use the Appearance tools such as multiply to help blend the logo better with your image.

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Delena Feil

Last Updated:

Views: 5654

Rating: 4.4 / 5 (45 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Delena Feil

Birthday: 1998-08-29

Address: 747 Lubowitz Run, Sidmouth, HI 90646-5543

Phone: +99513241752844

Job: Design Supervisor

Hobby: Digital arts, Lacemaking, Air sports, Running, Scouting, Shooting, Puzzles

Introduction: My name is Delena Feil, I am a clean, splendid, calm, fancy, jolly, bright, faithful person who loves writing and wants to share my knowledge and understanding with you.