Skip to content

Customize Icons For File And Folder

phoenixide edited this page Jan 17, 2024 · 4 revisions

The icons in the file tree can be customised. Even add icons for unsupported extensions!

file-Icon.png

How to add custom icons

In the Brackets preferences(Debug Menu > Open preferences file) file you'll need to add this to the bottom:

"brackets-icons.icons": {}

Now you're ready to add some customizations. Here's an example icon preference:

"brackets-icons.icons": {
	"html": {
			"icon": "fa fa-code",
			"color": "#E84D49",
			"size": 16
	}
}

You can use the classes in Font Awesome, Devicons and file-icons to specify the icon.

You can also add an extension that's not already supported the same way.

	"html": {
			"icon": "fa fa-code",
			"color": "#E84D49",
			"size": 16
	},
	"spaghetti": {
			"icon": "fa fa-motorcycle",
			"color": "#DA70D6",
			"size": 13
	}

credits

  • Based on extension by https://github.com/ivogabe/Brackets-Icons
  • Font Awesome (GPL license), Devicons (MIT license) and file-icons (MIT license) are included in Brackets-Icons.
  • Material icons are also licence compatible with brackets, but not directly integrated in source. Please download individual SVGs from https://fonts.google.com/icons as required.