> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/svg-icons.md).

# SVG Icons

Use pre-designed SVG icons to display responsive images for all screen sizes in various parts of your store, such as the Header or dynamic theme sections.

## Built-in theme SVG icons

View the list of Theme SVG icons [<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 a section, copy the icon name by simply clicking 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&amp;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.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FdHQFSxdiZjElNAf6D0jq%2Fsvg%20icon_add.png?alt=media&amp;token=0f939427-a17e-4590-bbb9-ec48945ee9a7" alt=""><figcaption></figcaption></figure>

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

#### Header:

* Icon menu -> [<mark style="color:blue;">Menu item</mark>](/unicorn-shopify-theme/section-groups/header/icon-menu/menu-item.md)
* Header -> Contact  -> [<mark style="color:blue;">Contact line</mark>](/unicorn-shopify-theme/section-groups/header/header/contact.md#contact-line)

#### Template:

* "Header" block: [<mark style="color:blue;">Icon</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/icon.md),  [<mark style="color:blue;">Icon with text</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/icon-with-text.md), and [<mark style="color:blue;">Content group</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/content-group.md)
* Multicolumn -> [<mark style="color:blue;">Column</mark>](/unicorn-shopify-theme/dynamic-theme-sections/multicolumn.md#column)
* Scrolling text -> [<mark style="color:blue;">Scrolling item</mark>](/unicorn-shopify-theme/dynamic-theme-sections/scrolling-text.md#scrolling-item)

#### Product page:

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

***

## 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 to 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&amp;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&amp;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&amp;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 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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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%2FcUQMLScAmrllkR4FcjX2%2Fadmin_edit%20code.png?alt=media&amp;token=7f5896bc-98a4-452e-a735-14ec63a6b604" 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.

**Step 6**

In the admin, enter **CUSTOM\_NAME** in the icon selection field.

**Step 7**

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