# 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 %}