Editing and customizing icons for iPhone (Jailbreak IS required)

Alright, I'm going to start this one off by saying you MUST be jailbroken in order to customize icons on your iPhone. I'm also going to assume you already have themes on your phone and have a decent knowledge of Winterboard.

I also recommend you download the Illumine theme from Cydia or whichever installer you choose as that will make it easier for you to follow along with exactly what I'm doing as the folders will all be the same. If you're more advanced, you can probably follow along with any theme just fine as the layouts of folders within themes are somewhat similar, depending upon the complexity of individual themes. (If you plan on creating your own theme, at the bottom of this tutorial, there is a small starting explanation that shows you how to start a theme, I'll expand upon this later in the week by adding more parts to a theme.)

Next, you need to know how to do a few things in order to do this. After jailbreaking, you need to know how to SSH into your phone. If you're not familiar with SSH, you need to get familiar with that first. *Note: Unless you feel completely comfortable doing this, I don't recommend it. Point being, SSH'ing will give you access to ALL of your iPhone's core files, so deleting/editing certain files could be disastrous if you don't know what you're doing. If you're still reading, and you're okay with all of this, continue on.

For those of you who do NOT know how to SSH, a guy over on HoFo has a site that has excellent SSH tutorials. So check that out and then come back. If you already know, just ignore the link below and continue.

How to SSH into your iPhone

Alright, for this tutorial, I'll be using Fugu on my Mac to show you how to customize icons. And for simplicity's sake, I'll be using a premade theme and showing you how to access icon folders and customize them to your liking a few different ways.

Alright, after you SSH into your phone, you should see a screen that looks like this (and remember, depending on what SSH client you are using, as well as whether you are using a Mac/PC, this screen may differ a bit, but somewhere, you should see your iPhone files, which in my case, they are in the right hand pane, the left hand pane contains files on my actual Mac):

*all screenshots can be maximized by clicking them




You are going to navigate in the right hand pane to Library --> Themes

Once inside that folder, you should see a list of all the themes you have installed on your phone. This screen pretty much brings up ANYTHING you have installed in Winterboard.

In my example, I'm going to navigate to one of my themes that I have installed. For this tutorial, I'll use the Illumine theme as my example as it's rather simple. In another tutorial, I'll used a more complete/complex theme to explain how to change different aspects of themes.

Here is the inside of my Illumine.theme folder (notice mine may look a little different than yours as I may have tweaked things here and there in the past):





Illumine is a rather large theme that comes with tons of icons in itself, you'll notice two folders. One is labeled "Icons" and the other labeled "Icons_EXTRAS".

This is probably a good time to note a common problem with some themes. After the 3.x update, certain theme overlays were messed up as the way icons cache changed. Some themes have not been updated to fix that issue. But there is an easy way to fix it. If your problem is with themes like Illumine which have a built-in overlay that should resize your icons, regardless whether there is an icon for that app or not, all you have to do is clear the icon cache and reboot your device.

To clear the icon cache, after you SSH into your phone, navigate here:

/var/mobile/Library/Caches/ then delete these 2 folders:

SpringBoardIconCache
SpringBoardIconCache-small

Respring, then reboot, and then the icons should behave the way they did before 3.x firmwares. This works for any themes that have overlays.

If you're still wanting to change icons and customize, read on dear iHacker!!

We left off talking about the 2 icon folders. Icons and Icons_EXTRAS. The Icons folder is the one your springboard is reading from. The EXTRAS folder is a folder the theme developer included with tons of extra icons you can substitute or add, but your springboard will only read those in the icons folder. So if you find an icon in the EXTRAS folder that you like, simply copy it into the actual Icons folder and that app should now have the corresponding icon. Now to view the icons in the EXTRAS folder, don't double click as that will download them to your computer and they'll show up in the left pane. Simply right click (or ctrl+click on a Mac) on them and click preview. That will show you what that icon looks like. If it's something you like, then copy it to your hard drive and paste it into the actual Icons folder within that theme.

Now this is EXTREMELY important, when naming icons, they MUST have the appropriate name, capitalization, and punctuation to work. They must also be a .png file.

Let's take an example. Say I don't have an icon in my theme for The Weather Channel. If you look at that app on your phone, underneath the app icon on your iPhone, you see the letters "TWC". That is what springboard knows the app by. So when you go to add an icon, you need to name that icon TWC.png in order for springboard to recognize it and pair it with the matching app. So if you ever run into an issue where your icon isn't showing up, make sure you named it correctly.

Now what about replacing an icon you really don't like?

Go into the icons folder, and say we want to replace the icon for Facebook. I need to find the new icon I want to use (or create it myself w/ Photoshop but that's a whole new tutorial in itself for another day) and save it to my computer. Now name that file Facebook.png and drag it into the Icons folder in Fugu or whatever SSH client you are using, like below.



Your SSH client will most likely tell you that file already exists if you're trying to replace an icon, just click the option to overwrite, and now your icon is changed! If you're creating a whole new one, it should just copy right over.

You'll repeat this same process with all the icons you want to edit or change.

If you are creating your own theme from scratch, you'll need to create a new folder for it. For example, say I wanted to create a theme called iMuggle. I would need to go to the Library --> Theme folder and make a new folder called "iMuggle.theme". Obviously you are going to have quite a few folders inside your .theme folder, but for now, we're only concerned with one, that is "Icons". that is the folder you need to stick all of your new icons in. In a later tutorial, I'll explain what other folders need to be in your .theme folder in order to create a complete theme on your own, without just editing an existing theme.

Deviantart.com has a ton of icon packs you can download for free and install, and as most people know, Cydia, Icy and Rock also have an abundance of icons.

This is a basic tutorial, if you need any other help, please leave a comment on this post or shoot me a public reply on Twitter to @iMuggle. I plan on posting a tutorial for making your own icons in photoshop and using theme developer overlays at a later date.

I simply wrote this tutorial assuming you know what icons you want to use or at least where to get different icon packs.

-iMuggle =)