How To Make Custom App Icons In iOS 14

You can use the free Apple Keynote app to make custom icons for your iPhone's Home Screen. You can use the shapes in Keynote and style them, or draw your own. Then use Shortcuts to place the icons on your Home Screen.
You can also watch this video at YouTube.
Watch more videos about related subjects: iPhone (333 videos), Keynote (146 videos).

Video Transcript

Hi, this is Gary with MacMost.com. Let me show you how you can create your own custom icons for apps on your iPhone.
MacMost is brought to you thanks to a great group of more than 750 supporters. Go to MacMost.com/patreon. There you can find out more about the Patreon Campaign. Join us and get exclusive content and course discounts.
Now there's been a lot of focus recently on customizing your iPhone screens. One of the things you could do is set a custom icon for an app. Now you really can't set it for the app. But what you can do is create a shortcut that all it does is launch the app. You can set a custom icon for that. So, you could put icons on your screen that you made that do things like launch the Camera or Music apps. But how do you create these icons. You could go and look for some online that you can download. But if you want to make some that are uniquely yours you can create them in just about any graphics app. If you can save an image, you can create an icon. Now if you don't have any graphics apps or don't know how to use one a convenient way to get started is to use Apple's own Keynote app. So in the App Store go in and find Keynote and download it. It's free. It's from Apple. It's usually used to make presentations. But you could use the presentation slides to make graphics. 
So I'm going to launch Keynote here and I'm going to create a new presentation. I'm going to choose the black basic theme there. It's going to give me a slide that has some text and things on it. Now the first thing I want to do is switch to make the slide square because icons are square. Here we have a horizontal slide. So I'm going to tap on the three dots on the top and I'm going to go down to Document Setup. Under that at the bottom you could see two different things. I'm going to go to the second one there to change the size and select Square. Now I've got a square slide. I want to get rid of the sample text that's there. So I'm going to select each one and then hit Delete. Now I could go and add a background color to this. Something instead of black. I hit the Paintbrush Tool here I could change to Appearance and then go to Background and select a different background color or a gradient or something like that. Instead, I'm going to stick with black because I want to create icons that are just on a black background.
Now let's add something to the slide. To make it easy I'm going to use the shapes that are built into Keynote but you could also draw your own things. So I'm going to hit the Plus button at the top and switch to Shapes and I'm going to select a shape. First let's create an icon for the Camera app. So I'm going to hit the Search button at the top there and search for camera and find something that works. There is a shape for a camera. I'm going to stretch that by stretching the corners out and put it in the middle here. Now I can tap the Paintbrush at the top and I can change some things. I could change the style here, I could change the color of it and I'm actually going to tap Fill at the bottom a color gradient there. Then I'll go back and scroll down and there's Border. I'm going to turn Border on and I'm going to set the color to white. Then I'm going to go back here and set the width of the border to something bigger, like 10. So let's say that's what I want to use for my Camera app.
Let's create a couple others. I'm going to tap on the side there and then hit the Plus button to add another slide. Now I could go to the bottom here and select Blank and now I have a blank slide. There's no sample text there for me to delete. Let's add another shape. So instead of camera let's search for Photo to have an icon for the Photos app. I like this little aperture shutter shape here. I'm going to put that there in the middle. What I want to do is I want to make each part of that a different color. That would be pretty cool. First let's set one color and then add a border to it. So with this selected I'm going to tap the Paintbrush tool at the top. I'm going to change the style and go to Fill there and then use one of the presets. Let's go and use green here instead as a start. Now I'll go back. Scroll up a bit and turn on the border. Let's set the color of the border to white just like before and I'll have the width at 10. Now with it selected I'm going to tap the Paintbrush Tool again and go to Arrange. One of the things I can do under Arrange is Break Apart. I'll tap that and now it breaks each part of this into a different shape. So I can tap outside of it to deselect All and then tap one part to select. Now use the Paintbrush there and I'm going to do Style, Fill, and I'm going you use a different color here. So yellow for this one. Then I'm going to tap here and do the same thing. Paintbrush, Style, Fill, and a color for that. Then tap another section there. Paintbrush, Style, Fill, and let's do purple for that one. The next one. Paintbrush, Style, Fill, blue. Then finally with this last one Paintbrush, Style, Fill, and let's choose this color right here. Now we have a really colorful icon for Photos.
We can continue to create new ones. I'll add a new slide here. I'll do Blank. I'll add a shape. Let's make something for the Music app. There's a bunch of different things to choose from. I'll choose this little record player here. Enlarge that size. Put it in the middle there. Paintbrush, Style, Fill, and let's use a Preset here. I'll choose a color like this and then I'll also go back. Turn on the Border. Set the color to white and the width to 10 point like the other ones. So now I've got an icon for Music. Let's go and create yet another one. But this time I want to draw my own. So I'm going to go to Blank here. Then I'm going to go and hit the Plus button at the top and instead of using one of these shapes I'm going to go over to the little picture icon there at the top and do Drawing. Here I can draw my own thing. So I can select the Brush at the bottom. I can tap on it. Let's make it a little thicker. I can select a color that I want. Something like that. Then I can draw on it. I'm not very good at drawing but you could do something like that and then you could add more colors to it as well. So let's change the color to something else. You know put a little thing underneath it. You can do whatever you want. If you're talented at drawing I'm sure you can create something really great. Now hit Done and now you see I've got that icon there as well.
Now that I've got these icons here let's go and save these out as images so we can use them as icons on our Home screen. So I'm going to hit the three dots button at the top right and I'm going to go to Export. I'm going to choose Images and it will allow me to say Slide Range. I want all four of them but you could go and select just a single slide or a range of them. Now I'm going to select png as the type since that's the highest quality there. Then I'm going to hit Export. Now from here I'm going to go down and I'm going to Save to Files. So I want to save them to files. Now you could save them on iCloud Drive. You could save them on your iPhone. I'm just going to save them locally here. I'm going to create a new folder and I'm going to call it Icons. So I've got a folder now on my iPhone called that. You can create that folder on iCloud Drive as well. 
Now let's go back here to the Files app. If I look here on my iPhone there's that folder called Icons. If I look in there there are four images that are the four slides. 
So now let's create some shortcuts and assign the icons to it. Go into Shortcuts and and then I'll go in here and I'll hit the Plus button at the top and create a New Shortcut. We'll add an action to it and we'll do something really simple. I'm going to search for Open App and you could see that's an action there. Then I could choose which app. So let's have it open the Camera app. I'm going to hit the three dots there and let's call this one Open Camera. Then I'm going to tap Add to Home Screen. Now I'm going to do two things here. First is I want to change the name. So let's call it Camera because this is what we're going to see on the Home Screen. Then I'm going to tap on the icon itself and choose a file. Now if I went down to On My iPhone I would see that folder called Icons and I could select the icon. There it is! Then I'll tap Add and then I'll tap Done and Done here because I'm done with that shortcut. You could see the shortcut is sitting there inside of my Shortcuts app. But if I go back to the screen you could see it has added that icon there. You could see it there. Now look how it kind of floats there because I put it on a black background and the wallpaper I'm using is just solid black. If I were to go in and change that, so change the wallpaper to the Standard like that, it still doesn't look too bad. But I like the idea of making the background all black and then using black as the background for the icons. Then you can kind of make the icons any shape you want. You're not restricted to having it be these rounded rectangles. 
You can set the background wallpaper to be anything you want. You can create one of these squares slides. As a matter of fact you could create one those icons. You just have it be a solid color and use that as the wallpaper. Then it would fill the entire thing with that color there. So if you used red as the background for your icons and red as your wallpaper then it would make the icon blend into the background without seeing the rounded rectangle edges.
So you can create anything you want. Remember you can use your own image editing app. If you've got Pixelmator or some other image editing app on your iPhone and you're used to using that just create any square image and you can add it as an icon using Shortcuts and that simple Open App Shortcut Action. 

Comments: 2 Comments

    Joe Jennings
    5 years ago

    Thanks for this video Gary I have been working on a whole B/W theme. Is there a way to not see the shortcut screen as the app is launching. Thinking back to the “cls” command from the DOS days that would clear the screen as you were running commands.

    5 years ago

    Joe: No, not really.

Comments are closed for this post.