> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/social-icons.md).

# Social Icons

### **Introduction**

The **Social Icons Widget** in **ModernPress** allows you to easily display social media icons with different design styles. This widget is perfect for linking to your social media profiles and enhancing user engagement.

***

**Key Features:**

\
✅ 3 Unique Layout Styles\
✅ Customizable Icon Size & Spacing\
✅ Hover Effects & Color Customization\
✅ Supports All Major Social Media Platforms\
✅ Fully Responsive & Mobile-Friendly

***

### Adding the Social Icons Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Social Icons"** in the **ModernPress Widgets** panel.

{% endstep %}

{% step %}
Drag and drop the widget into your section.

{% endstep %}

{% step %}
Add your social media links and customize the layout.

{% endstep %}
{% endstepper %}

***

### **Layouts Overview**

#### **Layout 1 - Icons Without Background**

📌 Simple, clean icons with no background.\
🎨 Ideal for **minimalistic designs**.

#### **Layout 2 - Icons with Black Background**

📌 Icons are placed inside a **black background**.\
🎨 Perfect for **high-contrast and modern designs**.

#### **Layout 3 - Icons with Colored Backgrounds**

📌 Each icon has a **background color matching the social media platform**.\
🎨 Best for **vibrant and eye-catching layouts**.

***

### **Customization Options**

#### **General Settings**

📌 **Add Unlimited Social Media Icons** – Choose from various platforms.\
🔗 **Custom Links** – Each icon can be linked to a social profile.\
📏 **Adjust Icon Size & Spacing** – Control the layout flexibility.

#### **Style Settings**

🎨 **Custom Colors** – Override default colors for icons and backgrounds.\
⚡ **Hover Effects** – Enable color changes, shadows, or animations on hover.\
📏 **Padding & Margins** – Adjust spacing for alignment.

#### **Advanced Features**

📱 **Mobile Optimization** – Icons adjust for smaller screens automatically.\
🌍 **Supports Custom Icons** – Upload your own SVG icons if needed.

***

### FAQs

<details>

<summary>Can I add custom social media platforms?</summary>

Yes! You can upload a custom icon and link it to any platform.

</details>

<details>

<summary><strong>Can I change the colors of the icons?</strong><br></summary>

Yes! You can customize both the icon and background colors.

</details>

<details>

<summary>Is the widget responsive?</summary>

Yes! The icons automatically adjust for mobile-friendly layouts.

</details>

<details>

<summary>Can I enable hover effects?</summary>

Yes! You can add hover animations like scaling, color changes, and more.

</details>

***

### **Need Help?**

For support, contact us at <support@modernpress.com>.