How to set the icon for a note on right side bar

Things I have tried

What I’m trying to do

I have several “special” notes that I’ve added to the right side bar (e.g. Goals.md). Since the title isn’t displayed, I rely on the icons to differentiate between the tabs in the side bar. But my 4 special notes all have the same icon. Is there a way to set the icon for a specific note when it’s on the side bar?

5 Likes

this is a custom snippet, you can add them to your snippets. To customize your icon, you should change the aria-label to your special note’s name and change the background-image :

.workspace-tab-header[aria-label^="Obsidian"]
> .workspace-tab-header-inner
> .workspace-tab-header-inner-icon
> .document{
    display: none;
}

.workspace-tab-header[aria-label^="Obsidian"]
> .workspace-tab-header-inner
> .workspace-tab-header-inner-icon{
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiAgPGltYWdlIGlkPSJpbWFnZTAiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgeD0iMCIgeT0iMCIKICAgIGhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBRUFBQUFCQUNBWUFBQUNxYVhIZUFBQUJUbWxEUTFCcFkyTUFBQ2lSWTJCZ1Vra3NLTWhoCllXQmd5TTByS1FweWQxS0lpSXhTWUgvSXdBNkV2QXhpREFxSnljVUZqZ0VCUGtBbEREQWFGWHk3eHNBSW9pL3Jnc3c2SlRXMVNiVmUKd05kaXB2RFZpNjlFbXpEVm93Q3VsTlRpWkNEOUI0aFRrd3VLU2hnWUdGT0FiT1h5a2dJUXV3UElGaWtDT2dySW5nTmlwMFBZRzBEcwpKQWo3Q0ZoTlNKQXprSDBEeUZaSXprZ0Vtc0g0QThqV1NVSVNUMGRpUSswRkFXNlh6T0tDbk1SS2hRQmpBcTRsQTVTa1ZwU0FhT2Y4CmdzcWl6UFNNRWdWSFlDaWxLbmptSmV2cEtCZ1pHSm96TUlEQ0hLTDZjeUE0TEJuRnppREVtdTh6TU5qdS8vLy8vMjZFbU5kK0JvYU4KUUoxY094RmlHaFlNRElMY0RBd25kaFlrRmlXQ2haaUJtQ2t0allIaDAzSUdCdDVJQmdiaEMwQTkwY1ZweGtaZ2VVWWVKd1lHMW52LwovMzlXWTJCZ244ekE4SGZDLy8rL0YvMy8vM2N4VVBNZEJvWURlUUFWSVdYdStqOURFUUFBQUNCalNGSk5BQUI2SmdBQWdJUUFBUG9BCkFBQ0E2QUFBZFRBQUFPcGdBQUE2bUFBQUYzQ2N1bEU4QUFBQUJtSkxSMFFBL3dEL0FQK2d2YWVUQUFBQUIzUkpUVVVINVFVWEJTb3cKd0FyK3FBQUFBWXQ2VkZoMFVtRjNJSEJ5YjJacGJHVWdkSGx3WlNCcFkyTUFBRGlOdFZOYmJzUXdDUHozS1hvRVhnYjdPSDRrVXU5LwpnV0k3WG1WWDNhcjk2RWhSWXNBd0RDUjh0aFkrQnFLa0FBTkVvbWhnb0Exa1drQzdIaVpHa2NTRUNHS0tPUllDc0FQZGJkZlRBVkE5CkFRUkZaV01Ed1FnUnBNR0YxL05QT0wzcVlJVGIwSm42WnRZS2xod1RVYlFUUVRxbm5KRjc3SGdVZFB0cnN2Q2JpamNVRlkzR3loZVgKaTdIRzRJMkJrUzFsVUMrRmlNMWNJZGoybEpZZGgycFRyWFhNYmR1RDJ0MVJZVHYwNlVLVFd5THhBU3hHMks4Q1EyeldwSnNKbnR2Ugo5TTBGTC93bTBWUFBEMVFSeldPYTJseis3T01IZm8xNXdsL0YvcjlFTmpwS0pvOUV3bnI2bExLUlpqVjFGL2xTcnAzUzZOOVpEMlU2CnFCRXdNVER5Mk96SHhqOHhPam1PNWR3TGl1aDcrZmcxYmtqY3ovSG1YcytGV3NOM2dWTHFES3hYVlNnMWZ4ZEhpZE9xQ0hVeWFxbG0KYndHOUxiekY3U21ST2laaktpdHhqM2ttNEw0aVNxekJSNi9NZkMrRjBHU2RZejhtY3laZHl1YVovT3daVmtlRjVyc1hYaHB4bjZ2ZQpRSS93QmJ6TjdLU0JMekRNQUFBT2pFbEVRVlI0MnUyYVdZd2MxM1dHdjNPN3VudDZkbktHMnd4bk5DU2poYlFXaTVZbFNwVGtSSEppCkkwNWlCNDdrUkRKaUlJa1RCUEZEbkljOE9ZWVJCL1piNEFTSS9aUUhRWlloMlVJUUtBNnNLTEprTFpRaVJhWnNpc09kTTl5RzVKQ2MKdmJmcXJyb25EMVhkWGQxZHZRemx0L0FDRjNPbnV1cmVjLzd6bitYZUtyalJiclFiN1ViN2Y5emt3MDV3N0tTaUFtSVJCS1BodkJxWgpQUnhMWkl5R1l3bkhSSzZIWTYyTXRTYWxxZ0NDTlFTLzM3Mzl3Nm13cnFlUEhmSDQ3aysvdzE5OThtOEdFZllnM0FIc1ZHUVRRaCtRClVqQklDRUNndG1obG5jZzRDa1JVQ3BVcU5paG9DSVNHOTZpQ0Jjb0lPVVd2QXJNSUg2aHlKRnNxTHZjbVU5dzc2ZnhxQVpnK1ZDU2QKU21PdEhVWGtDOEFmcVhBN01JaUl4RmxRNjVWcUdqYzkwK3A2eDdsVWdhekNOUENzb3M4YVkrWkxicEg3ZDJZK1BBQkhmMW5rMHZsegpUT3pjOVJESVA2aXdIeVJCYStwMkRVSlY0UThOUXVWNTlWVjVCL1R2Y3ZtVlYzclNmZXliU3JmVno3VDdjZnBnanR2dVRETXh0ZXR6CklNK0FQQ3hJb3NMaHFod3R4alZxdEJsWC9ocXdlUitiOTY1ckxnRkVKU0VpRDRBODNkczc5UGpzNmNNY09KMXZDMEJMQnJ6MjBneVQKa3pzb2wvMkhqVEZQSXpJWnRWaVQ5ZHFNMjFwUFFEMUw5a1NPcGJjV0dOMDlRT2IraldoQ3JwOVZBcXA2VWEzOVVqS2RlUG5TK2ZQOAo5c2NuWS9Wc0dTMjJiaDZubUM5dVNxYlMzeFJrVWpVUVJBaTlMakt1UnZJV1k5R2FnTld4Z0tpU3YrQ3ljR0NSdGVsVnBHd3hZeG5rCnNvdU9wUkdSN3VhS0dTTXloakYvWDhnVnB6ZU9icm5VU3M5WUYvalA1dzh5TXBMQ1NUaGZFTmhmTlhxRWJvM2pydHloOG93b3BZVXkKbDE1YzRNeFRGMW42K1NyV1ZjU1J3QmN1bHBBVnI1Nmk2M1d0NFA1OUNjZDVjdXQ0aWgrOU90MDlBQlBqTzdod2JuSFlpUGxEUVJMdApGTzhLaFBCL1k4RFArMXg5YTQyWnB5NXo1V2ZMZUtzZVlzSzdqWUFSMUZYMGpBdXUvWEFnSUdMRVBIN20xUExJbG0zYll3R0lkWUdCCmdXSHkrZXhIUk9UMmlnRHRYS0NsTzFRZU51Q1hsWldUQlM0ZldDVjN0Z2kreFlRM2FGWGNvS3NGWGZiaG5JdnM2Z0VUVkZIWDVRNGkKdXgwbmVXZHZmOStyWFROZ2ZDc1lNWGNLREZVUjcyRDlPQ2FJQVZWbDdWeUowLysyeEtrZkxySTY0NklXRUFtcW5FZ2Nsb1JCeEdCVgpnbjdSUTYvVXNzSjFab2QrRWJscmNsc3NBWm9CR05tNG1lUUlDTEt6RW43WEEwSlZBRkVLMXp6T3ZyVEcwZTh2Y3ZVWGVmeVNCblNQCnl6MGlMR2JoMGlVUDN3dVpVUVovdG9SbWJWczNhdytDWUpDZEk4RE50OTNSR1lDOWQrNURSRVJnVSt4aVhWamZMMW5tL2lmUDRlOHYKYy82TlBPV3NyU3Blb1h2VlB3U3NDaGZYREVjdndzOWVXZVdkQTJzc0xmZ29nczBxM2t3SjlmVDZtQkNBdStsait4NU9mUFRlQjVzQQphSW9CRTl0MzhQdWZlVElCOUZjVzBOQUJxNzVINnpnZ0JvNjlkNUhaRjF3R1V3TklOUkJVbmdRTnh5S0s2d2x6SzhxMVhEaVBiemsyCm5XZnV2TXN0dTN2WnNhdVhubmtmR2ZKd0pwUFZhYnFPQ1lFT2ZmYysrR2dpbVV6NUhRRVk3QitpSjkxakJFbFd4ZGJ1UVhBTEhtLysKMXpHU3kwTU1iUmtNdDI4YUFTSGNJYUdzdVhCaHliTG1WbmxSOFFheXF4N3Z2N3ZLK1RORmJ0M2R6empRUDVSQWhrMzl1aDFBQ0c5SwpEUXh1TUVhYVExNFRBS2xrR21NU0FpU2kxN3NCd1JpWVBYcUZFeDljWnF3ZnJOcnFOakFLZ2xWWXlGa3VMbnVVUEVLV2hKbzB1TlRWCnl5NUwxMHFNemZhd3B6VE0yS1A5bUhUM0lJUnptWVJKaURGZEFORFhONEJhS3dKT1hXWFhCUWhlMmZMdXF6TVVjaVdXRTJ1VS9USXAKSjFXN0FjV3pNTDljNXRxYWg2M2JHMnVUY05XWTRpbm5abk5jblMveTBNWnQzUFRBQUZpNkF5RkNycGdWbWdGSU9rbFVWVkFTVGJtOQpEUWhpNE1MTUV0UHZ6V0dNSWVmbXlicDVScHhVMVF3RjEzSnBxY2hhM285UVBrNnM1aWFBVy9TeFllS3N5dFVCaElqbjFRWEhTbXZpCmhGcEZyYTJQdU5IMEU1MG9jbDB0dlBmNkxDdUxlVVNnN0pWWnlxOVc4LzF5cnN6WkszbFdjeDYxOHlDdEd3WkhINjI2SmRVckRHNU8KMXRiVmV0UEdWcUkwL05ZSmdLaEZ1Z1hCQ0N4Y1d1UGdnWE1WUG1CVldjd3U0L2srVjVZTFhMaVNvMWp5ZzdvdnFoaEtjTWhqYVVDagpycXNxbWNFRXZjTk9mT0hWQWdUUjFzcERiQ2tzOVpZaFFyRVc3aURBKzIrZjQ4cWwxVEN2Qnc4dFpGYzRlM21KUWtIUnVwb3ZCdkJPCm5xQksvNGhEdWk5UmQyOG5kNmorVTh2QzdSblFWTTQyb3R2SUJHQjFxY0E3cjgxZy9mcFZzc1U4VjFjV1FrQmI5YWkwYmJvcWcxdFMKT0VsVDNXREZ5dHpJaEJpczJ3SlFoMjRYOWI0eGNQamdSYzdQTENGRzZuU3phc21WVjdEYTRQZE52WUgrRWIrdmRCRmxhRnVLYUNydgpCZ1JwTkdaSEFCb1U3bFQyRnJKbDNuN2xOT1d5ajJya0xCdFFCTmNyNEhxNUJ0KzNEYjFWWEtpQmtuQmdhR3NxVUtoZDJkc0FBdEZyCjNRSVFSYXRkN1c4TW5EbTV3TWtqVjVGYU5WT25oNitXYkdrVnEzNjh0VnYyaVBTcXBIb05BNk9wMkpUV0xRamRBOURnUnkxM2ZncTkKZlVsUzZVUzhhNGRScWVnVmNMMENrVk0rUkxWRHQyRVAwbkptS0VIdmtGUEhzRzVBNkpRRllvTmc1Y0dvTWVKQVVBdmJKemV3Kzg1dApXS3YxdHF1Q0FGYVZYSGtORFJVU2pXT0JiZWoxTVdGZ05FbXFOOUhlQldKQWlGN29PZ1pFc2wvSDdXOHlaYmozb1NtU0tTZXd1R29UCkUwQW9lQVZjdjBoTEYraFFEQTF0U2VNNE5YSFhjK1FlNjFrdEFXaFZSYlVBUVMzY2R2c1dKbmRzd1BjckxOQ0k5WU5nNkt1U0xXZXIKSU1VSHZrYW5EYm9ZR05xV0RqSkFOS3AzQTRKR0ROa2RBN1EyU1lSdTdlTEE0R0FQOSt5L0tUalBpMHZ4b1FnRnIwakpsbUxNMHNZRgoxT0lrWVdocnVtN045WURRcnNpSzJRdFlyUFdCMm82eUl3akEzdnNtMkRqYWk3VVJPU3Z1RUo3OWVWYkpsbk9BWDY5c3kxUVljQ25WClp4Z1lTZGV6czBzUUpFYld0Z0JZdGFpMVRZKzBBMEV0YkJzYjVJNjlZOWd3VE5lUldpdHdDam5QcFdTOWV2TlVJMXRNTVdTVnZ1RWsKbVVHbit0TjZRS2dyaXJvQ3dGcjhTRWh2OVI2dUVRVEhNZHozNEJTWlRMS2hHdFNRQWNFam5yVmt5NFdJa3NURWdRZ0QxREl3bWlMVgptNGgxZ2E1QWlCcWlHd0NzSCs4QzdVQlFDN2ZzM3N5T20wZXd0dlpBSkpSVnIyVTlsN0l0STAwcHp6WjFRUm5hbWliaG1KYUt0d09oClV5M1FESUR2WTYxUGZWSGJHUVFVK3Z0VDdIdHdDbU5xRnE4VVExQ0xCV1ZyeVpiZGVtdkh4UUVOTXNEd3Rnd21zdDU2UU9qVW1nRHcKZlEvUDk3U1N5N3A1TFYzZDBWcjQ2RDNiMmJTMUg3V1ZJRVl0Qm1qTkU5ZThFbVhySTFYNk4zTUdWWnlVTUxTNXA3YnVla0hvQUVZTQpBRDYrNTBFSEY0Z0RRUlcyYk8zbjdudTJCNzZ2QVFNc1Vvc0RJUmhsYThsNnBYcUZRM2VvbE1Pb2t1NU5NRENTcW5uS09rR0lWcldpCnpXZzBwMEZWYkhBa3B0WEYxZ0dDTWNLKy9WUDA5YVdyUWJCbTE5cnJNRlZZODhwNDZrZHEvMUR4U0FEczI1QWtNeGdFMXJabkU2M0cKTmNWaXlSQURnTVdxcldXQWRSUWRsV0M0NjVaUmJ0bTlDZXZib0Jhb0tsK1ZMOWdxKzVhczErYXNRQzJEbTlJa2U1enVEbWhpeGlFTApWQ3ZiOEU0QUZOMGloVUt1d3NkWVdyVURBWVZNeHVIK2g2WklPS1phREZWRWpxWkVDNng2SHI3NnhKNFRvQXh2elpCSVNNZU5XU3NRCktsWXR1UVV0dVc1bkFLNHR6bk5tYmtaUkxWY1hXQ2NJYXVHdXZlT01qUS9oMnlBTDFLWDZTRmxTOUMwNXYzSldVT01IS0NiTUFKV2oKaGs0YnMxWXVvRXI1MnJWNVhWcTYxaG1BRTdOSGVmSDFGM3hyYmI3T3Y5Y0JnaXFNanZaeHo3NkpxZ3RVbE5ZNk1BU3JzT0w1UWF5SQpiaUJVU2FZTVE1c3pkZFpjTHdpaW9OYm1EeHg0eVorZE9kNFpnT2xUaDFCVjYzbmV0YWFGMXdHQ0VkajN3RTBNREtiRC9VSGRjVWdJClJ0RHlJUXNrVWdDcFd0TDlDZm8zcHNGMlZyd1ZDQUMrNXkyY09IN1lQM2p3cmM0QUZJckJaMlZGTjM4VzFZNHZIbHFCWUMxTTdSeGgKengxYklwVmhKQXRFZ0xBcUxIc1d2K0lqNFI2Z2YwT0t6RUNxYThYalFWQmN0M0JXVlhWaFliNHpBQUFzd01MUzFXbHIvV3pzQXQyQQpvSkJPSjlqLzhCU09ZL0I5R210TG9sK0k1SzJTdC9WcGNPeldZZElacDM2dGRZSmdyYzB2THkwY3BrV0wvVWJvUDM3MEdzZG5qa3p2CkdOOTFvamZUdjFlaHEvZHdqZS9tZzJBNHh1ZWY5RG44aXdYbXptVlpXeTFocldJa2VEYVFOb2dGeTU3U2x3cEE2QnRPYyt2K2JiVjEKbzJ2UklFdUxNVURKTFo0K2RPamREOHJsVWl3QXNYdUU4UzBUek0yZk4vLzcvTW12VFkzdi9JYUlxWDc5SGEyT0l0bXRGc01qTXlvRQpwemlpRkFzKzg1ZnpuRHEyekxIRGk1dzV0Y3JTUXBGeTJTSlMvVUNNaWJTU1VaL2JINTNra1QrL28vb0ZtVXJNV28yeU5Jd1Y1Y0xjCjdMY2UrZVN1cisvY2Vacy9NM09zT3diTXpaOUhyNmo5MXJmLzZia25Qdk9senczMEQ5OWRwZjE2bUZDeGlBcnBIb2ViZGd4eTA4NUIKSHY2dDdTd3R1TXllV3VINDRVVk9IVnZteXFVOGhiekhncXZzMnBCa3p5ZkdTVGlDdGZXczZwWUpBTm5zMnVFMzNuanBCNnJxUjQvdApPeklBb0w5M2dHeCt6Znp3T3o5NWZQL2VYLy9uZEtwblU1UEZ1MlZDQXl1UWdCa2k0RnRsYmEzTTNOa3NKNllYT1hsNGtWc21ldmowCm4zNEVrMHJVejk4bEUwVEFMUlVYM3p2NDVsZi8rRTkrODVuaDRSRi9lWGxoZlFBQS9ONGpmOEFMcnp6ZisrLy84dE12Zi96Mis3L1cKazg2TVJtdVo2d2Foa2JZU3ZHUlJsRUxleDFxbHB5OVpkMC9YSUFUS0wvM3kwTHZmL3JPLy9KM3ZmdlozdjVqN3diUGZhNmxqZ2pidAorT3dSdnZlTnA4dC84ZlVucG0vZHNXZHU4OGpXbTN2U1BhTmlhcDgrVlFTcGUyRWFyZHphakJ1cU5WUUZKMmxJSmhOTjgwWVpYRGRYCmVJK0VCZi9LeXRMeEEyKy8vTTJ2L3UwWG4zcjl2MmV5WC9ucng5cXAySjRCbGJaOXl5UVg1cytsdnZ6WVYrNzYvS2VlZkdMWHhNMmYKN3U4Zm5ISVNUdkJGYzdlV3BsV3dhclpvdThBYWZWNVI5WHl2bE0ydG5UMXovdFJMUC83SmM4Lzg2MVAvK1A3SDd0N3Yvdno5QXgxMQo2d3FBNlAzR21JSFBQdnJZcnQrNDcxTjM3OWorYTNzMkRHMmM2RWxuTmpqSlpNWVk0NENZYmhXczN0TXRFSUhDMWxycmViNVhLTHFGCjVlV1Z4UXRuTDV3Kzh1YmJMNy8vNHhlZk8rVjU1VlhxUGVaWENrQzBPVUFhNkVtbmV0TERneHVTbVo1ZTR5U2M0TXZlRmpPM2xLeUQKSkVHMlVUemZ0OFZpM3E2c0xwV0xic0VGaW9BTGVOeG9OOXFOZHFQZGFPdHIvd2VFWnBYZ2NsRk0rd0FBQURobFdFbG1UVTBBS2dBQQpBQWdBQVlkcEFBUUFBQUFCQUFBQUdnQUFBQUFBQXFBQ0FBUUFBQUFCQUFBSUFLQURBQVFBQUFBQkFBQUlBQUFBQUFDYkxuRldBQUFBCkpYUkZXSFJrWVhSbE9tTnlaV0YwWlFBeU1ESXhMVEExTFRJelZEQTFPalF5T2pRM0t6QXdPakF3TUNTTFpRQUFBQ1YwUlZoMFpHRjAKWlRwdGIyUnBabmtBTWpBeU1TMHdOUzB5TTFRd05UbzBNam8wTnlzd01Eb3dNRUY1TTlrQUFBQVNkRVZZZEdWNGFXWTZSWGhwWms5bQpabk5sZEFBeU5sTWJvbVVBQUFBWmRFVllkR1Y0YVdZNlVHbDRaV3hZUkdsdFpXNXphVzl1QURJd05EaS9uQkpjQUFBQUdYUkZXSFJsCmVHbG1PbEJwZUdWc1dVUnBiV1Z1YzJsdmJnQXlNRFE0Qm1mSnRBQUFBQ2gwUlZoMGFXTmpPbU52Y0hseWFXZG9kQUJEYjNCNWNtbG4KYUhRZ1FYQndiR1VnU1c1akxpd2dNakF4TjcvekdOQUFBQUFhZEVWWWRHbGpZenBrWlhOamNtbHdkR2x2YmdCRWFYTndiR0Y1SUZBegpqM203dkFBQUFBQkpSVTVFcmtKZ2dnPT0iIC8+Cjwvc3ZnPgo=");
    background-size: 17px 17px; /* adopt this to your file tree font height */
    transform: translate(0px, 5px); /* to position the icon */
    background-repeat: no-repeat;
    display: inline-block;
    height: 17px;
    width: 17px;
    margin: -4px 2px 0 0;
}

4 Likes

Thank you! I found an SVG icon library on gihub, and then used this tool to convert them to a Data URI for inclusion in the css. Perfect.

3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.