---
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-09-22
lang: en
author: "Aditya Sharma"
description: "Almost every site needs a row of social links somewhere - in the footer, beside an author bio, in a sidebar. Building it by hand means chasing icons and hand-styling..."
image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Social-Media-Icons-in-Elementor-1024x536.jpg
word_count: 770
---

# How to Add Social Media Icons in Elementor?

## 

- The Social Icon widget in The Plus Addons for Elementor offers 39 ready-made networks plus a custom option, 15 built-in styles, and per-icon link, colour, and label settings.
- The free plugin version covers the documented setup, while Pro adds only three per-icon extras: Magic Scroll, Tooltip, and Mouse Move Parallax.
- Vertical Layout stacks the icons into a column, and it is hidden when Style is Custom.
- Font Awesome is required for the icons to render, and Custom can use either a font icon or an SVG when nothing else loads Font Awesome.

Almost every site needs a row of social links somewhere - in the footer, beside an author bio, in a sidebar. Building it by hand means chasing icons and hand-styling each link.

The **Social Icon** widget in The Plus Addons for Elementor gives you 39 ready-made networks plus a custom option, 15 built-in styles, and a per-icon link, colour and label.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/social-icons/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Free. Everything in this doc works on the free plugin - we published the page with Pro deactivated and the result was identical. Pro adds only three per-icon extras: **Magic Scroll**, **Tooltip** and **Mouse Move Parallax**.- **Switch it on:** **The Plus Addons > Widgets**, search **Social Icon**, turn the toggle on.- The addresses of your profiles, ready to paste.

![The Social Icon widget in The Plus Addons for Elementor.](https://theplusaddons.com/wp-content/uploads/2024/06/social-icon.png)

## Steps

- Add the **Social Icon** widget to the page.- In **Content > Content**, pick a **Style**. There are **Style 1** to **Style 15** and **Custom**.- Open the first row of **Social Network Select** and choose the network from the dropdown.- Paste the profile address into **Link**.- Add a **Title** if you want a label beside the icon.- Add a row per network, then set **Alignment** and, if you want a column rather than a row, turn **Vertical Layout** on.

![The Social Icon widget's Content section with the Style dropdown.](https://theplusaddons.com/wp-content/uploads/2026/09/socialicons-content.webp)

![A Social Network Select row with the network dropdown open.](https://theplusaddons.com/wp-content/uploads/2026/09/socialicons-network.webp)

## What You Will See

On the published page the icons render in a row, each one a link to the address you typed. We built four - Facebook, Twitter, Instagram and YouTube - and every icon carried its own profile URL.

![Four linked social icons with their titles, on a published page.](https://theplusaddons.com/wp-content/uploads/2026/09/socialicons-result.webp)

![Animated demo of adding social media icons in Elementor.](https://theplusaddons.com/wp-content/uploads/2024/06/social-icon-content.gif)

## Titles and hover styles only appear on some styles

**Title** is shown on **Style 1**, **Style 2**, **Style 4**, **Style 10**, **Style 12**, **Style 14**, **Style 15** and **Custom**. On every other style it is simply not rendered - we checked Style 3 on the published page and the labels were absent even though they were filled in.

**Select Hover Style** appears in the panel only when **Style** is **Style 14** or **Style 15**. It offers **Style 1** and **Style 2**.

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Style** | Style 1 to Style 15, or Custom | Style 1 |
| **Select Hover Style** | Hover effect - only for Style 14 and Style 15 | Style 1 |
| **Link** | The address the icon opens | # |
| **Title** | A label beside the icon, on the styles that support it | Empty |
| **Alignment** | Left, Center or Right - responsive | Center |
| **Vertical Layout** | Stacks the icons into a column | Off |

## How It Behaves

- **Vertical Layout** stacks the icons. We turned it on and the four icons moved from one row into four rows, one under the other. It is hidden when **Style** is **Custom**.- **Alignment** moves the whole group; setting it to **Left** put the row against the container's left edge.- Choosing **Custom** in a **Social Network Select** row lets you supply your own icon through **Icon Options** - a font icon or an SVG.- Each row has its own **Icon Color**, **Background Color** and border colours, with separate hover values, so one icon can be branded differently from the rest.

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

## Limitations

- The widget does not load an icon font of its own. On a page where nothing else loads Font Awesome the icons come out blank - we measured the glyphs at zero height on a clean page, and they appeared as soon as Font Awesome was present. If your theme or another widget already loads it, you will not notice this.- Some network names in the dropdown are spelled unusually - **Google +**, **LinkedIN**, **Wordpress**, **Tiktok**, and two entries called **Odnoklassniki** and **Odnoklassniki 1**.- A few networks in the list no longer exist as they did - Google+, Digg, LastFM, Foursquare and Slideshare are still offered.- **Magic Scroll**, **Tooltip** and **Mouse Move Parallax** need Pro.

## Troubleshooting

### The icons are invisible but the links still work

Nothing on the page is loading Font Awesome. Add an element that does, or use **Custom** with an SVG icon.

### My titles do not show

Switch **Style** to **Style 1**, **2**, **4**, **10**, **12**, **14**, **15** or **Custom**. The other styles never render **Title**.

### There is no Select Hover Style dropdown

It only appears for **Style 14** and **Style 15**.

### The icons stay in a row

Turn **Vertical Layout** on. It is hidden while **Style** is **Custom**.

## Not verified

So you know exactly what has and has not been checked:

- The **Custom** network option with a font icon or an SVG.- The Pro extras - **Magic Scroll**, **Tooltip** and **Mouse Move Parallax**.- **Continuous Animation**, **Max. Width**, and the Style tab's gap, size, border and shadow controls.- Styles other than **Style 1**, **Style 3** and **Style 14**, and the hover effects themselves.

## Related Docs

- [How to Use the Magic Scroll Effect in Elementor?](https://theplusaddons.com/docs/magic-scroll-effect-in-elementor/)- [How to Use Global Continuous Animation in Elementor?](https://theplusaddons.com/docs/global-continuous-animation-widget-in-elementor/)

## Frequently Asked Questions

**Q: Why are my social icons blank but the links still open?**
A: Font Awesome is the missing piece here. The Social Icon widget in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH does not load its own icon font, so on a clean page the glyphs can render at zero height and look invisible while the links still work. Adding anything that loads Font Awesome, or switching to Custom with an SVG icon, brings the icons back.

**Q: Which social networks can I add with this widget?**
A: The widget ships with 39 ready-made networks plus a custom option, so it covers the common social profiles without hand-building each icon. The page also notes some dropdown names are spelled unusually, like Google +, LinkedIN, Wordpress, Tiktok, and two Odnoklassniki entries. That matters because the label in the panel may not match the spelling you expect, even though the network option is there.

**Q: Can I use my own icon instead of a preset social network?**
A: Custom is built for that case. In a Social Network Select row, choosing Custom lets you supply your own icon through Icon Options, using either a font icon or an SVG. That is useful when you need a network or brand mark that is not in the 39 presets, or when you want to avoid relying on one of the built-in names.

**Q: What should I use if I want the icons stacked vertically instead of in a row?**
A: Vertical Layout is the control that changes the layout from one horizontal row into a column of separate rows. The page shows that it stacks the icons one under another, but it is hidden when Style is Custom. If you want a left-aligned vertical list for a sidebar or footer block, this is the setting that changes the whole group’s flow.

**Q: Why do my title labels not appear on some styles?**
A: Title only renders on Style 1, Style 2, Style 4, Style 10, Style 12, Style 14, Style 15 and Custom. On every other style it is not rendered at all, even if you filled it in. That means missing labels are usually a style choice rather than a broken field, so picking one of those supported styles is what makes labels visible.

**Q: Does this widget work without Pro?**
A: The core Social Icon widget works on the free plugin version. The page says it was published with Pro deactivated and the result was identical. Pro only adds three per-icon extras: Magic Scroll, Tooltip and Mouse Move Parallax. If you only need social links with styles, labels and per-icon colors or links, the free version already covers that use case.