{"id":13599676,"url":"https://github.com/material-extensions/vscode-material-icon-theme","last_synced_at":"2026-01-21T10:01:38.902Z","repository":{"id":37797918,"uuid":"67831372","full_name":"material-extensions/vscode-material-icon-theme","owner":"material-extensions","description":"Material Design icons for VS Code","archived":false,"fork":false,"pushed_at":"2026-01-13T06:18:32.000Z","size":150083,"stargazers_count":2647,"open_issues_count":489,"forks_count":729,"subscribers_count":14,"default_branch":"main","last_synced_at":"2026-01-13T08:39:22.289Z","etag":null,"topics":["material-icon-theme","material-icons","vscode","vscode-extension","vscode-icons","vscode-theme"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/material-extensions.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"material-extensions"}},"created_at":"2016-09-09T20:41:42.000Z","updated_at":"2026-01-13T06:18:37.000Z","dependencies_parsed_at":"2023-10-03T17:06:06.856Z","dependency_job_id":"fc92f1be-c780-401b-bf70-ec98b13ea8fb","html_url":"https://github.com/material-extensions/vscode-material-icon-theme","commit_stats":{"total_commits":2208,"total_committers":380,"mean_commits":5.810526315789474,"dds":0.4098731884057971,"last_synced_commit":"1c4309469f0ba8ab7c109d7a112a42a7a579656f"},"previous_names":["material-extensions/vscode-material-icon-theme"],"tags_count":100,"template":false,"template_full_name":null,"purl":"pkg:github/material-extensions/vscode-material-icon-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-extensions%2Fvscode-material-icon-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-extensions%2Fvscode-material-icon-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-extensions%2Fvscode-material-icon-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-extensions%2Fvscode-material-icon-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/material-extensions","download_url":"https://codeload.github.com/material-extensions/vscode-material-icon-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-extensions%2Fvscode-material-icon-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28631936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-icon-theme","material-icons","vscode","vscode-extension","vscode-icons","vscode-theme"],"created_at":"2024-08-01T17:01:08.895Z","updated_at":"2026-01-21T10:01:38.895Z","avatar_url":"https://github.com/material-extensions.png","language":"TypeScript","funding_links":["https://github.com/sponsors/material-extensions"],"categories":["TypeScript","VSCode"],"sub_categories":[],"readme":"\u003c!-- markdownlint-disable --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/main/logo.png\" alt=\"logo\" width=\"120\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eMaterial Icon Theme\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\u003cem\u003eMaterial Design icons for Visual Studio Code\u003c/em\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/material-icon-theme?style=for-the-badge\u0026colorA=263238\u0026colorB=4CAF50\u0026label=VERSION\" alt=\"NPM Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme\"\u003e\u003cimg src=\"https://img.shields.io/badge/Rating-4.9%2F5-43A047?style=for-the-badge\u0026colorA=263238\u0026colorB=43A047\" alt=\"Rating\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme\"\u003e\u003cimg src=\"https://img.shields.io/badge/Installations-%3E30M-43A047?style=for-the-badge\u0026colorA=263238\u0026colorB=43A047\" alt=\"Installations\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\u003cp align=\"center\"\u003eEnjoying Material Icon Theme? Support the project by starring it or becoming a sponsor!\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/material-extensions\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sponsor-GitHub-blue?logo=github-sponsors\u0026style=for-the-badge\u0026colorA=263238\u0026colorB=EC407A\" alt=\"Sponsor on GitHub\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/material-extensions/vscode-material-icon-theme\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/material-extensions/vscode-material-icon-theme?style=for-the-badge\u0026label=Star%20on%20GitHub\u0026colorA=263238\u0026colorB=1976D2\" alt=\"Star on GitHub\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n### File icons\n\n\u003cdetails\u003e\u003csummary\u003e🏞️ \u003cb\u003eShow all available file icons\u003c/b\u003e\u003c/summary\u003e\u003cbr/\u003e\u003cimg src=\"https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/fileIcons.png\" alt=\"file icons\"\u003e\u003c/details\u003e\n\n### Folder icons\n\n\u003cdetails\u003e\u003csummary\u003e🏞️ \u003cb\u003eShow all available folder icons\u003c/b\u003e\u003c/summary\u003e\u003cbr/\u003e\u003cimg src=\"https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/folderIcons.png\" alt=\"folder icons\"\u003e\u003c/details\u003e\n\n\u003cbr /\u003e\n\n## Table of Contents\n\n- [Features](#features)\n- [Getting Started](#getting-started)\n- [Customization](#customization)\n- [Commands](#commands)\n- [Icon sources](#icon-sources)\n- [Contributors](#contributors)\n- [Contributing](#contributing)\n- [Related extensions](#related-extensions)\n\n## Features\n\n- Material Design file \u0026 folder icons for VS Code\n- Customizable colors, opacity, and saturation\n- Icon packs and theme support\n- Custom icon associations and clones\n- Easy to use, modern, and actively maintained\n\n## Getting Started\n\n1. **Install the extension**\u003cbr\u003e\n  [![Install in VS Code](https://img.shields.io/badge/Install%20in%20VS%20Code-Click%20to%20Install-4CAF50?style=for-the-badge\u0026logo=visualstudiocode\u0026logoColor=white\u0026colorA=263238\u0026colorB=4CAF50)](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)\n\n2. **Activate the icon theme**\u003cbr\u003e\n  Open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS), type `Material Icons: Activate Icon Theme`, and select it.\n\n3. **Enjoy your new icons**\u003cbr\u003e\n  Your editor will now display beautiful, customizable Material Design icons for files and folders.\n\n## Customization\n\nYou can personalize the appearance of Material Icon Theme by adjusting colors, icon styles, opacity, and more to match your preferences or workflow.\n\n### Customize file \u0026 folder color\n\nYou can change the color of the default file and folder icons using the command palette:\n\n![custom folder colors](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/set-folder-color.gif)\n\nor via user settings:\n\n```json\n\"material-icon-theme.folders.color\": \"#ef5350\",\n\"material-icon-theme.files.color\": \"#42a5f5\",\n```\n\n### Folder themes\n\nYou can change the design of the folder icons using the command palette:\n\n![folder themes](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/set-folder-theme.gif)\n\nor via user settings:\n\n```json\n\"material-icon-theme.folders.theme\": \"specific\"\n```\n\n### Custom icon opacity\n\nYou can set a custom opacity for the icons:\n\n```json\n\"material-icon-theme.opacity\": 0.5\n```\n\n### Custom icon saturation\n\nIf colors do not make you happy you can change the icons to have less saturation making them look grayish or completely grayscale by setting saturation to 0:\n\n```json\n\"material-icon-theme.saturation\": 0.5\n```\n\nYou can also achieve no saturation (i.e., grayscale) by setting **Toggle Grayscale** to ON.\n\n### Custom icon associations\n\nYou can customize the icon associations directly in the user settings.\n\n#### File associations\n\nWith the `*.[extension]` pattern you can define custom file icon associations. For example you could define an icon for `*.sample` and every file that ends with `.sample` will have the defined icon. However, not all files with the same file extension always have the same icon. For some specific file names there is a special icon. In order to overwrite all the specific file icons as well, two asterisks must be set instead of one, i.e. `**.[extension]`.\n\nIf there's no leading `*` it will be automatically configured as filename and not as file extension.\n\n```json\n\"material-icon-theme.files.associations\": {\n    \"*.ts\": \"typescript\",\n    \"**.json\": \"json\",\n    \"fileName.ts\": \"angular\"\n}\n```\n\n#### Custom SVG icons\n\nIt's possible to add custom icons by adding a path to an SVG file which is located relative to the extension's dist folder. However, the restriction applies that the directory in which the custom icons are located must be within the `extensions` directory of the `.vscode` folder in the user directory.\n\nFor example a custom SVG file called `sample.svg` can be placed in an `icons` folder inside of VS Code's `extensions` folder:\n\n```text\n.vscode\n ┗ extensions\n   ┗ icons\n     ┗ sample.svg\n```\n\nIn the settings.json (User Settings only!) the icon can be associated to a file name or file extension like this:\n\n```json\n\"material-icon-theme.files.associations\": {\n    \"fileName.ts\": \"../../icons/sample\"\n}\n```\n\n_Note: The custom file name must be configured in the settings without the file ending `.svg` as shown in the example above._\n\n#### Custom file icon clones\n\nIt's also possible to clone existing file icons and change their colors to create new icons that can be associated with file names or file extensions. The following example shows how to clone the `rust` icon:\n\n```json\n\"material-icon-theme.files.customClones\": [\n  {\n    \"name\": \"rust-mod\",\n    \"base\": \"rust\",\n    \"color\": \"blue-400\",\n    \"fileNames\": [\"mod.rs\"]\n  },\n  {\n    \"name\": \"rust-lib\",\n    \"base\": \"rust\",\n    \"color\": \"light-green-300\",\n    \"lightColor\": \"light-green-600\",\n    \"fileNames\": [\"lib.rs\"]\n  }\n]\n```\n\nThis will create two new icons called `rust-mod` and `rust-lib` that are associated with the file names `mod.rs` and `lib.rs` respectively. The `base` property defines the icon that should be cloned (in this case the `rust` icon). The `color` property defines the color of the new icon. The `lightColor` property is optional and defines the color of the icon when Visual Studio Code is running with a light color theme. The `fileNames` property defines the file names that should be associated with the new icon. There's also a `fileExtensions` property, which can be used to associate the new icon with file extensions (`\"fileExtensions\": [\"ext\", \"ext2\"]`).\n\n![cloned file icons](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/how-tos/cloned-file-icons-example.png)\n\n- Although you can use any `#RRGGBB` color for the `color` and `lightColor` properties, if you want to stick with colors from the material palette, you can check the full list of allowed aliases in the [materialPalette.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/generator/clones/utils/color/materialPalette.ts).\n- You can check the full list of available icons to be used as the `base` in the [fileIcons.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/icons/fileIcons.ts).\n\n#### Folder associations\n\nThe following configuration can customize the folder icons. It is also possible to overwrite existing associations and create nice combinations. For example you could change the folder theme to \"classic\" and define icons only for the folder names you like.\n\n```json\n\"material-icon-theme.folders.associations\": {\n    \"customFolderName\": \"src\",\n    \"sample\": \"dist\"\n}\n```\n\n#### Custom SVG folder icons\n\nSimilar to the files, it is also possible to reference your own SVG icons for folder icons. Here it's important to provide two SVG files: one for the folder if it's closed and another one for the opened state. These two files - let's call them \"folder-sample.svg\" and \"folder-sample-open.svg\" - have to be placed into a directory which is relative to the extensions dist folder. This directory has to be somewhere inside of the `.vscode/extensions` folder.\n\nIn our example we place them into an `icons` folder inside of the `.vscode/extensions` folder:\n\n```text\n.vscode\n ┗ extensions\n   ┗ icons\n     ┣ folder-sample.svg\n     ┗ folder-sample-open.svg\n```\n\nIn the settings.json (User Settings only!) the folder icons can be associated to a folder name (e.g. \"src\") like this:\n\n```json\n\"material-icon-theme.folders.associations\": {\n    \"src\": \"../../../../icons/folder-sample\"\n}\n```\n\n#### Custom folder icon clones\n\nIt's also possible to clone existing folder icons and change their colors to create new icons that can be associated with folder names. The following example shows how to clone the `admin` folder icon:\n\n```json\n\"material-icon-theme.folders.customClones\": [\n  {\n    \"name\": \"users-admin\",\n    \"base\": \"admin\",\n    \"color\": \"light-green-500\",\n    \"lightColor\": \"light-green-700\",\n    \"folderNames\": [\"users\"],\n    \"rootFolderNames\": [\"users\"]\n  },\n  {\n    \"name\": \"roles-admin\",\n    \"base\": \"admin\",\n    \"color\": \"purple-400\",\n    \"folderNames\": [\"roles\"],\n    \"rootFolderNames\": [\"users\"]\n  }\n]\n```\n\nThis will create two new icons called `users-admin` and `roles-admin` that are associated with the folder names `users` and `roles` respectively. The `base` property defines the icon that should be cloned (in this case the `admin` folder icon). The `color` property defines the color of the new icon. The `lightColor` property is optional and defines the color of the icon when Visual Studio Code is running with a light color theme. The `folderNames` property defines the folder names that should be associated with the new icon. The `rootFolderNames` property defines the root folder names that should be associated with the new icon.\n\n![cloned folder icons](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/how-tos/cloned-folder-icons-example.png)\n\n- Although you can use any `#RRGGBB` color for the `color` and `lightColor` properties, if you want to stick with colors from the material palette, you can check the full list of allowed aliases in the [materialPalette.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/generator/clones/utils/color/materialPalette.ts).\n- You can check the full list of available icons to be used as the `base` in the [folderIcons.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/icons/folderIcons.ts).\n\n#### Root folder associations\n\nYou can customize the icon for your workspace's root folder. This is helpful if you want a distinct icon for the main folder in your project.\n\nTo assign an icon (e.g. the server folder icon) to a root folder (e.g., `backend`), use the following configuration:\n\n```json\n\"material-icon-theme.rootFolders.associations\": {\n  \"backend\": \"server\"\n}\n```\n\n#### Customize root folder icon color\n\nTo change the color of root folder icons, add this setting:\n\n```json\n\"material-icon-theme.rootFolders.color\": \"#F4511E\"\n```\n\n#### Language associations\n\nWith the following configuration you can customize the language icons. It is also possible to overwrite existing associations.\n\n```json\n\"material-icon-theme.languages.associations\": {\n  \"languageId\": \"iconName\",\n  \"json\": \"json\"\n}\n```\n\nYou can see the available icon names in the overview above. See \"[Known language identifiers](https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers)\" in the VS Code documentation for a list of permitted values for `languageId`.\n\n#### Custom language icon clones\n\nIt's also possible to clone existing language icons and change their colors to create new icons that can be associated with language ids. The following example shows how to clone the `autohotkey` language icon:\n\n```json\n\"material-icon-theme.languages.customClones\": [\n  {\n    \"name\": \"ahk-clone\",\n    \"base\": \"autohotkey\",\n    \"color\": \"blue-400\",\n    \"lightColor\": \"grey-600\",\n    \"ids\": [\"ahk2\"]\n  }\n]\n```\n\nThis will create a new icon called `ahk-clone` which is associated with the language id `ahk2` respectively. The `base` property defines the icon that should be cloned (in this case the `autohotkey` language icon). The `color` property defines the color of the new icon. The `lightColor` property is optional and defines the color of the icon when Visual Studio Code is running with a light color theme. The `ids` property defines the language ids that should be associated with the new icon.\n\n![cloned language icons](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/how-tos/cloned-language-icons-example.png)\n\n- Although you can use any `#RRGGBB` color for the `color` and `lightColor` properties, if you want to stick with colors from the material palette, you can check the full list of allowed aliases in the [materialPalette.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/generator/clones/utils/color/materialPalette.ts).\n- You can check the full list of available icons to be used as the `base` in the [fileIcons.ts](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/src/core/icons/fileIcons.ts).\n\n## Commands\n\nPress `Ctrl-Shift-P` to open the command palette and type `Material Icons`.\n\n![commands](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/commandPalette.png)\n\n### Command List\n\n| Command                           | Description                                                                         |\n|------------------------------------|-------------------------------------------------------------------------------------|\n| **Activate Icon Theme**            | Activate the icon theme.                                                            |\n| **Change File Color**              | Change the color of the file icons.                                                 |\n| **Change Folder Color**            | Change the color of the folder icons.                                               |\n| **Change Folder Theme**            | Change the design of the folder icons.                                              |\n| **Change Opacity**                 | Change the opacity of the icons.                                                    |\n| **Change Root Folder Color**       | Change the color of the root folder icons.                                          |\n| **Change Saturation**              | Change the saturation value of the icons.                                           |\n| **Configure Icon Packs**           | Selects an icon pack that enables additional icons (e.g. for Angular, React, Ngrx). |\n| **Restore Default Configuration**  | Reset to the default configuration.                                                 |\n| **Toggle Explorer Arrows**         | Show or hide the arrows next to the folder icons.                                   |\n| **Toggle Grayscale**               | Set icon saturation to `0` (grayscale), or `1` (color).                             |\n\n## Icon sources\n\n- [Material Design Icons](https://pictogrammers.com/library/mdi/)\n- [Material Symbols](https://fonts.google.com/icons)\n\n## Contributors\n\nThank you to all our amazing contributors!\nYour support helps make Material Icon Theme better for everyone.\n\n[![Contributors](https://raw.githubusercontent.com/material-extensions/vscode-material-icon-theme/main/images/contributors.png)](https://github.com/material-extensions/vscode-material-icon-theme/graphs/contributors)\n\n## Contributing\n\nWe welcome contributions of all kinds! Whether you want to add new icons, improve documentation, fix bugs, or help with translations, your input is appreciated.\n\n**How to get involved:**\n\n- 📖 **Read the [Contribution Guidelines](https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md)**\n  Learn about our coding standards, icon design tips, and workflow.\n\n- 🐛 **Report Issues**\n  Found a bug or have an icon request? [Open an issue](https://github.com/material-extensions/vscode-material-icon-theme/issues).\n\n- 💡 **Submit Pull Requests**\n  Ready to contribute code or icons? [Create a pull request](https://github.com/material-extensions/vscode-material-icon-theme/pulls).\n\n- 🌍 **Help with Translations**\n  Improve or add translations by editing the files in `src/core/i18n/translations/` and `package.nls.*.json`.\n\n## Related extensions\n\n- [Material Icons for GitHub](https://github.com/material-extensions/material-icons-browser-extension)\n- [Material Product Icons](https://github.com/material-extensions/vscode-material-product-icons)\n- [Material Icons NPM Package](https://www.npmjs.com/package/material-icon-theme)\n\n\u003cbr /\u003e\n\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/material-extensions\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sponsor-GitHub-blue?logo=github-sponsors\u0026style=for-the-badge\u0026colorA=263238\u0026colorB=EC407A\" alt=\"Sponsor on GitHub\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/material-extensions/vscode-material-icon-theme\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/material-extensions/vscode-material-icon-theme?style=for-the-badge\u0026label=Star%20on%20GitHub\u0026colorA=263238\u0026colorB=1976D2\" alt=\"Star on GitHub\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cem\u003eEnjoying Material Icon Theme? Support the project by starring it or becoming a sponsor!\u003c/em\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaterial-extensions%2Fvscode-material-icon-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaterial-extensions%2Fvscode-material-icon-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaterial-extensions%2Fvscode-material-icon-theme/lists"}