Social Media Icons Examples

Check Social Icons examples for website to reveal the full potential of the widget. Make sure it will suit your any goals.

Example 1: Social Icons

This is one of the most common variant of the widget. The icons are circle and arranged in one horizontal line - thanks to Inline layout of the widget. Though you can choose any color of the background, here the original colors of the media are saved, and their symbols are white. It’s a good variant for a content area of any website.

Example 2: Floating Icons

If you choose Floating layout, the widget will move along the page, following the scroll and thus will stay always at hand. This type of layout can be aligned to any side of the screen, and will be rearranged into horizontal, if you choose central align. The icons here are square with default style.

Example 3: Black Icons

These icons look absolutely unique thanks to the black-and white color solution. The colors of the background and the symbol of the media was changed in the settings. The icons are inline and aligned center. There’s also a fly animation effect on hover.
Start with creating your widget
Start with creating your widget
Fast. Easy. No Coding.
Create widget

Example 4: White Icons

To fit the widget into the general concept of the style, you can change their look totally. Here the icons have white background and the symbols of the media saved the native colors to save the authenticity. Rounded shape and custom width made them look clean and minimalist.

Example 5: Clean Icons

Thanks to Symbol style applied to this widget, the icons are displayed without the background. The icons of the media saved the native colors and they look maximum minimalist and clean. Zoom animation appears on hover, and there are also some more animation variants that you can choose.

Example 6: More Icons

You can display any amount of icons on the page, and this example proves that they will look great - whatever the number. There are 8 icons arranged in one line and aligned center. All have native colors of background and symbols and show bounce animation when hovered.

Example 7: Messengers

This example shows how you can direct users to your channels in messengers right from the website. The icons in this example are of a moderate 32px size and have circle shape. The original colors of the messengers are saved in the background, and the symbols themselves are white. These options, as well as more customization settings can be easily changed in the editor.

Join 2,078,753 customers already using Elfsight Apps

Get the taste of 80+ powerful apps by Elfsight. No credit card. Joining is free!
Get started
Get 20% discount now!