A Blog Graphic Eureka: Custom Social Media Icons


I learned something today, like just today, that I thought would help out some of you. I don’t know if it really will. But I might as well share it. And I’m just burning from giddiness.

So here’s the thing.

Ever see those neatly arranged social media icons on the sidebar of some blogs? You know how they look TOTALLY professional and salivating design-wise?

Some weeks back, I was thinking of adding social media icons on my blog. Preferably on the sidebar but on the footbar, above the header, below the post… I don’t care. So long as it’s there. And back then, I thought that the only way for me to have those icons lined up neatly in one row will be if my theme had a Social Menu. And because multiple menus is not a feature in my theme, Gateway, I thought there was no hope for me.


Apparently you could do a little DIY, some basic coding and voilaCustom social media icons! Even for the Free Plan users! 😀

The Icons

So you upload your chosen images of the icons to your library. I highly suggest that their dimensions be equal. (Ex. Width = 120, Height = 120) That way, you won’t have to deal with distorted images when you put them in the Text Widget.

If you want really awesome-looking icons, like the one you see above, there are TONS of free social media icons in Pinterest. You can pick from geographic ones or watercolor ones or whatever takes your fancy.

social media icons
These are free blog graphics I got from Pinterest.

In my case, I’m temporarily using those cute hand-drawn icons until I can make my own. And I do plan on making my own blog graphic kit.

The Coding

So you can basically follow the format below:


Just change the ones underlined.

For URL, change it to the URL of your social media. Ex: twitter.com/awesomeunicorn
Img Title is not necessary but you can put the name of the social media in it.
For IMG URL, you simply copy the image url of your uploaded images from your media library.
Ideally, the sizes of the width and height is equal. Somewhere below 100 since this is measured in pixels.

If you want to add another, simply copy from [<a href=”URL”>] to [</a>] before the [</div>].

For further instructions, you can go to WordPress.com’s Support Page.

So what’s the lesson here, Kate? Always research further.


4 thoughts on “A Blog Graphic Eureka: Custom Social Media Icons

    1. I’m happy to help 😊 If you’re having difficulty in doing so, don’t hesitate on contacting me. I’m no expert but I’ll try to help as much as I can. Thank you for following!

      Liked by 1 person

Share Your Thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s