iPhone icons in iOS7 - learn flat design

Stay ahead of the game with these principles and make your app icon stand out on the App Store
3.5 (4 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
165 students enrolled
Instructed by Alex Nagy Design / Graphic Design
25% off
Take This Course
  • Lectures 41
  • Length 3 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2013 English

Course Description

--- Are you a student or a non-profit organization? Just message me for a considerable discount. ---

FLAT DESIGN - Most designers either can’t get enough of this trend, or absolutely hate it. But one thing remains certain: Apple embraced it in iOS7 so you better learn what flat design is... or pay the price.

Your app icon is your FIRST IMPRESSION about your app/game so you better work hard on making that icon look awesome!

Did you know that you need 18 icons in 13 different sizes for you app? You can learn all the smart and useful stuff from here.

In this course I will show you 9 principles of flat designed icons. Inside you will find:

  • flat design principles
  • PSD templates for your flat icons
  • making of all the standard iOS flat icon - ALL 26 OF THEM
  • 2 bonus lectures that will save you a lot of development time
  • 41 high quality HD video lectures (1920 x 1080)
  • 2 quizzes to test your knowledge

You will get to download a Resources folder that includes:

  • 2 PSD files for your flat icons
  • Brushes
  • Swaches
  • 11 flat gradients
  • 26 standard iOS7 icons (psd and png files, 1024 x 1024 pixels)
  • Much more

Stay ahead of the game, make your app noticed on the App Store with the strongest trend in 2013.

Learn how to make awesome flat design icons.

What are the requirements?

  • you will have to have an iOS developer account to publish apps
  • Photoshop is my "drug" of choice. The resources are PSD files, so you better have Photoshop or something installed on your computer :D

What am I going to get from this course?

  • learn how to make flat iPhone icons for your app

Who is the target audience?

  • all iOS (iPhone/iPad) developers and designers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Welcome

In this first lecture I will show you what this course covers.


First impressions are everything. In this course you will learn how to make that A+ flat icon that will turn heads. You will give you the knowledge and the tools to make your dream iOS7, flat icon.

Section 2: 9 principles about flat design icons

The corners in iOS7 look much smoother and organic.

Don't forget to download the Resources :D


In this lecture we are going to learn about how important colors are in flat design.


Flat design is simple by nature, so KISS (keep it simple stupid) ;D


This is why the Apple Flat is not like the Google Flat.


Meet the most popular iOS7 icon type.


It's what it says: these icons are made up by only 3 colors (mostly).


More colors. This will be one colorful year :)


Some effects are allowed, but not too much.


You will need rounded icons for your marketing. Here's how you will make them.

Also, take a look at lecture #39 for the new PSD file :)

10 questions

Test your knowledge.

Section 3: Making of... (great examples to learn from)

Creating the "Phone" iOS7 icon

In this lecture I am going to show you how I re-created the Phone icon. This is the most important icon of them all, after all the iPhone is a phone.

Because these example videos are much too long, I have put them on fast-forward.

Remember to download the finished psd along with the png files for this icon to the right. Take a look at them and enjoy this video of how it was made.


Creating the "Mail" iOS7 icon

The mail icon is quite simple. It just uses a different gradient. I have included all of the used gradients in the Resources folder. Use them freely.


Creating the "Safari" iOS7 icon

Creating the Safari icon was meticulous, but in the end it was worth it. Watch this video of how it all was made.


Creating the "Music" iOS7 icon

Yet another easy icon to reproduce. The music icon is fairly simple. Just add some gradient to it and we are ready.


Creating the "Messages" iOS7 icon

Because the messaging is second to calling, the Messages icon looks similar to the Phone icon. Let's see how I made it.


Creating the "Calendar" iOS7 icon

The calendar icon is a great example of what Apple means by flat and simple design. Creating a simple icon can be hard. You have to put a lot of thought into it. But once it is clear, you are ready to design it.


Creating the "Photos" iOS7 icon

Photos are colorful. So is this awesome Photos icon. Let's reproduce it.

Don't forget that you can download this and all the other icons' psd files to the right of the lecture.

P.S. I have redone the Photos icon :) Download the new psd file from "Photos revised"


Creating the "Camera" iOS7 icon

Making the Camera icon looks simple at first glance, but I had a lot of work with it. Take a look at this video to find out how i tackled the obstacles.


Creating the "Videos" iOS7 icon

The Videos icon hasn't changed that much. It just got flat. in my opinion it's much cooler now.


Creating the "Maps" iOS7 icon

Here's a fairly complicated icon witch needs a lot of attention to detail. If you are like me, always tinkering with details, you will love this lecture. Also, take a look at the downloadable psd file to the right.


Creating the "Weather" iOS7 icon

The Weather icon is one of my favorites: simple and clear, like a sunny day.


Creating the "Passbook" iOS7 icon

Here you will find a perfect example of bending the standard flat design rules. The Passbook icon is not so flat after all.


Creating the "Notes" iOS7 icon

This is my favorite icon of them all. It represents all what iOS flat design is about. Love this icon.


Creating the "Reminders" iOS7 icon

It looks like this ikon was inspired by the Notes icon. Simple and elegant; the design tells the functionality; just the way I like it.


Creating the "Clock" iOS7 icon

We all know the Clock icon. Of course you would not add the handles, because they are added programmatically.


Creating the "Stocks" iOS7 icon

One of the black icons of iOS7. Don't be afraid to use black. Black goes with everything.


Creating the "Newsstand" iOS7 icon

The Newsstand icon is one of my least loved icons. I believe it is just childish, and it's a pain in the you-know-what to reproduce. But hey, it is still a flat icon.


Creating the "iTunes" iOS7 icon

Not much to tell about this icon. Just use the gradient and you're done.


Creating the "App Store" iOS7 icon

This icon is the brother of the iTunes Store icon. Simple and elegant.


Creating the "Game Center" iOS7 icon

Do you like bubbles? Who doesn't? Install the bubbles brush from the Resources folder and you're good to go.


Creating the "Settings" iOS7 icon

This icon was hard to make. A lot of detail, a lot of work. In the end it worth it. Check this video out to find out the process or download the finished psd file to the right.


Creating the "Face Time" iOS7 icon

Yet another iOS7 icon that is simple. Take a look at this video to see how easy it is to make an icon when you have decided to use strong symbols, like this video symbol.


Creating the "Voice Memos" iOS7 icon

This icon uses only black and white and a sound-wave to represent the functionality of the app. Nice indeed.


Creating the "Calculator" iOS7 icon

Expressing the purpose of the app is important. Expressing it as simple and clear as possible is hard. If you want to take a look at a great Calculator icon, look no further.


Creating the "Contacts" iOS7 icon

This is another example of the "not so flat" icons. It resembles of a contacts book but it still remains stylishly flat. Download the final psd file from the right.


Creating the "Compass" iOS7 icon

One of the great pleasant surprises of the iOS7 icon set was this one. It's hard to replicate, but it fits in nicely with the UI of the app. Genius.

Section 4: What to do next?

You should know that you will need a lot of icons in different sizes. In this lecture I will show you how you will love to make them.


Lastly you will have to add your icons to your Xcode project.

5 questions

This is the second and last quiz to verify your knowledge about the two bonuses.

Section 5: Conclusion

Flat design is here to stay. It is new, exciting and a lot of fun.


A quick summary of the course.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alex Nagy, ★ REBELOPER ★

Teacher. Coder. Coffee drinker. I'm never more than a few inches away from something with an  logo.

iOS10, SpriteKit and Swift 3 expert... iOS, watchOS, tvOS and macOS game developer.

Alex is a freelance developer since 2010. He is the owner of the iOS game development studio Rebeloper. Rebeloper is the testing ground for all of his "rebel ideas". He likes to experiment with cutting edge development tools and monetization techniques. Alex is also great in Photoshop, After Effects, HTML5, CSS or almost anything you can throw at him. Recently he is a tvOS evangelist :)

Sandor believes that you have to have 3 things in place to have a successful app business:

  • clean code
  • awesome design
  • cutting edge monetization

He teaches these three things on Udemy since mid 2012 as an established and respected instructor. Currently his courses have more than 3700 students in total and counting.

Also he is the founder of an ambitious startup called: rebeloper. Here he teaches you how to make awesome iOS, watchOS, tvOS and macOS games that actually make you money.

"I was born to code, design & monetize. I do those every day in the name of rebeloper"

Ready to start learning?
Take This Course