How to Change Ribbon 'Expand' Button Icon?

Hi. I’m programming a css theme and I just want to change this icon. I’m still a beginner in writing css, but I’ve tried display: lucide-menu, background: lucide-menu', and content: lucide-menu`.

 .sidebar-toggle-button {
    display: none;
    background: lucide-menu;

I can’t seem to find a variable in the code that defines the sidebar icons, either.

I’ve seen other themes utilize different icons, so I know it is possible. I also know that I could just set the background to an online svg, but I want to know if it is possible to use lucide icons, since they’re already in Obsidian. Thanks in advance.

I’m not totally sure, but you might be able to use the Icon Swapper plug-in.

1 Like

Do you want to change both icons, or just one of them ? Like the one on the left which you’ve marked out in your image?

For the one on the left the DOM elements are shown in this image:

<div class="sidebar-toggle-button mod-left" aria-label="" aria-label-position="right">
  <div class="clickable-icon">
    <svg xmlns="" width="24"
         height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
         class="svg-icon sidebar-left"><path ... /path>

For hiding the other icon I think I would use:

.sidebar-toggle-button.mod-left svg {
  display: none

Regarding how to show the icon I’m not sure, but I reckon doing some magic to the .sidebar-toggle-button.mod-left div.clickable-icon::before should do the trick. Maybe put something like background-image: url(...) in there.

Don’t know (or have the time to find) how they’re used elsewhere in obsidian already.

Thank you so much. I will try this out.
Yeah, I was mainly trying to find the exact spot in the CSS where the icon source is defined, but it must just be in the HTML itself. This is a close solution, though.
I also wanted to know if the lucide icons could just be declared without using url(). I know that ultimately, it doesn’t make that much of a difference, since you get the same result, but since all the lucide icons are in Obsidian already I wanted to see if it was possible.

Thanks, I did not know about this plug-in. I was looking for a way to change the icons in a CSS snippet or theme, though.

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