Create iOS Icon Shortcuts in High Quality Format

Thanks to new features in iOS allows us to match the icon themes with our personalities. These are the steps I used to create our own icon shortcuts using Adobe Illustrator. At the end of the article I will give you a trick for avoid routing through Apple’s Shortcuts app every time we want to open the modified app, so it can go faster.

Image by author — iOS icons in Dark theme

Let’s get started

1. If you never had experience worked in the icon field, you might wonder “What kind of file should I search for?” For me I prefer file in SVG extension, because I don’t need to trace the image (if you’re using PNG/JPEG, you will need to trace it). Also better use not expanded design (as I used below in step 3), because it’s more flexible to reshape.

There are many sources that provide free icons and we just need to download them without having to register. For the program I use Adobe Illustrator (AI) because I find it easy to learn, even for beginners. If you choose to using JPEG or PNG file, it may need some color adjustments in Adobe Photoshop before vectorized in AI.

2. Create an artboard with the size 1024x1024 px in AI and choose Color Mode in RGB. Then drag to open the downloaded SVG icon in AI. Copy-paste the icon into the artboard and place it in the middle of artboard by select the icon > go to Window menu > Align > Horizontal Align Center > Vertical Align Center.

Image by author — Create an artboard

• If the icon contains several parts and hasn’t been grouped, then select all (Ctrl+A or Cmd+A) the icon parts > right click > Group before copied to artboard.
• To reshape a stroke use Direct Selection Tool, then select the path in the stroke what you want to change.
• To trace a JPEG or PNG file, drag the file into AI artboard. Go to Window menu > Image Trace > change the Mode in Grayscale/Black and White, in Advanced checklist Ignore White > Trace > in the Tracing menu on the top click Expand. Right click the expanded object > Ungroup. Select the transparent part of the object >on the top right menu click Select Similar Objects > Delete. Select all the expanded object > right click > Group.

3. Change the icon size with width/height around 470 px at Window menu > Transform. Don’t forget to activate the link icon (Constrain Width and Height Proportions) before change it.

Image by author — Change icon size

4. Let’s say we’re using not expanded icon; give more Stroke Weight to the icon in 40 pt and change the stroke color.

• If you want to give little variation with gradient, expand the icon first by go to Object menu > Expand > OK.
• If the icon consists of several separate parts like the example above, we have to merge it by go to Window menu > Pathfinder > Unite or go to Object menu > Compound Path > Make — so the gradation color can be united.

Image by author — Icon with gradient color

• If you want the icon filled (without stroke), then simply click Swap Fill and Stroke in the coloring area (on bottom left in the example above). Or change manually by fill the color and change the stroke with None (no color).

5. To change background color, create a square using Rectangle Tool with the same size as the artboard. Select the square >right click > Arrange > Send to Back. Place it in the middle using Align menu like before. Change the fill with solid color or play it with gradient.

6. Save your work by go to File menu > Export > give the File name >Save as type in JPEG > Resolution in Screen (72 ppi) > OK. Watch this video for a clearer picture.

The result

Image by author — iOS icons in Dark theme

Image by author

Image by author — Icons in aesthetic colors

Image by author — iOS icons in Light theme

• To create icon in aesthetic colors, we need to expand the icon first.
• Then search a textured background and place it above the icon.
• Cover it with the icon shape (expanded icon) on the top of all. So it’s contain with 3 layers.
• Select all the objects > right click > Make Clipping Mask.
• Watch this video for a clearer picture.

The trick

Now to to avoid routing, there is a program that make it easier to change iOS shortcut icons, like Launch Center Pro but to use the full features is not a freebie. After reading some review it seem that the program still needs a lot of improvement, so let’s skip that one. Another way is to change the iOS Settings > Profiles & Device Management > select the edited app name on Downloaded Profile > Install (3 times) > Done. With a note only works on 3rd party apps for now. No stock apps like Apple Music/Mail/Settings. For more details, you can see the explanation from Bo0M H4CKZ or TheTechSpot at their Youtube channel.

That’s it… I hope the explanations are easy to follow and you can create your own iOS icon shortcuts with good quality designs.

Follow me for more inspiration.