# Adding Custom Icons

The Palo Alto Icons Row section comes with predefined Icons to choose from. You can also add your own Custom Icons in the form of Images.

![](/files/btWSaNJOtTkP9xsir0F9)

However, if you want to use the SVG format for its higher quality and already have images in mind, here's how to add them in.

### Step one

The first order of business is to upload your SVG files into the Theme Code. From your Shopify admin page, go into your Online Store > Themes and click on Actions > Edit code:

![](/files/n3Vctj7UzO5FiBBXJWky)

Next, open up the **Snippets** folder and choose to *Add a new snippet*.

![](/files/lKdVsqiESbwHlzakQ5St)

You will be prompted to give the new file a name. A common practice is to use lower case letters only with dashes instead of spaces (we call this 'kebab case'). We'll call our example 'custom-check-icon' which will automatically be converted to `custom-check-icon.liquid` by Shopify.

![](/files/XoJMpPWUxHnnt7oJAlWD)

Now you will have a blank file. You can simply paste in your SVG code for your icon. Usually, this pastes all in one line.

![](/files/xTMtcQVB9pTCsMle4pzu)

{% hint style="success" %}
Don't forget to **Save** the changes once you're done.
{% endhint %}

### Step two

Now that we have our custom icon ready to go, it's time to add it to the list of available icons. To do this, we have to open the `section-icons-row.liquid` file from the Sections folder.

![](/files/lYKb1395iiZjUQpoQkTO)

Here, we can use Command + F (or CTRL + F on Windows) to find the `icon_name` in the section schema settings.

![](/files/WDlV1zFKpBkamNaLjsuv)

Simply copy and paste the first value of this schema above itself and this will create a new option in the drop-down.

![](/files/FI6FGWTFiglQwuzOesen)

Next up, rename the value and label to something that matches the name of the custom icon.

![](/files/6YXjH5vcPD4sMUlVQbCv)

### Step three

The final step is to open up the `icons.liquid` file from the Snippets folder and add in a new option in the `case`.

![](/files/QDpxX5S7uQJZ41Y44053)

The easiest thing to do is to copy and paste lines 2 and 3 any place before a `when` tag. Once that's done, simply rename the text in the tags to match your custom icon name.

{% hint style="success" %}
Don't forget to **Save** the changes.
{% endhint %}

Your new option will now appear in the Icons Row block selection menu:

![](/files/4tfJiE0m3l8QKQZyJmPk)


---

# 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://palo-alto.presidiocreative.com/palo-alto-4.1/custom/adding-custom-icons.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.