---
title: Icon Box
description: "## Overview The **Icon Box widget in SiteCraft** allows you to display icons with titles and descriptions in a structured and visually appealing layout. It’s perfect for highlighting features, services, or key information with clear visual cues. --- ## Key…"
url: "https://sitecraft.themeshala.com/docs/icon-box/"
updated: "2026-04-19"
category: General Widgets
---

# Icon Box

## Overview

The **Icon Box widget in SiteCraft** allows you to display icons with titles and descriptions in a structured and visually appealing layout. It’s perfect for highlighting features, services, or key information with clear visual cues.

---

## Key Features

- Icon, title, and description support
- Icon position control (top, left, right)
- Multiple layout styles *(if available)*
- Icon library integration
- Custom link support
- Alignment and spacing control
- Hover effects and animations
- Fully responsive design

---

## How to Enable the Widget

Before using the Icon Box widget, make sure it is enabled.

**Steps:**

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

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

---

## How to Add the Widget in Elementor

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

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

---

## Content Settings

Manage icon box content and structure.

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

**Options:**

- **Icon** – Choose icon from library
- **Title** – Enter heading text
- **Description** – Add supporting content
- **Link** – Add URL (optional)
- **Icon Position** – Top, Left, Right
- **Alignment** – Left, Center, Right

---

## Style Settings

Customize the visual appearance.

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

**Available Controls:**

- **Icon Styling** – Size, color, background
- **Typography** – Title and description styling
- **Text Color** – Customize colors
- **Spacing** – Control gap between elements
- **Box Styling** – Background, padding, border, shadow
- **Hover Effects** – Animations and transitions

---

## Advanced Settings

Fine-tune layout and responsiveness.

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

**Includes:**

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

---

## Use Cases

Perfect for:

- Service highlights
- Feature sections
- Process steps
- Info boxes

---

## Result

You can now create structured and visually engaging content blocks using the **SiteCraft Icon Box Widget**, making it easy to highlight important information.