---
title: "How to Add Social Media Icons in Elementor?"
url: https://theplusaddons.com/docs/add-social-media-icons-in-elementor/
date: 2024-06-14
modified: 2026-04-09
author: "Aditya Sharma"
description: "It is important to have a strong social media presence for any business or individual. Having social media icons linking to your social media profiles on your website allows visitors..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Social-Media-Icons-in-Elementor-1024x536.jpg
word_count: 716
---

# How to Add Social Media Icons in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes a Social Icon widget that allows users to add different social icons with custom links.
- The Social Icon widget offers multiple predesigned styles for social media icons.
- Magic Scroll, Tooltip, Mouse Move Parallax, and Continuous Animation are Pro features available for the Social Icon widget.
- Users can manage icon colors, background colors, and border colors through the Icon Color section in the Social Icon widget.

It is important to have a strong social media presence for any business or individual. Having social media icons linking to your social media profiles on your website allows visitors to easily follow you on each platform.

With the Social Icon widget from The Plus Addons for Elementor, you can easily add different social icons with custom links in Elementor.

### Check the Live Widget Demo

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/social-icons-for-elementor/)

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- Make sure the Social Icon widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Social Icon and activate.

- This is a Freemium widget to unlock the extra features; you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=9V0E9mFmaro

## How to Activate the Social Icon Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/06/social-icon.png)

## Key Features

- **Multiple Styles** - You can select from multiple predesigned styles.

- **Magic Scroll** (Pro) - You can easily add a magic scroll effect to an individual social icon.

- **Tooltip** (Pro) - You can add a tooltip to an individual social icon.

- **Mouse Move Parallax** (Pro) - You can add a mouse move parallax effect to an individual social icon.

- **Continuous Animation** - You can add different continuous animations to an individual social icon.

## How to Use the Social Icon in Elementor?

Add the Social Icon widget from The Plus Addons for Elementor to the page.

You can select a pre-defined style for the social media icons from the **Style** dropdown.

![](https://theplusaddons.com/wp-content/uploads/2024/06/social-icon-content.gif)

> *Note: For some styles, you’ll find the ****Select Hover Style**** dropdown to select a hover style.*

From the **Social Network Select** section, you have to add the social media icons.

You’ll find one repeater item by default; open it.

From the **Social Network Select** dropdown, you have to select a social media icon.

In the **Link** field, you have to add a link for the social media icon. Ideally, you should add your social media profile link.

Then, in the Title field, you can add a title for the social media icon. 

> *Note: You’ll see the Title for some specific styles only.*

You can color the icon from the **Icon Color** section.

Then, from the **Icon Hover Color** section, you can add a hover color to the icon.

From the **Background Color** and **Background Hover Color** sections, you can manage the background color and hover color of the social icon.

After that, from the **Border Color** section, you can change the border color and border hover color from the **Border Hover Color** section.

Then you’ll find some options to add different effects.

> *Note: Most of these options work similarly to the global options available for the other widgets of The Plus Addons for Elementor.*

**Magic Scroll** (pro) - From here, you can [add a scrolling effect to the social icon item](https://theplusaddons.com/docs/magic-scroll-effect-in-elementor/).

**Tooltip** (pro) - From here, you can [add a tooltip to the social icon item](https://theplusaddons.com/docs/global-tooltips-settings-overview/).

**Mouse Move Parallax** (pro) - From here, you can [add a mouse move parallax effect to the social icon item](https://theplusaddons.com/docs/mouse-cursor-parallax-effects-in-elementor/).

**Continuous Animation** - From here, you can [add different continuous animation effects](https://theplusaddons.com/docs/global-continuous-animation-widget-in-elementor/) to the social icon item.  

You can click on the **+ Add Item** button to add more social media icon items.

From the **Alignment** section, you can align the social icons for responsive devices.

You can align the social media icons vertically by enabling the **Vertical Layout** toggle.

> *Note: You won’t find the Vertical Layout toggle option for the Custom style.*

## How to Style the Social Icon Widget?

You’ll find all options in the **Style** tab to style the Social Icon widget.

**Style** - From here, you can manage the gap between the social icons, padding, icon size, and more. The options will vary based on the selected style in the content tab.

![](https://theplusaddons.com/wp-content/uploads/2024/06/social-icon-style-1.png)

**On Scroll View Animation** -  This is our global extension available for all our widgets, which adds scrolling animation as the widget comes into the viewport. You can learn more about this from here.

[Learn more about On Scroll View Animation](https://theplusaddons.com/docs//on-scroll-view-animation/)

Advanced options remain common for all our widgets; you can explore all their options from here.

[View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..)

## Frequently Asked Questions

**Q: What should I do if the Social Icon widget isn't showing up in Elementor?**
A: If the Social Icon widget from The Plus Addons for Elementor isn't appearing, ensure that both the Elementor FREE Plugin and The Plus Addons for Elementor are installed and activated. Additionally, check that the widget is activated by navigating to The Plus Addons u2192 Widgets and searching for 'Social Icon'. If it's not toggled on, it won't display.

**Q: Can I use the Social Icon widget for linking to my business's social media profiles?**
A: Yes, the Social Icon widget allows you to add custom links to your social media profiles. You can select from various social media icon options and enter the corresponding links in the Link field. This feature is essential for enhancing your online presence and making it easy for visitors to follow you on platforms like Facebook, Twitter, and Instagram.

**Q: What are the best styling options for the Social Icon widget?**
A: The best styling options for the Social Icon widget include managing the gap between icons, adjusting padding, and customizing icon sizes. You can also set hover colors and background colors. These styling options vary based on the selected style in the content tab, allowing for a tailored look that matches your website's design.

**Q: Are there any limitations when using the Social Icon widget?**
A: One limitation of the Social Icon widget is that the Vertical Layout toggle is not available for Custom styles. This means if you want to align your icons vertically, you must choose a style that supports this feature. Additionally, some advanced effects, like Magic Scroll and Tooltip, are only available in the PRO version of The Plus Addons for Elementor.

**Q: How can I add effects to the social icons?**
A: You can enhance your social icons by adding effects such as Magic Scroll, Tooltip, Mouse Move Parallax, and Continuous Animation. These effects can be applied individually to each icon, providing a dynamic user experience. To access these features, navigate to the respective sections in the widget settings, noting that some effects are exclusive to the PRO version of The Plus Addons for Elementor.

**Q: What happens if I don't activate the Social Icon widget in The Plus Addons?**
A: If you don't activate the Social Icon widget in The Plus Addons for Elementor, you won't be able to use it on your pages. This means you won't have access to the various social media icons and linking options that can enhance your website's interactivity and user engagement. Always check the widget activation status to ensure full functionality.