The Icons of iOS, As Done by Me

January 23, 2016

Complete Collection of Reimagined iOS Icons

Last May, in an attempt to improve my skills with both color and Adobe Illustrator, I designed the first of these reimagined versions of the default icons for Apple’s iOS. After the first few, which for a short time I considered discarding, I gave another thought to my original idea with the icons: to do them as I would have done them around the time iOS 6 gave way to iOS 7, an update that vastly changed iOS’s (and, since then, Apple’s) design aesthetic.

As I suddenly found myself redesigning all the icons in the operating system, I had a few guiding principles in mind:

  1. 1.
    Keep the artistry.
  2. 2.
    Return to what I see as the often “simpler” (... a tricky word), more rigorously designed, and more consistent stylistic origins of iOS without reducing the icons to the point of abstract non-communication that I believe some of the current icons reach.
  3. 3.
    Improve the icons’ color, shading, and legibility (use contrast, boldness, etc., so people can see features easily).
  4. 4.
    (Mingles with the first two points...) Call back to the elegant taste and specific feel of early 2000s Apple. For instance, incorporate white (but not pure, flat white, in the blinding style of the current iOS design).
  5. 5.
    Wherever possible, though under reasonable constraints, increase an icon’s usefulness.
  6. 6.
    Wherever possible, though under reasonable constraints, replace an icon with a more creative rendition. (Do not be afraid to scrap an icon’s previous/current concept for something new.)
  7. 7.
    Remain conscious of the fact, as much as I resent this impulse in some ways, that some users had been crying out for something “new” during the period prior to iOS 7’s release. (To some extent, the very fact of my redesigning the icons answers the desire for “newness”; in any case, I felt I could breathe enough new life into the icon collection to address both these people and my concerns listed above).

I worked on the icons for a few weeks in May before abandoning them for some time. I never planned to post them anywhere, or show them to anyone. But I had a reawakening this January and hatched a plan to refine and revamp the icons, add two new ones, and post my result. Let me give you a glimpse into my thought process with each:

Phone Icon: iOS 6, Current, and My Rendition

Phone, the king of iPhone apps (probably not in a practical sense for many people, but the product is called the iPhone, after all.)

The Phone app icon, among the first few I designed, was supposed to be an exercise in tasteful application of color and shading. It lies somewhere in between the hard shine and pinstripes of the iOS 6 icon (as it happens, both the shine and the pinstripes had grown more pronounced over the previous few iOS versions) and the bareness of the current icon. I feel the current icon suffers from too little contrast between the glyph and its background. Therefore, I redrew the old phone glyph, which I find more proportionally harmonious and overall better-looking, and gave it a subtle drop shadow to help it stand out from its green field. My icon’s background, in contrast to the washed-out, nigh-on-unpleasantly-oversaturated gradient in the current icon, has a calm but still colorful green with three-dimensional shading on the top and bottom as well as an understated glow. The Messages app received the same treatment:

Messages Icon: iOS 6, Current, and My Rendition

Messages.

Finally, FaceTime, which completes the trio of “communications” apps, had a distinctive icon in iOS 6 and prior. However, despite my qualms about the execution of its post-iOS 7 counterpart, I liked the idea that FaceTime would join Messages and Phone in the green suite:

FaceTime Icon: iOS 6, Current, and My Rendition

FaceTime.

My icons for iOS’s “core” apps (by which I mean Phone, Music, and Safari) all lent their looks, with some adaptation, from the original icons Steve Jobs presented for those features in 2007:

Steve Jobs Presents Core Features of Original iPhone

Apple retitled the iPod app “Music” in iOS 5, changing the icon accordingly to a musical note. Here are the icon comparisons for Music and Safari, respectively:

Music Icon: iOS 6, Current, and My Rendition

Music.

Safari Icon: iOS 6, Current, and My Rendition

Safari.

The main trio as they might look today:

My Rendition of iOS’s Core App Icons

On the subject of blue apps, the blue gradients in iOS 6 and prior were different enough between different icons to make a visually hypersensitive person itch (or twitch, or wheeze mildly, or perhaps endure a sudden swelling of the uvula), but not different enough to seem as if Apple meant them to stand totally distinct from one another. My treatments of other blue apps use the same blue as Safari:

Mail Icon: iOS 6, Current, and My Rendition

Mail.

App Store Icon: iOS 6, Current, and My Rendition

App Store.

Photos Icon: iOS 6, Current, and My Rendition

Photos (the blue appears as much as it can, given the clouds). The current icon exemplifies a problem with several current iOS icons: “You would only know what this abstraction represents if you had seen the pre-iOS 7 version, or if you were to look at the label.” The original icon was in my opinion beautiful and did not have this problem. I simply matched it better with my new blue and toned down the lighting effects.

Now I come to the last of the blue apps: Weather. The pre-iOS 7 Weather icon permanently read 73 degrees and sunny. As it is not, of course, 73 degrees and sunny all the time, that reading often amounted to a lie. In the icon’s iOS 7 redesign, Apple removed the 73-degrees label and added a cloud in front of the sun. Weather no longer had a deceptive icon, but it did not provide as much information as it could. In my treatment, the Weather icon updates with a "live" picture and temperature every twenty minutes. I thought twenty minutes would be infrequent enough not to drain the iPhone’s battery too quickly but frequent enough to accommodate the obsessive weather checker. Perhaps the Settings app could contain a setting for Weather that allows the user to lengthen the interval between updates, for those either concerned about their batteries or unconcerned about the weather. Perhaps the user could turn off the live icon altogether in favor of a permanent sun. Either way, allow me to present my renderings of sundry weather:

Weather Icon: iOS 6, Current, and My Many Renditions

Weather. My icons, going down the rows from left to right: sunny, cloudy with lightning, partly sunny, sunny with wind, cloudy, foggy, light rain, heavy rain, wintry mix, hail, snow, cloudy with wind, lightning at night, light rain at night, heavy rain at night, cloudy at night, wintry mix at night, wind at night, snow at night, partly clear at night, hail at night, clear at night.

Now for Calendar, an icon that has always broadcast live updates:

Calendar Icon: iOS 6, Current, and My Rendition

Calendar. My major changes include enlivening the red, improving the poor kerning and centering of the date, and refining the shading and texture.

And other productivity-focused apps:

Notes Icon: iOS 6, Current, and My Rendition

Notes. The yellow is a lighter shade of the tan I use elsewhere.

Reminders Icon: iOS 6, Current, and My Rendition

Reminders. The current icon provides yet another example of a concept that Apple has abstracted into oblivion. Without reading the label, who could tell what that icon represents? Even if someone could tell, does the icon represent the concept of reminders as clearly as it can? I would argue that it does no such thing.

I return momentarily to the “live app icons” zone with Stocks, an icon I changed drastically. In my rendition, the stock name appears at the top of the icon, and the most recent fluctuation in that stock appears at the bottom of the icon. The Stocks icon, like the Weather icon, would update every twenty minutes (with the same “perhaps iOS could allow the user to change the interval...” caveat). Finally, the user could feature any stock he or she pleases, and the type would condense or resize to accommodate the name; I just happen to use NASDAQ in my example:

Stocks Icon: iOS 6, Current, and My Two Renditions

Stocks. I gave my rendition a “graph paper” background, simultaneously conjuring up images of stock charts and making the icon just a little more fanciful. I recently learned that design was, once upon a time, called “the useful arts.”

Next, I would like to show the icons for the leftover “media”-type apps. First in line is that perennial sibling of the App Store icon, the iTunes Store icon:

iTunes Store Icon: iOS 6, Current, and My Rendition

iTunes Store.

iBooks, Game Center, Videos, and Podcasts:

iBooks Icon: iOS 6, Current, and My Rendition

iBooks.

Game Center Icon: iOS 6, Current, and My Rendition

Game Center. Another overly abstract, non-communicative, sterile white icon in the middle.

Videos Icon: iOS 6, Current, and My Rendition

Videos.

Podcasts Icon: iOS 6, Current, and My Rendition

Podcasts. A reimagining partly inspired by the earbudded silhouettes of old iTunes commercials, this icon is one of my favorites that I’ve produced.

My above Podcasts icon expands on a concept Apple established with the icon for its Tips app, launched with iOS 8. The filament in the light bulb glyph is a “T,” for “Tips.” I like the idea a lot. Although Tips has no iOS 6 version or equivalent, I can still show the current icon with my rendition:

Tips Icon: Current, and My Rendition

Tips. I love how this icon turned out. It reminds me, not literally, but abstractly (somehow), of toast.

I’ve not yet covered some of iOS’s “utility” apps. The most obvious among those is probably Settings:

Settings Icon: iOS 6, Current, and My Rendition

Settings.

But let us not forget the Maps app:

Maps Icon: iOS 6, Current, and My Rendition

Maps.

Then comes a quintet of “C” apps: Camera, Contacts, Calculator, Clock, and Compass:

Camera Icon: iOS 6, Current, and My Rendition

Camera.

Contacts Icon: iOS 6, Current, and My Rendition

Contacts. I felt color made quite a difference in this one.

Calculator Icon: iOS 6, Current, and My Rendition

Calculator.

Clock Icon: iOS 6, Current, and My Rendition

Clock. For this icon, I used a slightly tweaked version of Apple’s iPad design from iOS 6.

Compass Icon: iOS 6, Current, and My Rendition

Compass. My version’s directional labels use Garamond Condensed, a variation of which used to be Apple’s corporate typeface. I think the intertwined “spokes” might make Compass my most intriguing icon.

I thought at length about the color for Voice Memos. Apple’s icon design guidelines (at least as pertain to OS X; I do not know about the iOS ones) recommend a grey palette for utilities, reserving the more colorful treatments for consumer-oriented apps. This makes sense to me. So the Voice Memos icon wore a dark grey coat at first, before I decided I could do better. I realized that I had no red icons yet, and that red reminds me of “record,” and before I knew it, I had a red Voice Memos icon that begs to be pressed:

Voice Memos Icon: iOS 6, Current, and My Rendition

Voice Memos.

Some apps for which I designed icons used to be extras that one could download on a whim from the App Store, only recently graduating to default app status:

Find My Friends Icon: iOS 6, Current, and My Rendition

Find My Friends.

Find My iPhone Icon: iOS 6, Current, and My Rendition

Find My iPhone.

Passbook, introduced with iOS 6, changed its icon, name, and concept to Wallet as of iOS 9. My rendition of Wallet has stronger Apple branding, something that, for reasons that remain a mystery to me, Apple seems wary of nowadays as it strips away “i-” prefixes and all remnants of its previous warm design aesthetic. Here I compare my icon to the iOS 6 Passbook icon and the current Wallet one:

Passbook/Wallet Icon: iOS 6, Current, and My Rendition

Passbook/Wallet.

And, at long last, I come to the apps that did not exist until iOS 8 or 9. In my eyes (and ears, and nose, etc.), most of these icons, as they currently exist, have room for drastic improvement:

Health Icon: Current, and My Rendition

Health (new in iOS 8). I used my red background once again, this time for the color’s medical associations rather than its recording ones.

Newsstand/News Icon: iOS 6, Current, and My Rendition

News (new in iOS 9, replacing Newsstand). I wanted to acknowledge that Apple has substituted a “news feed” concept for the previous “choose a publication from a shelf” metaphor, though I felt that more people would associate a globe with world news than a newspaper. Granted, my globe also has a faint newspaper backdrop, taken from a 1905 Norwegian newspaper; Wikimedia Commons has an abundance of old Norwegian newspapers.

The last of these relatively new apps, and the last of all my icons, is Apple Watch:

Apple Watch Icon: Current, and My Rendition

Apple Watch (new in iOS 8). I thought this icon deserved a more... “iconic” treatment, starring a stylized Apple Watch home screen.

I worked for probably several hundred hours on these icons, if only to show what could have been. I hope they make you look at the world a little more closely.

Newer Post George Martin Older Post At Bay Go to Main Blog Page
Join My E-Mail List

Hear from me when I post a new article or have other “big news.”

E-Mail Nicholas
DMCA.com Protection Status