Buttons with Icons — Sketch + Paddy + Font Awesome 5

Update Nov 8, 2018: Paddy is no longer supported :(

I recently discovered this match made in heaven to create Sketch buttons with icons that automatically resize. Here you’ll see a quick working example using buttons as Sketch Symbols with Paddy and Font Awesome 5.

Before We Begin

• This tutorial assumes you’re already familiar with Sketch Symbols
• If you haven’t used the Paddy Sketch plugin before by David Williames, here’s a great video tutorial.
• Make sure you have Font Awesome. I’ve used the pro version, but there’s lots of icons in the free version too.

Sketch Symbol Setup

Create Separate Artboards:

• Icon Left — Light
• Icon Left — Regular
• Icon Left — Solid (if you have the pro font)
• Icon Right — Light
• Icon Right — Regular
• Icon Right — Solid (if you have the pro font)

Notice that both the icon and text layers have the same line height of 24px. This ensures correct padding when scaling.

Dynamic Padding with Paddy

You’ll see in the layers list, the background layer has [16 24] in it. This is referring to the padding between the text/icon, and the edges of the button. 16px top and bottom, 24px left and right. This means that when you use symbol overrides, the padding will stay consistent and will automatically resize your button.

Icon Overrides

Now that your symbols are setup, you can use your buttons! You should already be familiar with text overrides. To change an icon, simply enter the icon name in the override field, and you’re done!

Hopefully you found this helpful :)

Let me know what you think. Would you use this workflow?