# Icon

The **Icon** Element allows you to place icons anywhere on your site. Every icon is 100% full vector, so they look incredibly sharp and are retina-ready!&#x20;

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FjNYynKJqh6SJjVG223s4%2Fzionbuilder-doc-icon-element-rs.gif?alt=media&#x26;token=01b5e7da-e58f-4fb4-9ca8-0a4aa37849d5" alt=""><figcaption></figcaption></figure>

**General Settings:**

**Link:** Set **Icon** URL target and title.

**Align:** Select **Icon** alignment relative to the containing element.

**Style:** Select style for the icon.

**Default:** Displays only the icon.

**Filled:** Has background-color.

**Bordered:** Has a border.

**Shape:** Set the **Icon** shape. If you select rounded, Radius option becomes available allowing you to set the roundness of the **Icon**.

**Icon Styles:**

Set the Normal / Hover state of the icon.

**Icon color:** Set the icon color.

**Shape color:** Set the icon shape color.

**Icon size:** Set the icon size. Click the monitor icon to change this setting for different viewport sizes.

**Space around icon:** Change icon padding.

**Icon rotate:** Set icon rotation.
