Icon extensions

[nervenes]

Check for existing issues

• Completed

Describe the feature

This issue proposes the ability for extensions to provide custom file and folder icons in Zed.

If applicable, add mockups / screenshots to help present your vision of the feature

No response

[maxbrunsfeld]

We should definitely do this soon, since our initial use case for extensions is going to be adding support for custom languages. Do you want to propose a precise schema by which extensions could define file icons?

[nervenes]

Would it be reasonable to look for an icons directory in the schema?

[flazouh]

I'd love to have material icons in zed :) Upvoted.

[maxbrunsfeld]

would it be fair to let users create a file-icons directory and then associate each file as a string key with the corresponding extensions as a value of list of strings?

Yeah, this seems like it'd be fine.

[nervenes]

@maxbrunsfeld I'm having a bit hard time with this.. any help would be appreciated!

[aramshiva]

I would love support for seti color icons! If they were added I would switch to zed immediately! Upvoted!

[raikusy]

One of the top reason I'm struggling to switch to Zed! Please bring this asap 🙏

[MeHattabi]

Everyone once in a while I'm checking if we can bring our own icons, not having colourful icons is the only reason I can't get used to Zed somehow.

[kyleboe]

+1 for Material Icons!

[coderlfm]

+1 for Material Icons!

[space7panda]

+1 For icon extensions, it's painful to work with the filesystem.

At this point, it's more motivating to use vim/neovim rather than Zed 🤷

[Gin-Quin]

Indeed, colored file icons is to the explorer what syntax highlighting is to the code editor. Once you're used to it, it's hard to come back to monochrome icons.

Here is a side-by-side comparison between colored icons in VSCode and monochrome icons in Zed. One is clearly more visually appealing and it's easier to sort what is what.

Note that I'm using an extension that also set special icons and colors to folders depending on their names.

[GMkonan]

Is this still being worked on? I saw a couple of PR's but all of them were closed. I saw @maxdeviant saying that you are not using JSON schemas to validate extension files anymore and that the schema would be revisited. In what point exactly is this?

I can work on this PR btw I just want to know what is the current vision for icon extensions

[jerryjappinen]

After trying out Zed, this is one of my blockers for switching. Not having colored icons makes it tedious to find files, distinguish between file types (like PNGs vs SVGs) and get an overview of a project layout. It's not just a question of design preference, it's also a usability issue.

Basically what I need is color-coding of file icons, and a better coverage of file types (like cjs and scss files).

I think a built-in colored icon set variant would be fine for most people, if the developers are concerned about aesthetics.

Another example: can you clearly and easily tell the difference between my utility files, and their test files? Maybe it would be good practice to have them in the same folder - but on Zed, I just couldn't tell them apart at all if I did.

[LDprg]

Yeah, uncolored icons can sometimes be really confusing especially with a great amount of files.

[Leftwitch]

I have a Branch working with colored Icons and error indicators for filenames, however I'm not very sure if I should make a PR with this, or put a whole extension system on top of it. Also I'm very new to Rust, so the code might not be top tier although I tried to make it as good as possible.

Not quite sure how to go from here, but if anyone is interested feel free to HMU

[Blaumaus]

I have a Branch working with colored Icons and error indicators for filenames, however I'm not very sure if I should make a PR with this, or put a whole extension system on top of it. Also I'm very new to Rust, so the code might not be top tier although I tried to make it as good as possible.

Not quite sure how to go from here, but if anyone is interested feel free to HMU

Please share, it would be awesome!

[Erikel746]

I have a Branch working with colored Icons and error indicators for filenames, however I'm not very sure if I should make a PR with this, or put a whole extension system on top of it. Also I'm very new to Rust, so the code might not be top tier although I tried to make it as good as possible.

Not quite sure how to go from here, but if anyone is interested feel free to HMU

Please share your work with us. 👍

[Leftwitch]

Give me an hour or so, I'll make my fork public, one branch just with the enabled possibility to replace the existing svgs with colored ones, the other one with catpuccino icons just as POC.

If this proves to be working, we could work on a solution of how to make them "installable" without having to rebuild zed.

Edit:
Thats how it looks with the linked repo (branch: feat/colored-icons-catpuccino )

There is also a branch just called feat/colored-icons, it includes only the functionality but no icon pack, so the with zed shipped icons will just appear black.

Also there is a branch called feat/colored-icons-refactor, which is pushing the icons to the limit, by refactoring the icon changes i made in the previous branches, and adding (colored!) icons to various places like: the tab panes and file finder (CMD+P), however this branch doesn't highlight diagbostic errors in files yet, overall this branch atleast is a pure playground for now (you could say that for the entire repo, its just proof of concept till I know how to proceed best).

In both branches there is also an WIP commit which highlights files as red when the diagnostics detect something wrong in them, depends on the LSP how it handles that, rust scans full project for example while typescript only opened files.

Feel free to test around, and maybe we can push this further with extension to make a good PR
https://github.com/Leftwitch/zed

[equinusocio]

As the author of Material Theme for Vscode (over 7 million users), I would like to see this feature (and more theme/extension-related ones) so we can consider bringing Material Theme experience to Zed too. Of course we need API and doc to ship custom icons from our themes

[Ymirke]

Cool to see this come a bit closer to fruition @Leftwitch!

I'm assuming there should be a bigger change in how zed handles the folder and file icons under the hood, as well as a way to publish and install themes.

Doesn't seen this as a top priority from the zed team ( although I'm sure extensions are high up on their lists! )

Can at least attest that this is the primary reason I'm not using zed day-to-day.

Out of curiosity, how does VSCode handle this?
It seems icon themes are packaged as extensions, and their extension API has support for this feature.

If someone with more familiarity with the codebase could break down the tasks required I'd be interested in helping out a bit!

[equinusocio]

@Ymirke

Out of curiosity, how does VSCode handle this?
It seems icon themes are packaged as extensions, and their extension API has support for this feature.

VSCode icon themes are json made by a list of icon names, paths ad associations.

{
  "icons": {
    "_file_css": "./icons/css.svg",
    "_folder_node": "./icons/folder-node.svg"
  }
}

icon names can be extended with custom ones, so we can add for example "_file_custom" pointing to an icon. Then, in the same json, there is a list of icon associations. The final json is something like this:

{
  "icons": {
    "_file_css": "./icons/css.svg",
    "_file_custom": "./icons/custom.svg",
    "_folder_node": "./icons/folder-node.svg"
  },
  "fileExtensions": {
     "css": "_file_css"
  },
  "fileNames": {
     "postcss.config.js": "_file_custom"
  },
  "folderNames": {
     "node_modules": "_folder_node"
  }    
}

[Leftwitch]

Cool to see this come a bit closer to fruition @Leftwitch!

I'm assuming there should be a bigger change in how zed handles the folder and file icons under the hood, as well as a way to publish and install themes.

Doesn't seen this as a top priority from the zed team ( although I'm sure extensions are high up on their lists! )

Can at least attest that this is the primary reason I'm not using zed day-to-day.

Out of curiosity, how does VSCode handle this?
It seems icon themes are packaged as extensions, and their extension API has support for this feature.

If someone with more familiarity with the codebase could break down the tasks required I'd be interested in helping out a bit!

Yeah as you said it looks like it needs deeper changes, I just went for it and started making custom file themes, however my rust is still very very early days, I'm able to get my stuff done, but not sure if it's clean

Right now I need to be able to load themes outside of the bundle, Inlcuding their icons, and add some sort of selector eventually, it's still very early, but it's a good practice I guess ^^

If I have some concept to show I can ping you again, maybe to clean up my prototype and make a good pr ?

Right now I'm just trying to get zed to a point where I enjoy using it, as long I feel I need to use vscode to edit zed, zed is not good enough, and one major point are surely the icons

[alvinometric]

Can at least attest that this is the primary reason I'm not using zed day-to-day.

I know every user has their "one dealbreaker", but I just tried to make the switch, and the lack of icons was that one issue for me too

[mdrbohlav]

To use chevron instead of folder icons just use "folder_icons": false option in the settings under project_panel. Another great options are auto_fold_dirs and indent_size. Otherwise to be able to change the file icons pack is a feature I would love to see in Zed as well.

{
  ...
  "project_panel": {
    "auto_fold_dirs": false,
    "folder_icons": false,
    "indent_size": 10
  },
  ...
}

[SergioRibera]

First of all, sorry for suggesting this here, but I didn't consider necessary to create a new issue since this topic seems to be related to some you already have in progress.

I wanted to propose an idea to improve the icon system as a plugins. My proposal is that each language extension would provide a default icon and that there would be icon packs to replace these defaults. Zed would have a set of default icons that would act as a custom package, and the behavior would be as follows:

• If an icon package does not have an icon for a specific file type, the default icon of the language extension would be used.
• If neither the package nor the extension provides an icon, a generic icon would be displayed by default.
• To optimize performance, each time an extension is installed, a JSON file would be generated with the list of available icons (similar to how they already do with extensions).
• The idea is that if you have several icon packs installed you could select one from the selection menu.

This would be an example of how an extension.toml manifest for an extension that supports several languages might look like:

id = "cpp"
name = "C++"
version = "1.0.0"

[icons]
# custom icons by file type.
cpp = "icons/cpp.svg"
hpp = "icons/hpp.svg"
h = "icons/h.svg"
cxx = "icons/cxx.svg"

The JSON file generated to optimize access to the icons could look like this:

{
    "h": "cpp/icons/h.svg",
    "cpp": "cpp/icons/cpp.svg",
    "hpp": "cpp/icons/hpp.svg",
    "cxx": "cpp/icons/cxx.svg"
}

In this way, the extension can manage its icons efficiently, without having to do too many unnecessary reads from the file system, improving performance.

If you find this proposal useful and would like to explore it further, I would be happy to collaborate with a prototype PR to test the idea.

Note

This proposal aims to solve problems such as:

What if I want to add a new language that does not come in the official Zed package? Will I have to wait for the Zed team to add the icon with its style? Where is the customisation? I mean I like flat icons, but someone else likes neon icons or more cartoon icons. I think this should be a bit more automatic and flexible, so my proposal goes that way.

[ARKye03]

I'm trying Zed because it offers almost everything I need, it's minimal, yet strong. However I need icons with color it's not because it's "prettier" it's an accessibility thing that the actual monochrome style breaks me, and it's preventing me from switching to Zed strongly. Thanks to the Dev Team great job.

[sammcj]

I'm someone that has to rely on visual hinting quite a lot from an accessibility point of view, I really like Zed but the lack of visual hinting in a few places makes it quite tough for me.

I believe this comparison between Zed and VSCode highlights (pun not intended) the potential issues:

• Lack of differentiation between common file types
• Lack of differentiation between common directory types
• Lack of differentiation between top level projects
• No hinting as to files with errors or warnings
• No hinting as to files with changes that are yet to be added/committed to git
• Large amount of vertical spacing between files means less information is available at first glance (without scrolling)

By differentiation I mean:

• Lack of contrast between files vs directories
• Lack of colour based on common file or directory types, or file status (errors,warning)

I also noticed that the file you have open is not consistently selected in the file tree, in the below screenshot you can see I have 'locals.tf' open, but a directory (modules/loadbalancer) is shown in the file tree:

[diasdev]

I'm trying Zed because it offers almost everything I need, it's minimal, yet strong. However I need icons with color it's not because it's "prettier" it's an accessibility thing that the actual monochrome style breaks me, and it's preventing me from switching to Zed strongly. Thanks to the Dev Team great job.

Exactly the same for me. I may even say that VS Code is sometime over the top, but coloring and contrast is essential for me. Not everyone has that 20-year-old perfect eye sight, not me for sure, and trying to navigate the project panel as currently is has been a pain for me and I find myself going back to VSCode to rest my eyes.

[sam0x17]

Yeah similarly, look how much more visual information I get out of my vscode setup and how readable everything is:

And it's actually ironic because I use the "One Dark Pro" theme that tries to make everything look like Atom, in many ways doing it better than Zed

Also using material icons theme

[kurtbuilds]

It looks like @Leftwitch has a working fork for this issue, and tons of people (myself included) are pretty eager to see this functionality. Wonder if @Leftwitch you can ready a PR or the Zed team could chime in on the steps towards merging that in?

[Leftwitch]

It looks like @Leftwitch has a working fork for this issue, and tons of people (myself included) are pretty eager to see this functionality. Wonder if @Leftwitch you can ready a PR or the Zed team could chime in on the steps towards merging that in?

My problem is mostly that I couldn't quite figure out how to make this "universal" in terms of a new extension/plugin type, I know where to look but I didn't have the time to dig in so deep Into zeds code at least yet.

[kurtbuilds]

I'm starting to work on a PR to make this feature merge-able.

Could someone from the Zed team chime in on any existing thoughts on how this should be built out. Maybe @osiewicz or @mikayla-maki - I saw you both had recent contributions on the file_icons.rs file.

As requirements:

• Icons should be distinct from themes, so that people can mix and match choices of themes, and icons (or built in icons).
• Users should be able to customize further (e.g. override a file icon)

As non-requirements:

• I planned to leave building a icon set selector UI, similar to the theme selector, as future work.

For implementation:

• Create a new IconSettings object that is impl settings::Settings. It'd define several new keys for settings.json to configure settings, including defining an "icon_set" (e.g. "Catppuccin Mocha"), and custom stems, suffixes, and types (same structure as the existing file_types.json), so that users can override. As one use case, I see that c and h files both get mapped to the c filetype, but this should allow different icons for each .c and .h files

• extension.toml gets a new icons key, which similarly to a theme, maps to an array of paths of JSON objects, which define families of icon sets.

• The mechanics of using the icons would be quite similar to the code from @Leftwitch 's fork.

Let me know if that sounds right to you!

[SturdyFool10]

I am still(obviously) very interested in seeing this come to the platform, it is one of the few things I feel are missing, sorry for not seeing this in my initial search for existing issues but my search was pretty centered around the word "color" so I guess that makes sense why I didn't see this

[muuvmuuv]

Addition to non requirements: Icons based on theme contrast preferences, so light, dark and also a11y contrast.