Icons and Buttons

How to Create Icons and Buttons for Your Website

These days good web design should feature very little in the way of text links. While text links might have once been the most fundamental part of web design, today they are generally impractical and dated. Most of us navigate the web at least half the time through a touchscreen device like a smart phone or a tablet – and as such we need large icons that we can press easily with a fat finger rather than a small and precise cursor.

But the bad news for web designers is that this creates a lot more work for them. No longer can you just use an ‘

Designing Your Icon

First of all you’re going to need a design for your icon or button that will be eye-grabbing, that will match the look of the rest of your site, and that will be intuitive.

For some icons this will practically be done for you already. If you want to create a ‘settings’ button for instance, then you can use the generally accepted ‘three dots’ rather than creating something new. Stars meanwhile are generally accepted to suggest ‘favourites’, while home buttons tend to be pictures of homes…

Another easy route to go down is to use a button with text on it which can simply tell the visitor what they’re about to click.

For more artistic icons though, you can always resort to skeuomorphism. This essentially means using images that remind us of things in the real world that we’re already familiar with using. Apple is famous for this – which is why their notepad app has lines, why their phone icon looks like a phone, and why their mail app looks like an envelope.

Note that your colour is also highly important: you need to pick a colour that will match the tone and look of the rest of your site and your brand, but that will also offer contrast in order to stand out. Statistically more people will click your button if it’s red.

Creating Your Icons

Now you’re going to need to create your buttons, which is going to take some artistic skill and patience. What’s critical to understand here going in, is that you can’t cut corners and that you really do need to pay attention to detail. If you spend long enough crafting each icon perfectly, then it will pay off with a beautiful looking design overall – but if you have cut any corners then your web design will feel untidy.

So if you were planning on using MS Paint to create your icons you can forget it. Instead you’ll need Adobe Illustrator and Photoshop. Using Illustrator you can create much more precise images that will line up and have perfect symmetry, and these will come out as high definition files with no jagged lines – it’s what professional designers use to create packaging for products and more.

Using PhotoShop you can then add colours, gradients and effects to your image, but more importantly you can use transparencies to create rounded edges and other effects.


Of course this is a lot of work to go through every single time you add a link, so you might want to consider outsourcing the process. You’ll find that there are many sites where you can find designers happy to create your icons for you (ODesk, eLance, Digital Point Forums or Fiverr to name a few), or alternatively you can work with a web designer for the most professional service and the best look overall.