# User Menu - Custom Icons

### Add/Change User Menu Item

#### 1. Add **"User Menu items"** eg. *(Site administration -> Appearance -> Theme settings -> User menu items)*

```
LabelXYZ|https://apple.pl
```

<figure><img src="https://2873786088-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCsh2IXpGstOXBcIR0peN%2Fuploads%2FtUSQASrsZYZNDMo4BKYF%2Fuser-menu-items.png?alt=media&#x26;token=00435017-b7d2-4b30-888f-7b48575569bd" alt=""><figcaption></figcaption></figure>

### Add Custom Icon

#### 2. Add **Custom CSS** *(BAZ -> Advanced -> Raw SCSS)*

```
.usermenu .dropdown-item[data-identifier="LabelXYZ"] {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 6H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 12H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 18H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
}
```

Important: <mark style="background-color:red;">data-identifier</mark> needs to be unique.&#x20;

If **Label** is eg. **Apple** then the <mark style="background-color:red;">data-identifier</mark> is **"Apple"**

If contains more words (e.g *"First letter of the sentence"*) then the proper code might look like this:

{% code overflow="wrap" %}

```
.usermenu .dropdown-item[data-identifier*="First"] {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 6H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 12H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 18H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
}
```

{% endcode %}

### **How to convert SVG Icon?**

<https://yoksel.github.io/url-encoder/>

1\. Insert SVG code\
2\. Copy CSS code from "Ready for CSS"

### SVG Icons Library

You can use icons from e.g:

* FontAwesome <https://fontawesome.com/icons/stapler?s=solid&f=classic>
* Iconic <https://iconic.app/>
* Iconoir <https://iconoir.com/>

<figure><img src="https://ticksy_attachments.s3.amazonaws.com/6286697654.png" alt="6286697654.png"><figcaption></figcaption></figure>