# Icon

This Guide will Help you to edit **Icon Widget** Settings and Style.

#### DRAG ICON WIDGET

When you **Drag and Drop** Icon Widget in a Page. You will see the image like below.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Drag-icon.png)

#### ICON WIDGET SETTINGS

When you Open Dialog Box, you can be able to customize **Icon** from the list and **Icon Color** also.

Icon Size gives you different **predefined sizes** of Icon, simply choose size from **dropdown list** and if you want to give **custom size** then choose **custom** link from dropdown list.

**Icon Alignment** gives you Alignment of Icon in a page.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-settings.png)

#### EDIT BACKGROUND STYLES

You can edit **Background Shape** like Circle, Square, Rounded, Outline Circle, Outline Square, Outline Rounded and None.

Icon Background Size gives you **space** around the **Icon**, and background color gives you the Background Color.

Appearance **Effect** gives Animation like Top to bottom, Bottom to top, Left to right, Right to left, Appear and None also.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-background.png)

#### ICON CUSTOM LINK

Custom Link gives **Link** to Icon.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-link.png)