how to add clickable social icons to your email signature

Did you check out my post on creating an email signature in Gmail?  If not pop over there now.

So last time I showed you how to add a personalised image to the footer of your email, next we’re going to make it even better!


With clickable social icons my friend…you can even change the colours to match your brands…pretty nifty right?!

Step 1

Head on over to, here you will find a huge selection of cool icons that you can use for free.


Step 2

In the search bar, enter the word social.  You will be presented with various different styles of social icons, if you’re planning on using more than one, it’s a good idea to keep the styles kinda the same, so it looks co-ordinated.


Step 3

Once you’ve chosen your favourites (you can make them a fave by clicking the little plus icon at the right), you can download them.

You have to agree to terms, so have a read and check the box.


Step 4

If you plan on keeping them black, download a PNG version.  If you would like to change the colour to match your brand, download an SVG.


Step 5

Next, we change the colours.  Open up your graphic design program (I couldn’t find a way to do this in Canva, but I don’t really know it’s abilities, maybe you do).  Find your SVG files, open them up and use the eyedropper to adjust the colours so they are in keeping with your brand.  Once you’ve done that, save your files as  PNG’s.


Step 6

Pop on over to your Gmail account, and head to settings (the little cog), and settings again.  Then scroll down to the text box where your current signature is.  Underneath the image, if you’re using one, use the spacebar until you’re happy with the position of the first icon.  Go to the add image icon within the text area, and upload the png file you just created, it will be quite small, that’s fine, it doesn’t need to be large. If you’re adding any more icons, repeat this step until all have been added.  If the icons aren’t visible, save changes, go out of the settings area, and then back in.


Step 7

Now, you should see your icons. You need to highlight each one individually and enter the URL associated with each icon.  When you’ve done that, use the space bar to make any spacing adjustments between the icons so they look balanced. Hit save, and you’re done

Here is my completed email signature, complete with clickable icons.  Looking pretty nice I think.


I’ve created a few resources that you might find helpful.  Head on over to the resource library to unlock cheatsheets and layout templates.

I hope you’ve found his helpful, let me know in the comments if you plan on creating your own.


  1. Trudy

    This is such a great post! I never knew this was even possible! I guess you learn something new every day!

    • Lucie

      Aww, thanks, Trudy! I’m thrilled you found it helpful.

  2. Jenn

    I love getting new tips and tricks of the trade! Thank you for sharing!

    • Lucie

      No probs Jenn 🙂 Thanks for commenting!

  3. MJ Cal

    I loved how you broke down the steps so that they were easy to understand! Thanks!

  4. Jennifer

    I did not even know this was possible! Thank you for sharing! Really cool idea!

  5. Jen @Jenron-Designs

    This is a really great post I didn’t even know it was possible to change the color on social icons. Thank you so much I will be pinning this for later so I can reference back to it once I’m on my desktop.

  6. Tara

    Wow! I didn’t know you could do that! How cool. Thanks for sharing! Can’t wait to try it out!

  7. Celeste Godoy

    This is just perfect! Thanks for sharing, dear!


Submit a Comment

Your email address will not be published. Required fields are marked *