Using Font Icons (Dashicons) For Custom Post Types in WordPress 3.8

I don’t know about you, but I f*cking love the new WordPress 3.8 admin design. Everything just looks so much better and modern. One of the changes has been the addition of font icons (also known as Dashicons) which replaced the older way of adding icons for the dashboard tabs which was done via images (eww). These new icons look really good and keeps the admin menu very congruent, so why mess it all up with ugly custom post type icons?

Some of my older themes were using icons by Yusuke Kamiyamane which you can find here. And although these icons were commonly used by theme developers and looked pretty decent in the old versions of WP, they look like poop in the WordPress 3.8 dashboard.

So if you are wondering how to make your custom post type icons look good in 3.8 and make use of the Dashicons, the good news is that you can and it’s very very easy!

Using Dashicons For Custom Post Types

When you register a new custom post type, simply set the menu_icon argument equal to the CSS classname of the Dashicon you wish to use.

When you visit the Dashicons landing page simply click on any icon you would like to use and you’ll see the classname at the top next to the icon so you can copy and paste it.


// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
	'public' => true,
	'menu_icon' => 'dashicons-portfolio',
	'label' => __( 'Portfolio', 'local' ),


Below is a screenshot showing what the dashicon icon would look like for the portfolio post type. As you can see it matches the default WordPress admin user interphase which is much better then having a custom image icon that doesn’t match.


Notice: There isn’t any fallback for WP versions under 3.8, so if you use the Dashicons for the custom post types it will show a broken image in older version of WordPress – this isn’t really a problem because people should update, but thought I’d point it out.

  • Updated on:
  • Posted Under: Tips
AJ Clarke
Post Author: AJ Clarke

Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.

Got something to say? Join the discussion.
  1. Such an easy to implement solution for customising the post type ui. Already updating my themes. Love these icons! Thanks for sharing!
    • Thats awesome AJ! I found this post when searching for a way to include icons in my custom post type defintion. I had no idea about dashicons. I'm creating a Events plugin. Turns out that there is an dashicon called 'dashicon-calendar'. Simply passing that string into the parameter 'menu_icon' allows the calendar icon to be output in the dashboard sidebar. Thanks!
      • AJ Clarke says:
        AJ Clarke
        Awesome! Share the calendar plugin when you're done so I can check it out ;)
  2. Distinctive Themes says:
    Brilliant :) perfect timing too Thank you AJ
  3. Gil Hamer says:
    I have been struggled a lot using the old method of using special function and custom icons to customize the CPT menu icon. this makes it whole lot faster and cleaner. Thanks for the tip!
  4. Wasil Burki says:
    I followed the instructions but the CPT icons don't show in WP 3.8. Please help!
    • AJ Clarke | WPExplorer says:
      AJ Clarke | WPExplorer
      There is no way I can help you without actually looking in the backend...Unfortunately we aren't available for hire at the moment. Double check that you are using the correct names and maybe inspect it with Firebug to see what's going on. Also make sure that the icons aren't being overwritten possibly by another function.
  5. jjschaeffer says:
    Hi A.J., Great post ! in your awesome Pytheas theme, you've Font Awesome, but version 3.8, with few icons, compared with Font Awesome 4.0.3 Could dashicon replace this ?
    • AJ Clarke says:
      AJ Clarke
      Can't do...Dashicons load in the admin side of WP (and there are less dashicons also). I'll update FontAwesome in that theme as soon as I can, it's gonna take a while though and I have about 30 themes using FontAwesome so it isn't a super quick task (the new version uses different classnames).
  6. Jean-Jacques Schaeffer (or gigi3351) says:
    thanks for your answer, I can imagine with 30 themes, that will be a lot of work ! See my website, on Pytheas theme... I can provide you, my, fr-FR.po for this theme, if you send me, an email to do that.
    • AJ Clarke says:
      AJ Clarke
      That would be awesome. I'll email you directly at the email provided in the comment. Thanks!
  7. A short comment just to say thank you! :)
  8. Morgan Estes (morganestes) says:
    Just what I needed today. Thank you!
  9. AbuBakar says:
    I used this as a fallback <?php global $wp_version; if( version_compare( $wp_version, '3.8', '
    • AJ Clarke says:
      AJ Clarke
      Your code didn't go through the comments ;( Either-way, I'm not a huge fan of fallbacks when it comes to WordPress, people should ALWAYS update to the latest version, there are no excuses ;)
  10. AbuBakar says:
    yup no excuses at all but we have to count in lazy ones :) and world is full of them
  11. Gabriel S Merovingi says:
    Thank you for this! I noticed it can also be used with the add_menu_page function which is awesome.
  12. Awesome tutorial. Thanks for sharing!
  13. Julien Maury says:
    Awesome font ! I've made a plugin which uses a shortcode to use this brilliant font on frontend, hope this will help :
  14. is this your theme??
    • AJ Clarke says:
      AJ Clarke
      Yes. But it's ok because they haven't altered the style.css in the theme and it is GPL. That said, people should always download the theme's straight from the developer's website to make sure it's the latest version. I tried the download that guy offers on his youtube video and its REALLY outdated.
  15. JuaraThemes (@juarathemes) says:
    Hi AJ, is there some official documentation for dashicons? like cheatsheet for the icon list and come with preview? Just like fontAwesome website.
    • AJ Clarke says:
      AJ Clarke
      Just visit this site - - and click on any icon to see the classname at the top.
  16. Awesome! Thank you, now I don't need to add custom admin CSS to do this!
  17. Thanks! This saved a lot of work!
  18. perfect! thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *