# 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FhXmPzAbXWLfXe4bknw5s%2Fsvg%20icon_copy.png?alt=media&#x26;token=47e6a30e-f44f-447a-868d-3fb7cbf3deec" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FSkAdXDvMLSEhLjGngBaO%2Fsvg%20icon_editor.png?alt=media&#x26;token=29059309-da9e-4204-a96c-93749927ca9a" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FlZQHFobOqCnx2ODGZyxw%2Ficon%20app_settings.png?alt=media&#x26;token=e1e4c2d2-4049-43ba-b737-7c130b96ce00" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FCCuaEolFVtOCJe1sxbhA%2Fcustom%20icon_color.png?alt=media&#x26;token=0c10673f-0a54-4c4c-999c-642f6150994f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7ZzHEsQtZGNzHfikJN7D%2Fcustom%20icon%20color.png?alt=media&#x26;token=039d737a-d440-4fff-84ec-585bbbcb4a8a" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVKmSUiz8qNNUuXbqYwsO%2Fsvg%20icon_html.png?alt=media&#x26;token=620da067-bba2-43aa-8946-d2173f866343" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FrVkoYna9lscoLXiTnTg3%2Ficon%20styles.png?alt=media&#x26;token=27d5e466-f386-468e-afe3-d80675bf8c3b" alt=""><figcaption></figcaption></figure>

**Step 2**

Add the class `icon`.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F3tZ3EukJ2ZqnEqmgZmxu%2Fclass_icon.png?alt=media&#x26;token=0b0d144e-6286-4d47-a9a4-861b57ed1d51" alt=""><figcaption></figcaption></figure>

**Step 3**

Change the icon color:

* find all `fill`:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FCCuaEolFVtOCJe1sxbhA%2Fcustom%20icon_color.png?alt=media&#x26;token=0c10673f-0a54-4c4c-999c-642f6150994f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7ZzHEsQtZGNzHfikJN7D%2Fcustom%20icon%20color.png?alt=media&#x26;token=039d737a-d440-4fff-84ec-585bbbcb4a8a" alt=""><figcaption></figcaption></figure>

**Step 4**

Replace icon width and height sizes with coordinates:

* Remove the following dimensions:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FkG0HCobZMT9VAFUVbDwA%2Ficon_size.png?alt=media&#x26;token=296a743d-7212-4b4f-9f61-89b940e3e6e1" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7rpvVoQwLGCKGGSvO8D2%2Ficon_dimensions.png?alt=media&#x26;token=4019f347-8fbb-4cb6-980c-789a3d996366" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FlmGZP3UETx6UPDlpdSKO%2Fedit%20code_theme.png?alt=media&#x26;token=5db4d9dd-d44d-4e47-aa29-b692a16fb13d" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbaaOFR6GqpfIAXu19UWm%2Fedit%20code_custom%20icon.png?alt=media&#x26;token=04b47001-1154-4f94-94d9-54be7b2fc39c" 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="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FZDvVrDNeyC6F9EzAAlRQ%2Fcustom_icon.png?alt=media&#x26;token=1a1a5c21-e094-4aac-ad37-82927312945c" alt=""><figcaption></figcaption></figure>

**Step 7**

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