File Type Icons package


Continuing the discussion from Show us your atom setup:

I really liked @abe’s file type icons and quickly adopted them (though I did change a couple icons to suit my tastes) into my user stylesheet. But when I got asked about which package did that for me, I figured I’d go ahead and make a package for it. So I created the File Type Icons package.

The major difference between my icons and @abe’s is I removed the colors. I figured those would change significantly depending on the theme being used.

I’m definitely open to suggestions for improvements!


love it! thx!

BUT: This should be a PR to, cant see why this ain’t the standard?


@tcarlsen File type icon is based on data-name HTML attribute.
So it can automatically work with all packages “files based” (example “Fuzzy finder” is pretty with the icons added automatically).


I could do it as a PR to Tree View or Core too if the Atom team is interested.

cc @ProbablyCorey


Actually, while searching through the available packages … I just found out that someone has already made a package like mine and already has a few of the improvements that I had planned including customizability: File Icons.


I like this, I’m going to install the package right now! But we are leaning pretty heavily towards using packages, instead of modifying core, to add functionality right now. If there is a missing API or a way that would make writing this package easier I would love to get those changes into core.

Decorate file names with type or scope

Maybe as an included plugin? Putting these into core could have conflicts with themes that do this as well. I prefer (some) of the icons that seti-ui provides over the ones shown. I kind of want the markdown icon though :stuck_out_tongue:


There’s something to do with the loading of the user’s stylesheet that makes certain things I want to do hard, but I haven’t tracked it down quite yet. Once I do, I’ll post it here on the forum.


I’m the file-icons author and this is the LESS required to set the icon for the TreeView, FuzzyFinder and Tabs

@pane-tab-selector: ~'.pane .title';
@{pane-tab-selector}, .icon-file-text {
     &[data-name$=".js"]:before  { .code-icon; .medium-yellow; }

This now works because data-name is set in the right places, adding .icon-file-text to the tabs would simply the selectors required.


Indeed, it was a bit boring to solve … @DanBrooker a small “thanks” (for 3hr I spent on this) does not hurt :stuck_out_tongue:

Additionally, only this is the LESS required to set the icon for the TreeView, FuzzyFinder and Tabs:

[data-name$=".js"]:before  { .code-icon; .medium-yellow; }

But it will not be fine because the data-name attribute is succeptible to be used elsewhere… icons that appear in the code would not the desired behavior :smile:

This selects the title of the tabs:

.pane .title

This is the icons used in the tabs (and elsewhere):

With this way it is possible to select (and override) specific icons as desired.


.icon-book {
     &[data-name$=".md"]:before  { .code-icon; .medium-blue; }

or couple

@{pane-tab-selector}, .icon-book {
   &[data-name$=".md"]:before  { .code-icon; .medium-blue; }

Stored in a separate LESS file like
it’s convenient for add more like @{treeview-selector}, @{what you want-selector}, …

PS: Sorry for my english.


@Nicolab yes of course, thanks for you solving that one :smiley: