# Custom icons

{% hint style="warning" %}
This tutorial works only with an advanced theme styling setup. As described here <https://www.one.thezero.club/guide/theme-styling/less-css-setup>.&#x20;
{% endhint %}

By default UIkit used for the front-end in the Zero One theme comes with a large set of icons, you can see them all in UIkit documentation[ https://getuikit.com/docs/icon](https://getuikit.com/docs/icon).&#x20;

Some of them are used in the Zero One theme for the social icons, slider & slideshow arrows, search, mobile menu icon, etc. But, many of them are custom, not like UIkit default. Now, we'll show you how to do it yourself.&#x20;

You can overwrite any of the default icons from UIkit and create additional ones.

### Let's change the mobile menu icon <a href="#add-and-overwrite-icons" id="add-and-overwrite-icons"></a>

In Zero One theme files find and go to `/assets/app/custom/icons/` folder. There are already some SVG icons, and these are the ones we added.&#x20;

Default UIkit icon we used for mobile menu button is `menu.svg` (all default UIkit icons can be found at `/assets/app/src/images/icons/` folder).&#x20;

**If you create and add an icon with an existing name**, you will overwrite the default icon of the same name. For example, `/custom/icons/close.svg` would overwrite the default close icon.

**If your icon uses a name that has not been used before**, it will be added as a new icon. For example, `/custom/icons/example.svg` will create a new icon that can be used via `<span uk-icon="example"></span>`.

After you add a custom icon to `/assets/app/custom/icons/` folder you must compile Less/JS again like usual <https://www.one.thezero.club/guide/theme-styling/less-css-setup>.&#x20;

#### So, here are few menu icons we created already for you.&#x20;

![The software used is Affinity Designer if you wonder.](https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4ZpEbnFxt2CBoFZg0N%2F-M7Dn-ukkLBtAwVsQe3L%2F-M7DnJnl1weVw5oZ7UgI%2Fcustom-menus.jpg?alt=media\&token=99afcb0d-25ce-4b4f-b733-44977e0f03b4)

We exported every one of them as .svg.&#x20;

**But after exporting you will have to do some SVG code fixing to make it right.**&#x20;

Default menu.svg has this code

{% code title="assets/app/src/images/icons/menu.svg" %}

```markup
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <rect x="2" y="4" width="16" height="1" />
    <rect x="2" y="9" width="16" height="1" />
    <rect x="2" y="14" width="16" height="1" />
</svg>
```

{% endcode %}

But after export, our icon had this code. **The main problem in this exported code is width and height.**

```markup
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-23.2642,-1.77636e-15)">
        <g id="Menu-2" serif:id="Menu 2" transform="matrix(1,0,0,1,23.2642,1.77636e-15)">
            <rect x="0" y="0" width="20" height="20" style="fill:none;"/>
            <g transform="matrix(0.75,0,0,1,2.5,-0.0300184)">
                <rect x="2" y="4" width="16" height="1"/>
            </g>
            <g transform="matrix(1.00218,0,0,1,-0.0393108,0)">
                <rect x="2" y="9" width="16" height="1"/>
            </g>
            <g transform="matrix(0.75,0,0,1,2.5,0.0300184)">
                <rect x="2" y="14" width="16" height="1"/>
            </g>
        </g>
    </g>
</svg>

```

So after code fixing and cleanup, it looks like this. Now it is ready.

```markup
<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="matrix(1,0,0,1,-23.2642,-1.77636e-15)">
        <g transform="matrix(1,0,0,1,23.2642,1.77636e-15)">
            <rect x="0" y="0" width="20" height="20" style="fill:none;"/>
            <g transform="matrix(0.75,0,0,1,2.5,-0.0300184)">
                <rect x="2" y="4" width="16" height="1"/>
            </g>
            <g transform="matrix(1.00218,0,0,1,-0.0393108,0)">
                <rect x="2" y="9" width="16" height="1"/>
            </g>
            <g transform="matrix(0.75,0,0,1,2.5,0.0300184)">
                <rect x="2" y="14" width="16" height="1"/>
            </g>
        </g>
    </g>
</svg>
```

So, the main code fix of the icon is to set width and height to 20.&#x20;

You can download these menu icons we created below, and try it yourself.

{% file src="<https://1582165953-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4ZpEbnFxt2CBoFZg0N%2F-M7Dn-ukkLBtAwVsQe3L%2F-M7DnqMvEHmO4DP7koZG%2Fcustom-menu.zip?alt=media&token=f0093fdd-b836-4950-b884-9846e88acef9>" %}
Three custom menus
{% endfile %}

{% hint style="warning" %}
Remember that after you add a custom icon to `/assets/app/custom/icons/` folder you must compile Less/JS again like usual <https://www.one.thezero.club/guide/theme-styling/less-css-setup>.&#x20;
{% endhint %}


---

# 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://www.one.thezero.club/guide/tricks/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.