Vault Banner Icon Customisation

🤔 What is the Vault Banner Icon?

By default, Prism comes with the Vault Banner enabled. This converts the Vault name into an element with an icon next to it! This is purely an aesthetic change which enables you to change the icon and add that extra bit of customisation to your vault.

📂 How to change the Vault Banner Icon?

There are two ways outlined below to replace the Vault Banner Icon in Prism. A great source of icons is Icons8. To replace the icon do the following:

1. Look for an icon you like on Icons8 and click on it.
2. Then click on the Download Button.

Option 1 - Style Settings

You should be presented with the following window:

1. Select the Link (CDN) format. You can leave the Icon size on the default setting since usually it looks fine.
2. Copy the URL highlighted and nothing else.
3. Take the URL and navigate to Style Settings in your Obsidian Vault.
4. The option to change the Vault Banner Icon is under:
   Prism Theme -> Appearance -> Custom Vault Banner -> Custom Vault Banner (URL).
5. Now paste the URL inside the text field encapsulated in a url().
   e.g. url(https://img.icons8.com/arcade/64/null/toolbox.png)

Option 2 - CSS Snippet (Best for offline vaults)

The second option is to use a Base64 encoded icon instead. This assures that the icon will always render even if your device doesn't have an internet connection since all the data necessary for the icon is stored.

You should be presented with the following window:

1. Select the Base64 format. You can leave the Icon size on the default setting since usually it looks fine.
2. Select everything in-between and including the quotes "".
3. Due to an incompatibility with using Base64 encodes in Style Settings, in order to use this option, you will need to create this simple CSS Snippet:

body {
    --custom-vault-banner-icon-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAEJElEQVR4nO2bS28bVRTHf9cT2yWmjp0gmgQhAVFAbCiteFWqKrICCl3wAUBIFCo27aZRJT4C7JAKtOIlAcoHYMUqKUIFJBCglnRBKjUPWlrHj8SuH+N5sPA4LxLfO/aMx03mJ105c3PmzLn/uffMneMEQkJCQkJC9izCL8dfPHvpYcsWHwLHgJE23dwCLtmaOfnOLxNL3kW3ji8COIP/Axj0yGXW1syn/RAh4rVDAOfOezV4gKGIqX3gob81fBGAxrT3FBsmvPYJ0OeHU7as+ZO/HmtrqX32zA/2hsPhjiLaAb9mwD3DnhdAeWpOT54fjscHp6rVkSOGkYoj3K8ey7BZ+inv+jwVtL46iXS+khq9PW1Y5lvHvzydUTlPSYDL73/yUqV68DvTTkY7CbJaqHPnSrETF0r0pwr66OPXXn7x43PTMlupANOT54ct89CCaSej+1JRxk8cID2WwKpb/PbpPJWsrhxY5q8ilVxd2b4T+lMFfeSxWw9NXDy13MpOmgOi8cGp5uBfODvG8KEB4sk+7huK8eBTSeWAVhYqXRs8QLmQitUN/SuZnXQh67WRIwDjJw4Q7dfW+is5ncyV1ZbnWqaNXjQo/lPt6uCbFP4dle4dpAIY9VQcAemxxFrf92eusnTZn2TmJXfzA/0yG/lj0Mn28eS6VvfC4AHMekxqs+f3AaEAqoaWaW/63C0oCzA/k8UybOZnsn7G03WkGyH7+nv/v+UrM5sOP3/3Qksfb1885TIs7/yKw9dajjHMAUEHEDSeCJBI77wvaPU7v/yWyhaLt+vMLcrfUzwR4Ogb32wbUCKd5+ibX3fV73LB5GbGoFK1sSz5NTxJgr1CqWxxM2Ns6nvi9et7Jwnmi6brc9wLYBtym4Co6e43ae4FMP2v6LSLyprfinsBaovur9LDuBOgOg9GzqdQgkFe2rWNxrSvLe66wYOKAKs/diGM4NhVj8F2CAUIOoCgCQUIOoCgCQUIOgCvMNos1qoIUGrLcxcxTJs7uW3fBKWxq3zJPws85zYoVUpli0LRpKqrFTDcIAR/y2wUZoD41otgtqNZvSkrVm/cEtGYktpIvezXL4D9pycRbaBUtsituC9gqCIEs7YmPpLZSQUQ43M1NOM1r0Vop3qjihDMRuPmq+PH52oyW6WngDg4t8R+43kQp4GfgbudBtlO9aYVArsiBL9rkcg5EROHH33lxg1PLxASEhISErL76PQ/RmLAPiDutNiWn2PONSJA848M+5w+wfq7iAHYTmt+9WQCzQ1yDdCdVnU+a05rHreFGwGiwAPAEJAE7qcxwF6gTuPNbwXIAcsoiqIqwJPAI6zfxV7HAhaAqzLDXVMQ2QalvXY7S2AQGKD3lkARWAWyTvN0CeyEahLcmPA0GjNPlgQ39jUTYDPxeZYE/wMxwHA3N25UwgAAAABJRU5ErkJggg==");
}

4. Replace the text between the brackets in url() with what you copied for your chosen icon.
5. Save and Enable the snippet in your vault.