With iOS 7 Apple went for a clean yet minimalistic design with their UI. Consequently this has enabled us to create iOS 7 icons in CSS without any additional trickery. Images are no longer required to replicate the design and function of an iOS icon, where icons in previous version of iOS were based on skeuomorphism. Unfortunately, this tutorial or CSS trick poses no real world value as it doesn’t really have a use for itself, although the end effect is certainly satisfactory.

What we will be creating

See the Pen CSS iOS 7 Icons w/ Jiggle Effect by Taylor Liesnham (@Chub) on CodePen.

As you can see if you hover over either icon it will start to jiggle about a lot like the classic iPhone app animation that we are all familiar with. You can of course view the code from that embedded preview above, which is fine to copy however I will be explaining it all below. You may notice that the CSS animation goes a little wrong in that embedded CodePen, but I can assure you that it does work when tested locally anyway.

The HTML Layout

We will be using a very simple HTML layout as most of the magic is worked through the CSS, not much really needs explaining here as it is pretty self explanatory.


Here we essentially have two wrappers, one for the weather icon and one for the notes icon. Inside these two wrappers we have the various components that make up the whole of the icon.

Weather Icon CSS

Although this isn’t necessary for the CSS trick to work, we suggest you set a background other than white to ensure that certain elements of the icons show up more easily. I used #5fadd3 in this example.

The weather icon is deceptively simple to make. The base consists of a single 100 pixel by 100 pixel tile with a border radius of 20 pixels, this gives an effect close enough to that of a true iOS icon. The sun is quite obviously a relatively small circle using a border radius of 100 percent and of course the typical yellow colour of the sun. The cloud is the most complex part of the icon consisting of two oval shapes each of which varying in dimension and a small circle.

To create our first iOS 7 icon in CSS, we will start with the main icon and the sun:

.weather {
background-color: #1c77ec;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#1c77ec), to(#7deaff));
background-image: -moz-linear-gradient(top, #1c77ec, #7deaff);
background-image: -ms-linear-gradient(top, #1c77ec, #7deaff);
border-radius: 20px;
width: 100px;
height: 100px;
display: inline-block;
}

.weather:hover {
animation: jiggle 0.2s infinite;
-webkit-animation: jiggle 0.2s infinite;
-moz-animation-duration: 0.2s;
-moz-animation-name: jiggle;
-moz-animation-iteration-count: infinite;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.sun {
background-color: #fada0b;
border-radius: 100%;
width: 40px;
height: 40px;
top: 20px;
left: 15px;
position: relative;
}

.cloud-main {
opacity: 0.9;
background: #fff;
width: 65px;
height: 25px;
border-radius: 20px;
position: relative;
left: 25px;
top: 10px;
}

.cloud-bubble-one {
opacity: 1.0;
background: #fff;
width: 35px;
height: 35px;
position: relative;
border-radius: 100%;
left: 10px;
top: -15px;
}

.cloud-bubble-two {
opacity: 1.0;
background: #fff;
width: 30px;
height: 25px;
position: relative;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px;
left: 35px;
top: -40px;
}

To simulate the icon of the weather icon I simply used a gradient ranging from top to bottom specifying the colours shown above. To help with this step I did use a reference image of an iOS device running iOS 7, however, I of course have already done this for you.

We haven’t quite yet got to implementing the keyframes of the ‘jiggle’ animation so I won’t go into too much detail about that now. The sun is 40 pixels by 40 pixels again this was me trying to get the dimensions right relative to the real icon. We use a 100 percent border radius to ensure that we get a perfect circle, next we have to do a little bit of readjustment to get the sun in just the right place.

The reference weather icon image has a slight transparently allowing the sun to shine through the cloud. To achieve this effect I applied a transparency of 0.9 to the parent object. The following constiuents of the cloud could then all have transparencies of 1.0 as they are relative to that of the parent object. Although this part is arguably rather complex there really isn’t too much to explain here as it is all about positioning the objects in just the right place.

Notes Icon CSS

The notes icon is somewhat easier to make as it doesn’t involve any complex shapes, although it can be quite finicky to get the lines in just the right place. For this icon I set the main background colour as being the golden yellow colour. I then used a second element with a rounded left and right bottom border which overlaps the original gold colour. The lines where mostly made by repeating elements however there were a few exceptions.

.notes {
background: #fed32c;
border-radius: 20px;
width: 100px;
height: 100px;
display: inline-block;
}

.notes:hover {
animation: jiggle 0.2s infinite;
-webkit-animation: jiggle 0.2s infinite;
-moz-animation-duration: 0.2s;
-moz-animation-name: jiggle;
-moz-animation-iteration-count: infinite;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.note {
background: #fff;
height: 70px;
width: 100px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
position: relative;
top: 30px;
border-top: 3px solid #b9a046;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}

.dotted-line {
width: 100%;
height: 3px;
border-bottom: 3px dotted #acaead;
position: relative;
}

The above CSS makes up the top half of the notes icon. Again as before we used a width and height of 100 pixels and a border radius of 20 pixels. Note that we used the border box tag on the note element as the border placed at the top of it causes the height of the icon to increase by 3 pixels. However, the border box tag overrides this.

In the icon I used three lines to match that of the reference notes icon. However, the final line had to be slightly altered so that it didn’t clip over the edge of the icon and cause it to look a little odd. To fix this we simply specified a width of 90 pixels and a border radius of 3 pixels.

.line {
width: 100%;
border-bottom: 2px solid #acaead;
position: relative;
height: 2px;
padding-top: 15px;
}

.line-last {
width: 90px;
border-bottom: 2px solid #acaead;
position: relative;
height: 2px;
padding-top: 15px;
left: 5px;
border-radius: 3px;
}

The ‘Jiggle’ Animation

The ‘Jiggle’ animation is fairly basic albeit may look slightly complex which is mostly like due to the many prefixes that you see such as -webkit, -mox and -o. Likely there are only really a couple of parts to understand.

@keyframes jiggle {
0% {
transform: rotate(-1deg);
}
50% {
transform: rotate(1deg);
}
}

@-webkit-keyframes jiggle {
0% {
-webkit-transform: rotate(-1deg);
}
50% {
-webkit-transform: rotate(1deg);
}
}

@-moz-keyframes jiggle {
0% {
-moz-transform: rotate(-1deg);
}
50% {
-moz-transform: rotate(1deg);
}
}

The various keyframes are for Internet Explorer, Safari & Chrome, and Mozilla Firefox. As you can see this animation causes the icons to move one degree anti-clockwise and one degree clockwise roughly a couple of times a second. As you saw in the CSS code earlier we simply only have to call this animation. We use the infinite tag to declare that the icon animation should loop when the user has hovered over.

We hope that you have enjoyed the above tutorial on creating iOS 7 icons in CSS and have learnt something from it. Feel free to use these icons in projects of your own.

If you enjoyed this tutorial take a look at making Windows inspired Metro tiles using CSS.

Download the source files.