How to make your own Elfsight Social Media Icons widget

This article will show you an easy way of creating and customizing a Social Media Icons widget

If you have a question like “Why do I need these icons on my website?” we are just happy to provide the answer! With the help of this widget, you will be able to connect your website to your social network accounts, hence to increase the number of the followers or maybe clients and just to provide more options for your content to be watched and used.

Another good news is that a widget is customized in a very easy way and we are going to show it in this article.

Here goes!

Source tab

Actually, almost all the customization process takes place on Source tab, so to customize the media icons you like you need to delete the test ones and add yours.

Having pressed Add button you will see an option to choose an icon and insert the link to your own social profile.

That’s it!

However, there are a couple of important things with Skype, WhatsApp and Viber icons customization process. We have a special article on how to set up these icons, you can find it at

Layout tab

On Layout tab you can play around with icons’ size, their location and position on the website.

We have tried our best to make the icons’ size setting simple, so all you have to do is to choose the size you like most of all.

However, icons’ location setting might be less obvious, so let’s take a look at this feature:

You can put the icons to any place on your website with the help of Inline layout or, you can make them stay always visible with the help of Floating mode.

Floating icons will follow the scroll of visitors and will always be in sight. You can also set the Position to display them on any side of the page (right or left) or to the center.

Style tab

On Style tab you can adjust the appearance of the icons.

In Style section you can choose one of 6 available styles:

Also, you can color the icons the way you like:

Icon color and Background color settings seem to be quite clear, however, two last options might be not that obvious.

Hover means navigation and icons’ appearance may also vary– you can set the icon to have its native style on hover or change it to white or black. You can do the same thing with background color on hover:

Coming back to Style tab, you can find a possibility of choosing the icons’ border radius and select animation – the way the icons will behave when you hover on them. There are 5 different variants so you can choose one or disable this option:

Congrats! Your widget is ready to be installed on your website.

Customize your own widget with the help of our Demo!

This panel is just for you to look into the settings and try a widget yourself.