WordPress Custom Post Type Icons

wordpressLogoSoloThe best new feature in WordPress 3.0 has to be the ability to easily create custom post types. After you’ve created your post type you’ll see it show up in the admin menu with the same “pin” icon as the Posts menu has. This isn’t a huge deal, but it also isn’t difficult to change the icon as long as you have icons to use.

So, thanks to Yusuke Kamiyamane’s great Fugue icon set, I’ve created a sprited icon set made to match the WordPress admin icons. Just add the icon you want into your parent theme’s images folder and add a piece of code to the functions.php file and you’re done.

Update: Please make sure to read Jeff Rose’s comment below. Basically, in the video, I tell you that if you use underscores in your custom post type that WordPress strips these out. Well in 3.2, it no longer does. This means that the CSS will break, so you’ll just need to add the underscores back in from now on.


Download the WordPress Custom Post Type Icons

Functions.php code (WordPress 2.8 and above)

Functions.php code (Less than WordPress 2.8)

How to Use

If you want to check for a specific WordPress number, you can use “if (get_bloginfo(‘version’) >= 2.8)”

Follow Me On Twitter

  • Jared

    You can also do this in a plugin by changing the image URL (if the image is in your plugins folder) from this:
    background: url(/images/YOURIMAGE.png) no-repeat 6px -17px !important;to this:background: url() no-repeat 6px -17px !important;Just commenting in case somebody was wondering how to do this. :)

  • Jared

    Well that comment didn’t work. Here it is again:

    To do this in a plugin just do:

    background: url( no-repeat 6px -17px !important;

  • Jared

    Oh apparently I can’t post PHP code, sorry! :P

  • Nice!… I created a hg repository just to make easy to use this icons across lot of projects.. see it: https://bitbucket.org/danielmartins/cpt-icons/overview 


  • Anonymous

    Thanks very much… I really needed this. :)

  • Waretz

    I’m confused. I have downloaded the Yusuke Kamiyamane icons but do not see the grey version of the icon (inactive), stacked on top of the color one (active) like in your example. Therefore, when not hovering, no icon is displayed.

  • Sounds like you downloaded his icon set. There is a download button above that you need to be click.

  • Jaypee

    Hi there, great tutorial…I’m facing a problem though trying to implement this, and my problem is that I get the icon working perfectly but I also get the white screen of death when I update any post, page or any other thing on my backend. Maybe I’m pasting the code wrong? Not sure, 
    thanks in advance for any help you can provide me.

  • 99% of the time this happens when there’s extra whitespace in the functions.php file. Check around for where you’re opening and closing PHP () and make sure there isn’t any extra space anywhere.

  • Jaypee

    Thanks man! I’m checking my functions.php now, when I remove this code the backend works fine, so the blank space might be within this code? Checking now, thanks again.

  • moria

    Thanks for the icon set. Looks really great. Is there any icon32 version for this? thanks!

  • Testpost

    test post delete it

  • Thanks for this! 3000 icons for free is extremely generous. Will be putting them to good use. 

  • This is awesome stuff.. thanks for creating such a nice wordpress html5 starter theme too! :) 

  • The WP integration and spriting are great, but I think some of these icons could use a little more polish to really blend in with the WordPress admin look’n’feel. I’ve written a post on this very subject here: http://julien-c.fr/2012/07/wordpress-admin-icons/

  • again this is great! enough said

  • Any plans to include @2x copies for retina? :)

  • Unfortunately, since I didn’t create the icons themselves, there’s not much I can do.

    If Yusuke updates them for retina I’d be happy to update the code.

  • Rachel

    hi there!

    i know there haven’t been any comments on here in a year, but I am hoping for some feedback as i’m struggling to implement this code.
    i have checked it over several times and it’s definitely all correct, the images are being referenced correctly, but the icons are not showing. the styles in the functions file just aren’t being picked up.

    anything anybody can suggest?
    i am on a multi-site setup, does that affect this at all?


  • Rachel

    whoops, just reordered the posts and there have been comments in the last few weeks – sorry!
    hope someone can help :)

  • Guy Barry

    Hi, thanks very much indeed, but there are no 32px icons for this set? Pity if not :(

  • Chris Mower

    Holy. Flipping. Cow. I can’t believe how many icons were in that thing. Still flabbergasted. I was expecting 20, instead I got 3,000… sprites. Very cool resource. Thanks.

  • mattoc4

    Thanks for these!
    I just started using Custom Post types and this has helped a lot

  • Neil

    Nice, thanks for that!

  • Great thanks!.

  • user


  • Pingback: Attracto WP – Responsive Theme | themesafe()

  • This is so great. Thanks! I wrote a loop into the function to do this for any number of custom post types where the custom post type name and the image name are the same. Easy!

    // CSS for custom post type icons where $types = the post type and the identical image name. Icons live in /img/cpt-icons/

    add_action( ‘admin_head’, ‘cpt_icons’ );

    function cpt_icons()


    $types = array(‘bugs’, ‘birds’, ‘beasts’, ‘fishes’, ‘aliens’, ‘planets’, ‘universes’);

    foreach ($types as $type)



    #menu-posts- .wp-menu-image {

    background: url(/img/cpt-icons/.png) no-repeat 6px -17px !important;


    #menu-posts-:hover .wp-menu-image, #menu-posts-.wp-has-current-submenu .wp-menu-image {

    background-position:6px 7px!important;





  • Pingback: Star Themes | LikeThis WordPress Theme()

  • Pingback: Attracto WP – Responsive Theme Free Download Nulled Torrent | Crunchy Themes()

  • Pingback: LikeThis WordPress Theme Free Download Nulled Torrent | Crunchy Themes()

  • Pingback: Attracto WP – Responsive Theme | Website Templates()

  • Pingback: Attracto WP – Responsive Theme | Website Templates()

  • Pingback: LikeThis WordPress Theme | Website Templates()

  • Pingback: LikeThis Wordpress Theme | Scripts CodeCanyon()

  • Pingback: Attracto WP – Responsive Theme | Scripts CodeCanyon()

  • Pingback: LikeThis WordPress Theme()

  • Pingback: LikeThis WordPress Theme | WordPress 版型王 ThemeKing()

  • Pingback: Nulled Free Attracto WP - Responsive Theme Download()

  • Pingback: Nulled Free LikeThis Wordpress Theme Download()

  • Pingback: Attracto WP - Responsive Theme - Mister templates()

  • Pingback: Attracto WP – Responsive Theme | Teknoloji()

  • Pingback: Austin WordCamp 2010 | Pixelita Designs()

  • Pingback: Attracto WP - Responsive Theme - Traclaborat()