> 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

## 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="/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.

<figure><img src="/files/2dcONEY8KgBaBYCeVD9l" 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="/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 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/4Dli1Op4DZuwC4G4DmXE" 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.