Sidebars icons file

Hello, i’m going to show you how you can change the document-icon of file in the right/left side bar like this :

First, add this snippet to your snippets folder

.workspace-tab-header[aria-label^="Hypershift"]
> .workspace-tab-header-inner
> .workspace-tab-header-inner-icon
> .svg-icon.lucide-file{
    display: none;
}

.workspace-tab-header[aria-label^="Hypershift"]
> .workspace-tab-header-inner
> .workspace-tab-header-inner-icon{
background-image: url("data:image/svg+xml,%3Csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERazer%3C/title%3E%3Cpath d='M23.4 0a.385.385 0 00-.278.125L22.91.35l-.401.182a.711.711 0 00-.417 0 .305.305 0 01-.171 0 1.005 1.005 0 00-.567 0A.936.936 0 0021 .596a.877.877 0 00-.412.337l-.037.048a1.246 1.246 0 00-.898.684 1.07 1.07 0 00-.07.225 1.935 1.935 0 00-.337-.193 2.026 2.026 0 00-2.063.305 2.08 2.08 0 00-.69 2.139c.086.376.23.737.428 1.069.496.776 1.079 1.494 1.737 2.138.526.512.996 1.078 1.401 1.69l.053.096c.396.754.321 1.31-.219 1.647a1.358 1.358 0 01-.572.198 2.491 2.491 0 00-.144-2.07 2.342 2.342 0 00-.3-.406c-.79-.866-1.63-.674-1.962-.449a.385.385 0 00-.15.455l.027.058a.385.385 0 00.38.188 1.07 1.07 0 01.962.582c.23.384.23.862 0 1.246a4.812 4.812 0 01-.534-.535l-.07-.07-.037-.042a3.368 3.368 0 00-1.92-1.208 3.09 3.09 0 00-.406-1.455 4.368 4.368 0 00-1.358-1.48 2.673 2.673 0 00-.267-.16 3.085 3.085 0 00-2.251-2.717 2.7 2.7 0 00-2.968 1.139c-.053.086-.112.171-.165.267a12.26 12.26 0 00-1.038 2.78 11.64 11.64 0 01-.775 2.187l-.059.107c-.213.374-.406.583-.609.647a.406.406 0 01-.374-.064c-.203-.14-.155-.423 0-.973a3.33 3.33 0 00.128-.45c.07-.33-.005-.673-.203-.946a1.07 1.07 0 00-.786-.411c-.49-.018-.94.27-1.128.722l-.08.15a.968.968 0 00-.316-.46.936.936 0 00-.294-.129 1.016 1.016 0 00-.535-.198.342.342 0 01-.17-.053.711.711 0 00-.434-.097l-.326-.256-.144-.278c-.18-.35-.707-.238-.727.155a.385.385 0 00.032.727l.305.075.342.267c.026.14.093.268.192.37.043.04.072.092.086.149.058.184.167.347.315.47a.877.877 0 00.727.465h.06c.262.313.662.477 1.068.439a1.07 1.07 0 00.23-.054 1.935 1.935 0 000 .38 2.026 2.026 0 001.3 1.636 2.08 2.08 0 002.208-.481c.276-.26.51-.562.695-.893.422-.817.75-1.68.978-2.572.179-.711.433-1.401.76-2.058l.058-.096c.454-.722.973-.936 1.535-.637.18.096.338.231.46.396-.714.12-1.34.543-1.717 1.16-.084.146-.152.3-.203.46-.353 1.117.23 1.748.593 1.925.16.077.353.035.466-.102l.037-.053a.385.385 0 000-.423 1.07 1.07 0 010-1.128c.218-.384.627-.62 1.07-.615-.04.245-.1.486-.177.722l-.034.093a3.533 3.533 0 00-.084 2.324 3.09 3.09 0 00-1.07 1.07 4.368 4.368 0 00-.603 1.913 2.674 2.674 0 000 .31 3.085 3.085 0 00-1.23 3.31 2.7 2.7 0 002.47 2h.31a12.26 12.26 0 002.925-.493 11.64 11.64 0 012.283-.422h.117c.304-.037.61.035.866.203.102.09.152.224.134.358 0 .246-.289.348-.855.466a3.33 3.33 0 00-.45.117 1.192 1.192 0 00-.721.647 1.07 1.07 0 00.037.888c.229.435.704.683 1.193.62h.165a.968.968 0 00-.235.502.936.936 0 000 .364c-.019.183.013.368.091.535.03.054.045.115.043.176-.002.151.045.3.133.422l-.058.412-.166.262a.385.385 0 00.497.535c.287.265.74-.016.63-.39l-.085-.3.064-.433a.711.711 0 00.22-.353.305.305 0 01.085-.15c.131-.141.218-.318.252-.508a.936.936 0 00.122-.336.877.877 0 00-.085-.535v-.053c.134-.376.08-.794-.144-1.123a1.07 1.07 0 00-.16-.171c.115-.05.226-.11.33-.182a2.026 2.026 0 00.77-1.94 2.08 2.08 0 00-1.518-1.674 3.71 3.71 0 00-1.123-.155c-.919.043-1.83.19-2.716.438-.697.198-1.414.322-2.138.369h-.112c-.85-.032-1.294-.374-1.316-1.01-.007-.204.031-.407.113-.594.459.559 1.138.89 1.86.909.17 0 .338-.018.503-.054 1.144-.25 1.4-1.069 1.374-1.475a.385.385 0 00-.321-.353h-.064a.385.385 0 00-.353.235 1.07 1.07 0 01-.984.535 1.214 1.214 0 01-1.069-.631c.233-.088.473-.158.716-.209h.155a3.368 3.368 0 002.01-1.069c.449.243.95.372 1.46.374.679.01 1.35-.138 1.962-.433.094-.044.185-.094.273-.15a3.085 3.085 0 003.48-.587 2.7 2.7 0 00.498-3.139 6.884 6.884 0 00-.15-.273 12.259 12.259 0 00-1.887-2.288 11.64 11.64 0 01-1.508-1.764l-.064-.102a1.294 1.294 0 01-.257-.85.406.406 0 01.16-.267c.225-.107.444.08.83.508.1.118.21.228.326.331.25.225.584.334.92.3a1.07 1.07 0 00.748-.476c.263-.416.24-.951-.06-1.342l-.085-.145c.18.035.365.019.535-.048a.936.936 0 00.32-.197c.178-.076.33-.2.44-.359a.342.342 0 01.133-.123.711.711 0 00.3-.326l.384-.155h.31a.385.385 0 00.353-.577l-.005.01a.385.385 0 00-.118-.128A.385.385 0 0023.4 0zm.006.398l-.187.315.347.086-.395.005-.658.262a.262.262 0 01-.171.262c-.316.182-.198.321-.583.487-.08.032-.107.101-.256.176-.15.075-.407-.027-.535 0a.32.32 0 00-.203.535c.085.144.486.679.192 1.112a.711.711 0 01-1.107.102c-.368-.305-.866-1.214-1.577-.877-.71.336-.502 1.128-.085 1.796.882 1.39 2.705 2.673 3.523 4.277 1 2-1.107 4.336-3.673 3.117a2.326 2.326 0 01-.396.24c-1.069.535-2.512.578-3.395-.117-.395.941-1.79 1.182-2.031 1.24-.423.08-.832.22-1.214.418.487 1.614 2.47 1.454 2.908.427 0 0 .054.824-1.069 1.07a2.139 2.139 0 01-2.288-1.16c-.33.346-.507.81-.492 1.288.027.69.46 1.337 1.69 1.385 1.662.064 4.25-1.203 6.014-.669 1.344.335 1.723 2.065.642 2.93a2.732 2.732 0 01-1.23.385c-.182.01-.198.091-.181.145.016.053.117.053.278.053.582-.053 1.208.283.93 1.166-.043.123.155.352.117.534-.053.262-.112.203-.112.289-.07.412-.235.326-.337.679a.257.257 0 01-.203.208l-.101.706.112.38-.182-.321-.251.257.214-.332.101-.7a.262.262 0 01-.16-.267c0-.364-.182-.332-.128-.75.037-.085 0-.042 0-.31.016-.186.23-.341.272-.48.043-.14.054-.45-.369-.45-.198.006-.85.075-1.069-.39a.711.711 0 01.465-1.01c.45-.16 1.497-.123 1.556-.91.059-.785-.727-.999-1.513-.972-1.657.059-3.663 1.01-5.48.903-2.23-.128-3.198-3.133-.861-4.737a2.326 2.326 0 010-.465c.09-1.219.77-2.47 1.812-2.85-.593-.818-.128-2.149-.058-2.384.135-.4.213-.818.23-1.24-1.642-.37-2.497 1.411-1.824 2.304 0 0-.743-.369-.395-1.465a2.139 2.139 0 012.138-1.4 1.786 1.786 0 00-.871-1.07c-.61-.3-1.385-.267-2.043.77-.887 1.411-1.063 4.293-2.427 5.544-.961 1-2.652.463-2.86-.909a2.732 2.732 0 01.278-1.256c.08-.166.032-.214-.038-.23-.07-.016-.123.07-.187.214a.823.823 0 01-1.475.224c-.097-.107-.342.006-.535-.17-.192-.177-.128-.188-.192-.241-.321-.273-.16-.375-.418-.636a.257.257 0 01-.08-.284L.796 7.2.41 7.102h.38l-.102-.347.182.353.534.438a.262.262 0 01.31 0c.321.182.38.01.717.262.07.054.133.027.283.134.15.107.187.374.278.476a.32.32 0 00.572-.096c.086-.193.332-.77.866-.728.457.027.77.47.642.91-.091.47-.652 1.357 0 1.801.652.444 1.235-.134 1.604-.829.775-1.46.957-3.678 1.957-5.202 1.23-1.887 4.309-1.224 4.533 1.604.145.06.283.136.412.225 1.032.69 1.759 1.924 1.567 2.994 1.02-.129 1.919.957 2.09 1.138.28.328.606.612.968.845 1.165-1.23.037-2.865-1.07-2.732 0 0 .69-.46 1.466.39.61.728.666 1.772.139 2.561.465.113.956.034 1.363-.219.583-.353.925-1.07.353-2.138-.776-1.476-3.187-3.075-3.588-4.876-.384-1.333.928-2.528 2.219-2.021.38.21.705.51.946.871.102.155.166.134.214.086.048-.048-.005-.14-.096-.268a.823.823 0 01.534-1.39c.145-.027.161-.289.418-.374.256-.086.23-.016.31-.048.395-.15.406.043.759-.048.1-.038.212-.01.283.07l.68-.263zm-10.297 6.26c-.065.53-.348 1.647-.187 2.332.155.871.823.823 1.069.395.163-.332.2-.711.107-1.069a3.106 3.106 0 00-.984-1.636zm.256.872c.17.262.293.551.364.856a1.3 1.3 0 010 .759c-.086.187-.332.187-.423-.23-.04-.462-.02-.928.06-1.385zm1.727 2.661c-.517.012-.67.472-.47.82.207.31.521.534.882.63a3.106 3.106 0 001.908-.037c-.422-.32-1.25-1.123-1.903-1.342a1.255 1.255 0 00-.417-.07zm.088.401a.807.807 0 01.201.04c.429.197.83.45 1.192.753a2.82 2.82 0 01-.962-.107 1.3 1.3 0 01-.642-.396c-.095-.134-.036-.3.21-.29zm-2.285.183a1.54 1.54 0 00-.984.45 3.106 3.106 0 00-.936 1.673c.535-.203 1.604-.519 2.139-.973.663-.588.251-1.166-.22-1.15zm-.025.341c.188.008.276.217-.04.488a5.39 5.39 0 01-1.234.631c.134-.277.315-.528.534-.743a1.3 1.3 0 01.7-.374.284.284 0 01.04-.002z' fill='rgba(0,255,0,1)'/%3E%3C/svg%3E");
background-size: 18px 18px; /* adopt this to your file tree font height */
    transform: translate(0px, 5px); /* to position the icon */
    background-repeat: unset;
    display: flex;
    height: 18px;
    width: 18px;
    margin: -10px 0px 0 0;
}

In a second time, rename two lines contains “Hypershift” to “Myfilename”

SO now, let’s begin how you can change the icons

  • first : go to https://remixicon.com/
    Choose an icon, set the pixel to 18px, and color to white or another but not black, and copy the dataURL
    Paste in the line "background image: url(…) to replace it

Save your snippet, and enjoy :slight_smile:

If you want more snippets, send me a message !

If you want to repeat the operation for others files, copy/paste the snippet in a next line, and change filename and icon again