I'm trying to build this with some additional icons for my vscode extension (for use in a webview). However, I can't seem to manage to build it. After running npm install, npm run build isn't working, as there isn't actually a script in package.json called "build". I tried npm run fonts instead, but it's throwing an error internal to webfonts-generator (TypeError: Cannot read property 'deps' of undefined).

How should I actually build this? My OS is Windows 10 19041.

Hi,
You currently have "discard" that is obviously the Undo button. However there is not a Redo icon. Could you please add one?
Thanks

In our extension, we have an action called Export Jar, which generates a build file to the user.

Can we add a new icon for this kind of action?

For tests I'd like an icon to use in the menu bar for the "auto rerun" state. Maybe something like this?

JetBrainz has this: https://www.jetbrains.com/help/webstorm/rerunning-tests.html#auto

There's this icon

I think it should be a codicon so that we can have its style match the user's theme color (if I provide an svg icon in js-debug, it's a fixed color).

Note: This isn't technically an issue with this icon set as published. Consider this a feature request, that would be appreciated.

I am running my own build step on the svg files, and packaging it with a slightly different process. The only icon that fails to build correctly for me is the new-file icon.

It's the only icon published as two separate paths rather than single compound path like the rest of the set. Can this be fixed?

I assume you might have master file you publish out of, or would you accept a PR that fixes it?

Follow up from #51, we have the assets for it now.

cc @eamodio

This seems to be missing, right? Any other place where I can find it?

terminal-bash for upcoming terminal tabs

Here is info on the icon: https://github.com/odb/official-bash-logo

https://github.com/microsoft/vscode-icons/blob/master/icons/dark/run-all.svg

Hi 👋

From the README.md:

Microsoft and any contributors grant you a license to the Microsoft documentation and other content in this repository under the Creative Commons Attribution 4.0 International Public License, see the LICENSE file, and grant you a license to any code in the repository under the MIT License, see the LICENSE-CODE file.

Could someone clarify what "other content in this repository" means or refers to? 😅

I want to use codicons in a personal website (some symbols) but I'm confused about the license. With "any code" also refer to the svg files under src? And if so, does it mean SVGs are licensed under MIT .. but docs under CC4? 🤔

I guess a more direct question would be if I can use certain SVG codicons' icons in a personal website and if so, do I need to provide the copy of the LICENSE-CODE only in the code or dir where codicons are in my project (MIT) or also CC4 attribution? 🤔

If CC4 attribution is required, is it okay to embed it in the SVG icon as a comment? (Sort of like FontAwesome does)

Love the clean looks of this icon font. Nice work!

I would love to see this repo use Github's "Releases" feature or at least some semantic versioning git tags. I know the version is in the package.json but it would be nice to be able to reference a specific release via git tag rather than searching which commit was what version.

I'm developing type hierarchy feature for Java users in VS Code and find there is no type hierarchy existing in VS Code. I'm going to contribute to the reference view by References Viewlet API, the type hierarchy icons will show in the reference view as the following screenshot shows:

Usually, there are three views in type hierarchy, they are Type Hierarchy, SuperType Hierarchy and SubType hierarchy. SuperType Hierarchy shows the super types of the given type while the SubType hierarchy shows the sub types of the given type. Type Hierarchy shows both of them.

It could be very great and intuitional if there are meaningful view icons in the type hierarchy view.

Other IDEs' icons (in red square):

• IntelliJ
  

• Eclipse
  

First of all, thank you for publishing this repo. It's a real time-saver to be able to use these icons on our extensions 👏

About the issue, I've noticed that some pieces of the remote-explorer icon appears blurry, compared to other icons, like folder and root-folder, which has sharper lines.

The remote-explorer icon is a monitor in the back with a remote symbol inside a small circle, in front. You may notice that the monitor is blurry, specially with zoom level 0.

I added a few screenshots, dark and light themed, with zoom level 0 and 3.

Also, the remote symbol (><) inside the small circle is hard to distinguish, but in this case, not because is blurry, but small. I'm not sure, but maybe thicker lines would give a better result.

Thank you

Tests in the new API have several states:

export enum TestRunState {
	// Initial state
	Unset = 0,
	// Test is currently running
	Running = 1,
	// Test run has passed
	Passed = 2,
	// Test run has failed (on an assertion)
	Failed = 3,
	// Test run has been skipped
	Skipped = 4,
	// Test run failed for some other reason (compilation error, timeout, etc)
	Errored = 5
}

I would like icons to represent these in the sidebars 🙂 Some existing icons might work, e.g.

• Unset: no icon, or maybe some "dimmed" icon like an unset breakpoint?
• Running: refresh
• Passed: check
• Failed: close
• Skipped: same as unset? Not sure... This would be if you have something like test.only in your code.
• Errored: issues

This is being implemented in core so I can have different colors/opacities/etc in the icons. Let me know what you think.

Hello,

I published package:codicon, which is a Dart wrapper around the codicon.ttf file found in this package. The LICENSE for package:codicon contains both the MIT license and the CC-BY 4.0 license (both taken from this repository) and linked from in this repository's README.

However, it appears that the information in the readme at https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons link to a different Creative Commons license (Creative Commons - ShareAlike (CC BY-SA)). Which is correct? Is our package (package:codicon) correctly licensed under the same terms that this repository is (MIT and CC BY 4.0), or should both this repository and package:codicon be licensed under MIT and CC BY-SA?

Happy to follow up offline if that is easier - thanks for your help.

The refresh icon has overlapping paths that cause an artifact in the generated output. 🦅 👀

Suggested fix: manually merge your paths into one shape.

As shown in vscode:

As shown individually:

I installed the icons via npm i vscode-codicons. Some of the icons in the TTF are inverted and look like this:

The TTF file in this repo is correct. Previous versions of the TTF file are also correct. Would it be possible update the npm version of the TTF file to fix this issue? Thanks!

It would be great to be able to differentiate when a filter is active or not.

Would be nice for the Problems view and I would also like it for usages in GitLens.

Smart Select is a feature that uses the dependency graph between cells to "magically" select them for you.
Icon we were using in spec is this magic wand type of icon.

Could we get this or something very similar for the feature to add to cell toolbar?

Our extension contains a explorer to show the user's project dependencies. (the node Maven Dependencies in the below picture)

Currently we are using files to represent it. Is it possible to add a new icon to represent library?

Hello!

I'm working on my extension currently, using your library.
I'm mostly guided by this example, and your read me and unfortunately it doesn't seem to work.

I've tried installing the library and calling plane <div class='codicon codicon-add'> add</div>
Which doesn't seem to work for me.

I've also tried importing using the URI-s your css and font like shown in the example, this didn't work as well. Am I missing something in the documentation? Besides installing the library, what are the needed steps in order to use the icons in my webview?

Thanks a lot!

Because the folder-opened.svg icon uses clip-path with an id reference, the icon will break if more than one are included in the page at the same time.

<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><g clip-path="url(#clip0)"><path d="M.5 14h12l.48-.37 2.63-7-.48-.63H13V3.5l-.5-.5H6.71l-.86-.85L5.5 2h-5l-.5.5v11l.5.5zM1 3h4.29l.86.85.35.15H12v2H8.5l-.35.15-.86.85H2.5l-.47.34-1 3.08L1 3zm11.13 10H1.19l1.67-5H7.5l.35-.15.86-.85h5.79l-2.37 6z"/></g><defs><clipPath id="clip0"><path d="M0 0h16v16H0V0z"/></clipPath></defs></svg>

Is there any way to remove this or stop using an id? The id attribute which shouldn't be used in a page more than once so perhaps the second icon is using the first's clip-path?

See this related issue: chakra-ui/chakra-ui#3442

I am curious, is there a possiblity of exposing of codicons to the vscode extension's webview so that extension developers can use the codicons directly like they use font-awesome (after adding the dependencies)?

Here is the icon I am currently using to swap comparisons in GitLens:

With a lot of icon fonts (Font Awesome, for example) you can use

<ul>
  <li class="fa fa-icon-bell">List Item</li>
  <li class="fa fa-icon-star">List Item</li>
</ul>

and the marker for that bullet point is changed to that icon in the font.

Currently, doing <li class="codicon codicon-symbol-member">womp</li> causes the list item to break in new and exciting ways, depending on the browser that you use.

I'm not sure if this a documentation problem, a real bug or something I misunderstand, but here we go.

When I compare the list of icons in this repository, which is apparently what is used by vscode, I would expect that it corresponds to the product icon reference, which however is not the case. Fore example I don't see any of the find-* icons mentioned in the reference.

And here's a side question, but also related: does the monaco-editor use exactly the same icons or just a subset? For example, I get no output for codicon-output, even though this icon is both, in this repo and mentioned in the icon reference.

Something similar to this -- for when a check-able operation isn't support

Jupyter extension would like to add the run by line icon to the cell toolbar and would like to match the theme of the other vs codicons in the cell toolbar (keep it snazzy)

This is the icon currently used for run by line in our stable webview implementation.

Uninstalled and reinstalled the plugin as well as the font files. E.g. account and bell dot are not rendering. Seems to be affecting ~10% of icons.

@misolori The online preview page not found, https://microsoft.github.io/vscode-codicons/dist/codicon.html

In https://github.com/microsoft/vscode-js-profile-visualizer/issues/11 the flame graph now supports a 'left-heavy' view, where callstacks are grouped and sorted by the cumulative time taken, rather than being displayed chronologically. I didn't find a good icon to use for it in our existing codicons.

Speedscope uses a simple arrow, but this is not self-explanitory:

Something like the generic chart icon rotated clockwise 180 degrees would work nicely https://iconmonstr.com/chart-4-svg/

Need to move the build steps into a github actions so that others don't need to run these steps manually, which can be problematic when creating PRs. This action should build the files and then output them to the dist folder.

Something like this:

I would like to use it in GitLens for adding co-authors. The above is the icon I am currently using, but the plus should probably be an overlay in the bottom right like our other + icons.

Hi,

Due to the fact the generated css has a fixed path to the relative font

@font-face {
	font-family: "codicon";
	src: url("./codicon.ttf?2d8845e471b17710e17ce49926ab9dfb") format("truetype");
}

This is forcing me to have to put the font file in the same directory as the styling, which makes no sense. If your file structure is something like:

wwwroot/
wwwroot/css
wwwroot/fonts

Then you need to put codicon.ttf in the css folder instead of fonts one.

My suggestion is to create a SASS version where the url if a variable, something like $vscode-codicons-font-path.

Thanks.

For my ESLint execution confirmation dialog it would be great to have a double check (two check marks) in the codicon set to indicate that the user has pressed Always Allow.

Looks like the general pattern for "template" icons has a dotted line rectangle behind the image.
Could we get an icon that looks like this but with a notebook in front for notebook templates?

Icon circle-large-filled is 17x16 instead of 16x16 with 1 extra pixel on left side.

For the notebook templates feature we need to be able to differentiate between save notebook and save as template.
Could we get an icon like this to indicate "Save as Template"?

Here is out current version

Here is the octicons version

I would love to see our version much closer to the octicon version.

We currently only have a clipboard icon, but imo it isn't too friendly for copy operations

Here is the one I am currently using in GitLens:

An alternate version with a globe or "link" overlay would be nice as well.

As discussed, to support microsoft/vscode#10546, microsoft/vscode#120241 I'd like to request the following icons:

• Command Prompt: existing terminal icon with C:\ or C: in it?
• PowerShell: slanted icon matching our style containing >_
• Tmux: ref, note the slightly heavier bottom line
• Debian: ref
• Ubuntu: The "circle of friends", waiting on assets for this
• Linux: penguin icon, this will be used as a fallback for WSL terminals

Currently we have icon for debug-restart like this:

This icon looks good, but when it comes together with the refresh button, Users might feel a little bit confused:

Can we provide a new alternative icon for debug-restart, something like: (sorry for my weak PS skill 😄 )

Other IDEs has similar pattern:

• IntelliJ

• Eclipse

See context in internal backlog issue 2056. We'd like an inspect-like icon:

While we have a good disconnect icon, because it is used for debugging it has a color, and I would like to have a normal version to use. I currently am using a copied SVG version in GitLens today.