Home

Awesome

File Icons

Build status: TravisCI Latest package version

File-specific icons in Atom for improved visual grepping.

<img alt="Icon previews" width="850" src="https://raw.githubusercontent.com/file-icons/atom/6714706f268e257100e03c9eb52819cb97ad570b/preview.png" />

Supports the following core packages:

An API is offered for packages not listed above. See the integration steps for more info.

Installation

Open SettingsInstall and search for file-icons.

Alternatively, install through command-line:

apm install --production file-icons

Customisation

Everything is handled using CSS classes. Use your stylesheet to change or tweak icons.

Consult the package stylesheets to see what classes are used:

Icon reference

Examples

Resize an icon

.html5-icon:before{
	font-size: 18px;
}

// Resize in tab-pane only:
.tab > .html5-icon:before{
	font-size: 18px;
	top: 3px;
}

Choose your own shades of orange

.dark-orange   { color: #6a1e05; }
.medium-orange { color: #b8743d; }
.light-orange  { color: #cf9b67; }

Bring back PHP's blue-shield icon

.php-icon:before{
	font-family: MFizz;
	content: "\f147";
}

Assign icons by file extension

The following examples use attribute selectors to target specific pathnames:

.icon[data-name$=".js"]:before{
	font-family: Devicons;
	content: "\E64E";
}

Assign icons to directories

.directory > .header > .icon{
	&[data-path$=".atom/packages"]:before{
		font-family: "Octicons Regular";
		content: "\f0c4";
	}
}

Troubleshooting

<a name="error-after-installing"></a>

I see this error after installing:

"Cannot read property 'onDidChangeIcon' of undefined"

A restart is needed to complete installation. Reload the window, or restart Atom.

If this doesn't help, please file an issue.

<a name="npm-error-when-installing"></a>

Installation halts with an npm error:

npm ERR! cb() never called!

There might be a corrupted download in your local cache. Delete ~/.atom/.apm, then try again:

rm -rf ~/.atom/.apm
apm install --production file-icons

<a name="an-icon-has-stopped-updating"></a>

An icon has stopped updating:

It's probably a caching issue. Do the following:

  1. Open the command palette: <kbd>Cmd/Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>
  2. Run file-icons:clear-cache
  3. Reload the window, or restart Atom

<a name="ruby-files-look-weird"></a>

Ruby files are showing the wrong font:

If language-ethereum is installed, remove it. This is a known issue with the package, which is no longer maintained. For Solidity support, use linter-solidity or language-solidity instead.

If language-ethereum isn't installed, please follow these steps and file an issue.

<a name="the-tree-views-files-are-borked"></a>

The tree-view's files are borked and look like this:

If you haven't restarted Atom since upgrading to File-Icons v2, do so now.

If restarting doesn't help, your stylesheet probably needs updating. See below.

<a name="my-stylesheet-has-errors-since-updating"></a>

My stylesheet has errors since updating:

As of v2.0, classes are used for displaying icons instead of mixins. Delete lines like these from your stylesheet:

-@import "packages/file-icons/styles/icons";
-@import "packages/file-icons/styles/items";
-@{pane-tab-selector},
.icon-file-directory {
	&[data-name=".git"]:before {
-		.git-icon;
+		font-family: Devicons;
+		content: "\E602";
	}
}

Instead of @pane-tab… variables, use .tab > .icon[data-path]:

-@pane-tab-selector,
-@pane-tab-temp-selector,
-@pane-tab-override {
+.tab > .icon {
 	&[data-path$=".to.file"] {
 		
 	}
}

These CSS classes are no longer used, so delete them:

-.file-icons-force-show-icons,
-.file-icons-tab-pane-icon,
-.file-icons-on-changes

It's something else.

Please file an issue. Include screenshots if necessary.

Integration with other packages

If you're a package author, you can integrate File-Icons using Atom's services API.

First, add this to your package.json file:

"consumedServices": {
	"file-icons.element-icons": {
		"versions": {
			"1.0.0": "consumeElementIcons"
		}
	}
}

Secondly, add a function named consumeElementIcons (or whatever you named it) to your package's main export:

let addIconToElement;
module.exports.consumeElementIcons = function(func){
	addIconToElement = func;
};

Then call the function it gets passed to display icons in the DOM:

let fileIcon = document.querySelector("li.file-entry > span.icon");
addIconToElement(fileIcon, "/path/to/file.txt");

The returned value is a Disposable which clears the icon from memory once it's no longer needed:

const disposable = addIconToElement(fileIcon, "/path/to/file.txt");
fileIcon.onDestroy(() => disposable.dispose());

NOTE: Remember to remove any default icon-classes before calling the service handler!

 let fileIcon = document.querySelector("li.file-entry > span.icon");
+fileIcon.classList.remove("icon-file-text");
 const disposable = addIconToElement(fileIcon, "/path/to/file.txt");

Sponsors

Huge thanks to the following backers who generously sponsored this project in the past:

<a title="Justin Ireland" href="https://github.com/justinireland"><img alt="Justin Ireland" height="32" src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fwww.gravatar.com%2Favatar%2Fa23264984bdeee03b97d970cd893a595%3Fdefault%3D404"/></a> <a title="Tipe" href="https://tipe.io/"><img alt="Tipe" height="32" src="https://camo.githubusercontent.com/cc8c116a0174ba6f6884fda5415ccd232173d0c7/68747470733a2f2f63646e2e746970652e696f2f746970652f746970652d3130323478313032342e706e67"/></a> <a title="Triplebyte" href="https://github.com/triplebyte"><img alt="Triplebyte" height="32" src="https://avatars3.githubusercontent.com/u/12144133"/></a> <a title="TakeShape" href="https://github.com/takeshape"><img alt="TakeShape" height="32" src="https://avatars0.githubusercontent.com/u/20775272"/></a> <a title="Targeted Web Traffic" href="https://www.targetedwebtraffic.com/"><img alt="Targeted Web Traffic" height="32" src="https://images.opencollective.com/targeted-web-traffic1/7abacc7/logo/256.png"/></a>

Acknowledgements

v1 was originally based on sommerper/filetype-color. v2 was completely rewritten. Both versions owe their success to innumerable contributions from the Atom community.