---
title: Social Icons
description: "## Overview The **Social Icons widget in SiteCraft** allows you to display social media links with customizable icons and styles. It helps you connect your website with your social profiles using clean layouts and flexible design options. --- ## Key…"
url: "https://sitecraft.themeshala.com/docs/social-icons/"
updated: "2026-04-19"
category: General Widgets
---

# Social Icons

## Overview

The **Social Icons widget in SiteCraft** allows you to display social media links with customizable icons and styles. It helps you connect your website with your social profiles using clean layouts and flexible design options.

---

## Key Features

- Multiple social icons support
- Custom links for each platform
- Icon style options (default, rounded, circle, etc.)
- Alignment control (left, center, right)
- Icon size and spacing control
- Color and background customization
- Hover effects and transitions
- Fully responsive design

---

## How to Enable the Widget

Before using the Social Icons widget, make sure it is enabled.

**Steps:**

1. Go to **SiteCraft → Dashboard → Widgets**
2. Find **Social Icons Widget**
3. Toggle to enable it
4. Click **Save Changes**

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-switcher.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-switcher.png)

---

## How to Add the Widget in Elementor

1. Open your page with **Elementor Editor**
2. Search for **“Social Icons”** under SiteCraft widgets
3. Drag and drop it into your section
4. Add icons and customize styles

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-scaled.png)

---

## Content Settings

Manage your social links and icons.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-content-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-content-scaled.png)

**Options:**

- **Social Icons List** – Add multiple icons
  - **Icon** – Choose social platform
  - **Link** – Add profile URL
- **Layout/Style** – Select icon style (if available)
- **Alignment** – Left, Center, Right

---

## Style Settings

Customize the appearance of icons.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-style-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-style-scaled.png)

**Available Controls:**

- **Icon Size** – Adjust icon dimensions
- **Spacing** – Control gap between icons
- **Color** – Icon color (normal & hover)
- **Background** – Background color and shape
- **Border Radius** – Rounded or circular icons
- **Hover Effects** – Animation and transitions

---

## Advanced Settings

Fine-tune layout and responsiveness.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-advanced-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/social-el-advanced-scaled.png)

**Includes:**

- Margin & padding
- Responsive visibility
- Motion effects
- Positioning
- Background & border

---

## Use Cases

Perfect for:

- Website headers and footers
- Contact sections
- Personal or business profiles
- Blog author sections

---

## Result

You can now display stylish and customizable social media icons using the **SiteCraft Social Icons Widget**, helping users easily connect with your platforms.