# Icon Box

![](https://3485648446-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mg4EFSJWK87Ea9WGnlp%2F-MgAv1aLKjGKxOtleJpc%2F-MgAvF7y-m5sH3pblsJ1%2FIcon-Box-1024x183.webp?alt=media\&token=80826654-765f-4ab3-ab97-50ae4d84292c)

## **Content Tab** <a href="#content-tab" id="content-tab"></a>

### **Info Box** <a href="#info-box" id="info-box"></a>

* **Alignment:** Left, centers, right or justified.
* **Icon or Image:** Here you have a list of the entire collection of Font Awesome icons as well as other icon. And you able to upload your custom image.
* **View:** Set the view of the icon as ‘Default’, ‘Stacked’ or ‘Framed’. Stacked is with a background and framed is with a frame surrounding the icon.
* **Title & Description:** Insert the title and description of your Icon Box widget.

### Button <a href="#button" id="button"></a>

Set the [Button Options](button-options) that are applicable to this widget.

## Style Tab <a href="#style-tab" id="style-tab"></a>

### Icon <a href="#icon" id="icon"></a>

* **Icon Color (w/ Hover):** Set the color of the icon
* **Background Color (w/ Hover):** Set the background color of the icon
* **Spacing (w/ Hover):** Set the spacing of the icon
* **Size (w/ Hover):** Set the size of the icon
* **Padding (w/ Hover):** Set the padding of the icon
* **Rotate (Hover):** Set the hover rotation of the icon
* **Border Radius (w/ Hover):** Set the border radius of the icon

### Content <a href="#content" id="content"></a>

* **Title (w/ Hover):** Control title color, font-size and typography
  * **Spacing:** Set the spacing of the title
  * **Color:** Set the color of the title text
  * **Typography:** Set the typography of the title text
* **Description (w/ Hover):** Control description color, font-size and typography
  * **Spacing:** Set the spacing of the description
  * **Color:** Set the color of the description text
  * **Typography:** Set the typography of the description text

### Button <a href="#button-1" id="button-1"></a>

Set the [Button Options](button-options) that are applicable to this widget.

#### Transform <a href="#transform" id="transform"></a>

Set the [Transform](../extensions/transform) that are applicable to this widget.

#### Background Overlay <a href="#background-overlay" id="background-overlay"></a>

Set the [Background Overlay](../extensions/background-overlay) that are applicable to this widget.

## Advanced Tab <a href="#advanced-tab" id="advanced-tab"></a>

Set the [Advanced options](https://elementor.com/help/advanced-tab/) that are applicable to this widget
