Search and Play Icon


Design Practice
Home Icon
8m 15s

The course is part of this learning path

Search and Play Icon

This course covers how to implement a range of design features within your iOS app. In order to do that, we're going to use Adobe XD, and you will see it in practice.

Learning Objectives

  • Learn how to draw icons and logos within your app
  • Use UI kits to help you when building your app
  • Understand the free resources that you can use as templates for your own apps

Intended Audience

This course is intended for anyone who wants to learn how to develop apps on iOS.


To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.


Hi, within this lecture, we're going to continue our drawing of icons and we're going to draw a search icon and a play button, play icon, okay? So, I'm going to name the search icon, okay? And I'm going to come over here to our newly created art board and I'm just going to delete everything inside of this art board because I'm going to bring in a circle or an ellipse this time and I'm going to hit shift in order to make this proportional, okay? And then later on I'm going to draw a line over here as a holder to our magnifying glass, okay? Like that, and maybe we can do some editing over here. So, let me just zoom in a little bit and I'm just going to go for this. So, it will make it round like that. And now I believe this looks good, but maybe we can do this a little bit bigger in order to have a better look, so choose this and hit upper arrow over here to make this a little bit bigger like that. So, I believe that's good for a search icon, right? So, of course you can have some symbols over here or some, like a bigger circle to make this a little bit better like that. So, maybe it's kind of longer holder and I believe that's good. So, we can go for this and of course, there's always room for improvement over here but I'm not going to waste time on that, you can just try to make it better on your own time. Rather, I'm just going to copy and paste this one more time because we're going to create a play icon, okay? So, kind of a play button. So, let me zoom in and we're going to delete everything over here as well, so that,  let me close down the series and I will bring in a triangle over here like that, and we're going to use this as our play button. So, let me just make it central. And then I'm going to rotate it like that so that we can have this shape. So, as you can see now it looks like a play button, but we're going to make it better. So, first of all, I'm just going to give it a fill in the color of this border and then I'm just going to make this look something like smoother over here. Yeah, this works well. Now I believe it's good, right? So, it looks like a play icon. So, you can just use it to play videos or you can use this in your feed tab bar as well. So, let's stop here and continue with the additional examples in the next lecture.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics