# Icon Custom

### How to Add a Custom Icon in AppSections Block Button Settings

The "Custom Icon" setting in the AppSections Style settings allows you to add a custom icon by providing an SVG path. This setting provides flexibility in customizing the visual appeal of your buttons with unique icons. Here is how you can add a custom icon using an SVG path:

### **Custom Icon**

* **Purpose:** This setting allows you to add a custom icon to your button using an SVG path.
* **Usage:** Copy the SVG path from a preferred icon library and paste it into the custom icon setting.

### Recommended Icon Libraries

We recommend using the following icon libraries for high-quality SVG icons:

* **Font Awesome :** [**https://fontawesome.com/search?o=r\&m=free**](https://fontawesome.com/search?o=r\&m=free)
* **Bootstrap Icons :** [**https://icons.getbootstrap.com/**](https://icons.getbootstrap.com/)
* **Remix :** [**https://remixicon.com/**](https://remixicon.com/)
* **Phosphor :** [**https://phosphoricons.com/**](https://phosphoricons.com/)
* **Boxicons :** [**https://boxicons.com/**](https://boxicons.com/)
* **Iconoir :** [**https://iconoir.com/**](https://iconoir.com/)

### Steps to Add a Custom Icon

1. **Select the Block Button:**
   * Open your Shopify theme editor.
   * Navigate to the specific block button where you want to add a custom icon.
2. **Locate the Custom Icon Setting:**
   * In the block button settings, find the **Custom Icon** option.
3. **Choose an Icon from a Library:**

   * Visit one of the recommended icon libraries.
   * Select an icon that fits your design and functionality needs.
   * Copy the SVG of the selected icon.

   <figure><img src="/files/bVMca2pR0i3dTMIU3cHo" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/RwWqb5mBGA6190XN1Epc" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/wySdcs2hxSW5l1FXNZK4" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/XAkQ0UrHrjTRmLcQ9RNX" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/mLRu1GQQqIWDcgSUYR3g" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/6rqeYz8mtsP5kYS6u2W6" alt=""><figcaption></figcaption></figure>
4. **Add the Custom Icon:**

   * Paste the copied SVG path into the **Custom Icon** setting in the block button settings.

   <figure><img src="/files/ARHZBizNsnWUN06Ukaab" alt=""><figcaption></figcaption></figure>

### Ensuring the Right Custom Icon

1. **Preview Changes:**
   * After adding the custom icon, preview your store to see how the changes look.
   * Check the button to ensure the icon is applied correctly and enhances the visual appeal and functionality.
2. **Check Consistency:**
   * Ensure that the custom icon aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.
3. **Test Across Devices:**
   * Verify the custom icon on different devices to ensure it looks good and maintains functionality on all screen sizes.

### Summary

By using the "Custom Icon" setting in the block button settings, you can customize the appearance of your buttons with unique icons using SVG paths. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices.

If you have any questions or need further assistance, please contact our customer support team.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appsections.com/settings/icons/styles/icon-custom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.