« Back to all articles

Font Awesome would be truly awesome with a handshake icon

Written by Luuk Hartsema on 24th March 2016

In Lily (an open source CRM package on steroids) we like to make use of icons from Font Awesome. For the representation of deals in Lily, we used the fa-money icon.  The icon looks like a one dollar bill. Although I realise this might sound rather insignificant, it bothered me a lot because making a deal is not about receiving money. It’s about entering a relationship that is beneficial to both parties. Besides that, the money icon gave me a “corky dorky core business” feeling, which is just lame. The money icon didn’t work very well aesthetically either. It’s very hard to recognize the face of George Washington or the value of the money on an icon that is merely 18 by 18 pixels.

Nevertheless, the font-awesome library we use contains over 600 great icons, so I was pretty sure it would contain a handshake icon that would emphasize cooperation, agreement and (business) relationships. Unfortunately, I had to discover there was no handshake icon. And apparently I wasn’t the only one looking for it. Since March 2013, a lot of people requested for a handshake icon on the Font Awesome GitHub repository.

When I searched the internet I found many handshake icons but they were quite unsatisfactory. The white space between the fingers is clogging up with most of them. I then tried a few designs of my own. My first designs also had the same issues with the fingers clogging up. I wanted the icon to be as square as possible so that the space was used optimally. I discovered during my first designs this was really difficult to achieve with two hands holding each other while maintaining some sort of symmetry.

deal-icon-progress

Icon design iterations (left to right) on various sizes 60px, 48px, 36px, 30px, 24px, 18px.

With this blog post, I like to offer my final design to icon designer @DaveGandy and like to invite him to add the handshake icon I’ve designed to the Font Awesome icon set. I think it would make loads of people incredibly happy. For those who would like to use the icon already but can’t wait until Dave and I shake hands (I’m hoping he will reach out to me). The icon can be downloaded as a .SVG or an Adobe Illustrator file. As with everything else we do, the end result is open sourced under Creative Commons licence (CC BY-SA 4.0). That means you can copy, clone, alter, and do anything with it you like.

deals_final_design

Final designs for a fa-handshake icon

Don’t forget to follow me on twitter @lkhrtsm and @wearespindle. I’m planning to release more awesome stuff in the near future. I always appreciate comments, let me know what you think and I will reply if you contact me.

Your thoughts

  • Written by Karel Mladý on 15th August 2016

    Thanks for that, I’m giving it a try.

  • Written by Kasia on 11th October 2016

    Excellent idea, thank you!

  • Written by Luuk Hartsema on 18th October 2016

    Your welcome!

Devhouse Spindle