# Icon Box

The **Icon Box** is **used to display text with the icon.** The most common usage is for **sections that list features of products or services**. 

### Using the Icon Box widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Icon Box** widget from the menu bar on the left-hand side of your screen then drag and drop it into the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FFi137Fe1VBGsYPa3xxRe%2FCompanion%20-%20icon%20box%20add.png?alt=media\&token=b0805574-4f7c-4fd3-aa8f-8153df584de7)

### Step 2:

You will get a window with the basic setting options under the **Content** tab. 

In **General settings**, you can choose the icon from the icons library and write Title & Description. If you wish you can add the link with the icon as well.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F919hAsLTcbtFlYZdbTQH%2FCompanion%20-%20icon%20box%20general.png?alt=media\&token=5440ef3b-6485-48ca-8f32-f2552111ed44)

### Step 3:

Now, by clicking on the Style Tab you can customize the alignment of the icon, typography, margin, padding, color, and many more for used items in the Icon box widget:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2F39CZPcD7nCByOl0ssHMC%2FCompanion%20-%20icon%20box%20style.png?alt=media\&token=17ad83fe-9936-462e-889c-fb0a3415cd7c)

### Step 4:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FgTXr3aOwiLefMX8U1WuV%2FCompanion%20-%20icon%20box%20adv.png?alt=media\&token=7f2c0057-b4e7-4315-b653-20638077ece0)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FaUsP2GzjyPJRIz90kHRG%2FCompanion%20-%20icon%20box%20final.png?alt=media\&token=879def21-8e5f-4fa5-8bfc-6dfb75cb4c6c)

Great job! You have done it successfully.