# SVG Icons

## Built-in theme SVG icons

The list of Theme Icons can be viewed [<mark style="color:blue;">here</mark>](<https://unicorn-theme-valuable.mpthemes.net/pages/theme-icons >).

Once you have decided on the icon you want to use in one or another section, copy the icon name by simply hitting the image.

<figure><img src="/files/2RO5Mj3KKn8odQmbnUjd" alt=""><figcaption></figcaption></figure>

To confirm that the icon has been copied, you may notice the "Copied" text next to the icon's name.

You can now paste the icon name into the corresponding field of a section or block you are customizing. In our example, we use the "Multicolumn" section with the "Column" block to set up settings. And here is what we have got:

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

Available theme sections and blocks where SVG icons can be used:

#### Header:

* [<mark style="color:blue;">Menu icons</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/static-sections/header/menu-icons)
* [<mark style="color:blue;">Contacts</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header/contacts#line-1-line-4)

#### Template:

* Collage of images -> [<mark style="color:blue;">List item</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/collage-of-images/list-item)
* Featured product -> [<mark style="color:blue;">Icon with text</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-product#icon-with-text)
* Map -> [<mark style="color:blue;">Information line</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/map#information-line)
* Media -> [<mark style="color:blue;">List item</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/media#list-item)
* Multicolumn -> [<mark style="color:blue;">Column</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/multicolumn#column)
* [<mark style="color:blue;">Ticker</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/ticker) -> [<mark style="color:blue;">Content</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/ticker#content-1)

#### Product page:

* Product information -> [<mark style="color:blue;">Icon with text</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/products/product-information#icon-with-text)

***

## Integrate custom SVG icons into the theme

This article provides instructions on integrating custom icons into the theme. There are a few steps required to manage this task in a store.

### The New Approach

{% hint style="info" %}
The following configurations are available for theme versions starting from v3.0.0.
{% endhint %}

**Step 1**

{% hint style="warning" %}
**Note!** Applying these customizations requires design skills and abilities. You can create an icon using various methods. Operating the optimizer is just one example of the many available options.
{% endhint %}

Upload your custom SVG into the optimizer <https://svgomg.net/> and set the parameters provided below:

* **Turn off** the **"Remove view Box"** option.
* **Turn on** the **"Prefer view Box to width/height"** option.
* **Turn on** the **"Remove style elements"** option.

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

**Step 2**

Set the icon color to adjust dynamically based on the applied color settings. This approach lets the theme's CSS control the icon's color seamlessly:

* search for lines `stroke` or `fill` and add a value other than `none`.

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

* set the value of `currentColor` for its `fill` or `stroke` properties.

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

**Step 3**

Copy and paste the icon code into the **"Icon SVG"** fields in the corresponding sections or blocks of the Theme Editor. This functionality is available in the following sections and blocks listed [<mark style="color:blue;">above</mark>](#header).

The following example demonstrates the custom SVG icon in the "[<mark style="color:blue;">Ticker</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/ticker)" section:

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

***

### The Old Approach (v2.1.0 and lower)

{% hint style="info" %}
Follow the steps outlined below to add custom SVG icons to theme versions up to **2.1.0**.
{% endhint %}

**Step 1**

Remove icon styles:

<figure><img src="/files/5852Q1ekGIdXtURdyD9E" alt=""><figcaption></figcaption></figure>

**Step 2**

Add the class `icon`.

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

**Step 3**

Change the icon color:

* find all `fill`:

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

* Replace the value with the `fill="currentColor"` (there may be multiple instances):

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

**Step 4**

Replace icon width and height sizes with coordinates:

* Remove the following dimensions:

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

* Then, add dimensions using the provided template `viewBox="0 0 WIDTH HEIGHT"`, ensuring you use the original width and height that were removed.

<figure><img src="/files/6qYHanpL4VREet6JsWvn" alt=""><figcaption></figcaption></figure>

**Step 5**

Implement the custom icon into the theme:

* To edit the theme code, go to your Shopify admin and press the three dots \[**...**] button next to the theme name. Then, select the **"Edit code"** item.

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

* Select the **snippets/** folder and add a new file named **icon-theme-CUSTOM\_NAME.liquid**.
* Copy and paste the HTML code of the custom icon into the added file:

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

**Step 6**

In the admin, enter **CUSTOM\_NAME** using the field for icon selection. In the following example, the custom icon was applied to the Header using the "Menu icons" block:

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

**Step 7**

Repeat the same steps to add more custom icons to the theme.


---

# 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://mpithemes.gitbook.io/unicorn-shopify-theme/svg-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.