VSCode hide top-right icons

Question

I'm a big fan of VScode's minimalist approach, but one thing is bugging me. I would like to hide editor-tab icons.

The icons are from extensions: git-lens & hexdump for VScode. Also the split-editor icon would be nice to hide.

Answer 1

Extension Custom CSS and JS Loader

.tabs-and-actions-container .editor-actions {
    display: none !important;
}

Optionally, show them on hover:

.tabs-and-actions-container:hover .editor-actions {
    display: flex !important;
}

Answer 2

I faced the same problem and Alex's answer helped me a lot (showing the icons on hover only).

But I still had an issue, especially when coding in a small window:

Let's say I want to open the file "styles.css" using the tabs bar:

As soon as my mouse enters the tabs zone, the menu shows up (because of the hover trick) and I can't click my tab because it's below the icons:

So I came up with this idea:

Showing the icons bar below the tabs (not over the tabs) when hovering

Here is the result:

Here is how I did it:

.tabs-and-actions-container .editor-actions {
    display: none !important;
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 1;
    background-color: #2D2D2D;
}
.tabs-and-actions-container:hover .editor-actions {
    display: flex !important;
}
.title.tabs.show-file-icons {
    overflow: unset !important;
}

Answer 3

I combined the answers of Vincent and mozlingyu to another solution: instead of hiding the buttons, move them down one level to the breadcrumb bar:

This is done using the Customize UI extension with the following configuration:

"customizeUI.stylesheet": {
    ".tabs-and-actions-container": {
        "background-color": "inherit",
    },
    ".tabs-and-actions-container .editor-actions": {
        "position": "absolute",
        "top": "100%",
        "right": "0px",
        "height": "22px !important",
        "z-index": "1",
        "background-color": "inherit",
    },
    ".tabs-and-actions-container .editor-actions .action-item": {
        "margin-right": "3px !important",
    },
    ".tabs-and-actions-container .editor-actions .action-item a": {
        "font-size": "13px",
    },
    ".tabs-and-actions-container .editor-actions .action-item .codicon": {
        "width": "13px",
        "height": "13px",
    },
    ".tabs-and-actions-container .tab:last-child": {
        "margin-right": "0 !important",
    },
    ".title.tabs.show-file-icons": {
        "overflow": "unset !important",
    },
}

This solution is theme-independent, so it should work for all colour combinations. The background color for the buttons is always the same as the background color of the tab bar. If you use only one static theme, you could hard-code the background-color for the .tabs-and-actions-container .editor-actions selector to the exact color of the breadcrumb bar for a more seamless design. However, this does not work when switching themes.

The only drawback to this solution is that the buttons overflow the rightmost breadcrumb information, but I'm fine with that.

Answer 4

Without extensions

1. Open default css file that vs-code reads to render its window

cd /usr/share/code/resources/app/out/vs/workbench
sudo vim workbench.desktop.main.css # or whatever editors but vs-code

2. Add this line at the end and save it

.editor-actions { display: none }

To identify class names of elements,

just press ctrl + shift p and type toggel developer tools

Answer 5

Here is a better extension for this. Customize UI

Answer 6

Gitlens icons can be disabled within the extension settings:

https://github.com/eamodio/vscode-gitlens/issues/669#issuecomment-540975432

Answer 7

In Insiders v1.72 now is the ability to hide/show any of the icons on that toolbar, see /hide menuItems.