How to Effectively use Icons in Your Interface Design


by on March 31, 2017

How to Effectively use Icons in Your Interface Design


For this example, we’re going to turn our section highlighting the 3 main services into a carousel. Then we’ll utilize icons in place of images that we had previously chosen for our 3 information tiles.

Install Font Awesome:

Go to and download the Font Awesome Font.

For our example on Mac, double click the downloaded file and click install.

Create a text box and then under Window > Type >  Glyphs, and then change your font to Font Awesome Regular.

A bonus of using this font is that it’s easy for a developer to use.

Create Carousel Navigation:

Create an arrow button by selecting one of the directional glyphs. In our example I’ve moved the tiles closer together to make room for the directional buttons on each side. To better indicate that these are pressable buttons, add a circle around the arrow. For a nice balance

It should be obvious that it’s a button, obvious what the action is when the button is pressed, and large enough for a user to easily press. For mobile, that means at least 45×45 pixels which is the minimum as a guideline for size that is pressable on mobile.

My personal taste is to make the line thickness of the circle and the arrow shape the same width for visual consistency.

Enhance Your Call To Action:

Another common use is an icon to add to your calls to action, like the mail icon to add to your contact button. In our example, increase the size of the contact button and add the icon in. Adjust the font size until it has good balance with the font size.

Save Time with Purchased Icon Packs:

A time saving hack, especially if you aren’t inclined to design your own icons is to download an icon pack. This will likely cost money for a good set, but it’s worth it if it saves you time that you can use for other valuable work.

In the video example, I have a pack that I previously purchased and downloaded. Choose icons that are most relevant for the service or other information being presented. The nice thing with these icons is that you can easily edit the appearance to match your branding.

A couple sites I like for icons:
Creative Market


  • Icons can help to create or enhance visual cues for the user.
  • Depending on the style of the site, icons can be used as design elements in place of images.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of

Ready to get started?

Get a free consultation now