VSCode hide top-right icons (in the tab bar)

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

Editor Actions Position

In Insiders now and probably Stable v1.85 is the ability to hide all those icons (hidden) or move them to the Title Bar or the Tab Bar. The Tab Bar is the default location where they start and is to the right of the last tab.

The built-in icons for Split and More... will be moved as well as any extension icons.

There is a context menu in the Tab Bar that has the options, see demo:

---

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

Answer 2

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 (Warning 2023: it may break your VS Code installation) 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 3

Gitlens icons can be disabled within the extension settings:

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

Answer 4

Here is a better extension for this. Customize UI

Answer 5

Building on @teraoka's answer, you might like to keep a script to do this since the setting will revert each time VSCode updates itself

Using a Git-bash / cygwin:

#!/bin/bash

cd /c/Users/noel/appdata/local/Programs/Microsoft\ VS\ Code/resources/app/out/vs/workbench/
cp workbench.desktop.main.css workbench.desktop.main.css.`date +%Y%m%d%H%M`
echo ".editor-actions { display: none }" >> workbench.desktop.main.css

Answer 6

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 7

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 8

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;
}