Sublime Text Default Theme sidebar icons Icon pack for Sublime Text to enable nice icons in your sidebar (more than 20+ file types), just copy and paste, no setup and it's easy to add your own.

by
on April 2, 2015
(2 min read)

In the new version of Sublime Text we can have sidebar icons without any complicated coding. Of course there’s many themes out there that have the icons already built in but that means having more stuff installed and they are usually complicated to customize.

I like to keep things simple and tweak as little as possible, this is not just because everything runs faster, smoother and is more thoroughly tested but because it keeps consistency in the OS and the switch to other workspaces is seamless too. So in Sublime I like to work with the default theme on Dark Monokai, yet some fancy icons on that sidebar come really helpful to see what each file is at a glance. This is how it looks:

The file extensions supported are mostly for Web Development: HTML, CSS, LESS, SASS, JS, JSON, PHP, Twig, Ruby, SQL, XML, Shell script, images, text and binary files. Cool thing about this is that you can add new extensions pretty easily, just look at the existing files.

The icons’ design are from Fugue and I’ve created some new. They are not retina ready although you can do them pretty easily.

Installation

Couldn’t be more simple! To install it in Mac OSX, open Sublime and go to Preferences > Browse Packages. A Finder window will open. Now download this Zip file

Sublime Text 3 sidebar icons for Default Theme

Put it in there so the path looks like this:

Macintosh HD ▸ Users ▸ yourusername ▸ Library ▸ Application Support ▸ Sublime Text 3 ▸ Packages ▸ Theme - Default

Simple Cloud Hosting Built for Developers

If you already have a Theme – Default folder then just merge both folders by pressing the Alt key.

In Windows find the Browse packages button to open the packages folder and paste the Theme – Default folder there.

Did you enjoy this article?

Buy the author a coffee 🤗☕

8 comments

  • Sebastián says:

    Hi, i am trying to put this folder in the correct path but i think that should be “Macintosh HD ▸ Users ▸ yourusername ▸ Library ▸ Application Suport ▸ Sublime Text 3 ▸ Packages”, tell me if i’m wrong, and how i activate, thanks

  • ainur says:

    thank you very much!

  • Jake says:

    @Sebastián: Yeah, the path is wrong. It’s supposed to be in “Packages”.

  • Xavi Author says:

    Thank you Sebastián & Jake, I’ve updated the article to reflect the correct path :)

  • Hexley says:

    Thank you,
    my PC shows .php files with default.png
    how to fix it?

  • Xavi Author says:

    Hi Hexley,

    I’m on a Mac so I can’t help you debug it but I’ll do my best on explaining how it works and how you may be able to fix it.

    Go to PreferencesKey bindings and add:
    { "keys": ["ctrl+o"], "command": "show_scope_name" },
    Now press Control+o while on a .php file. This should give you the “scope names” of PHP files (each file type can have more than one, in the theme we have “source.php”).

    Then go to the Theme you downloaded and open Icon (PHP).tmPreferences, in line 6 where it says source.php try changing it to another source name to see if it works.

  • Hexley says:

    Hi Xavi,
    Thank you very much
    change to embedding.php
    I dit it! :)

  • wasim says:

    it didn’t work for me

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 30€ discount