Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

How to Use Dashicons in WordPress

Last updated on:
How to Use Dashicons in WordPress

Dashicons are a built-in core set of font icons in WordPress that were introduced back in WordPress 3.8 when they did the massive backend UI redesign and by default are used for the various links on the left-hand admin bar. These icons while they were built for core they can be used in your own custom plugins and themes, not only when defining custom post types or creating custom admin panels but also on the front-end theme design if you wish. Best of all, it’s very easy!

Using Dashicons For Custom Post Types

When you register a new custom post type in WordPress all you have to do is set the menu_icon argument equal to the CSS classname of the Dashicon you wish to use and this icon will be defined as the icon displayed on the left hand-hand-side of your custom post type name in the WordPress admin panel. Simply visit theΒ Dashicons landing page and 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.

Example:

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

Screenshot:

Below is a screenshot showing how the Dashicon icon would look like for the portfolio post type. I don’t know if you remember, but before Dashicons you would have to set a custom image URL for your post type icon and when you were using many plugins on the site often times icons didn’t match and the admin looked pretty bad. Now your post type icons will match the default WP UI and look good.

wordpress-dashicons-screenshot

Using Dashicons on the Front-End Theme Design

A lot of themes these days make use of icons for the front-end for things like post meta (date, category, tag, author) as well as header icons such as user, search and shop icons. While the most heavily used and popular font icon set out there is FontAwesome and it works great for most projects it is also a very large icon set including many icons you probably would never use; you could use a font generator website such as FontelloΒ to create a stylesheet of only the icons you need, but another alternative is to useDashicons which is already included in your WordPress installation all you have to do is load the scripts on the front end.

Simple add the following to your theme’s functions.php to load Dashicons on the front-end (insert via a child theme if you are customizing an existing theme and not making your own).

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

Now you can insert an icon via HTML as such:

<span class="dashicons dashicons-menu"></span>

Simple change where it says “menu” to the icon you wish to use. This HTML can be pasted anywhere in the theme where you want an icon displayed. You can even insert the HTML into your menu items by pasting the HTML right into your menu item’s “label” field.

How to Create a Dashicons Shortcode

Another solution for using Dashicons on the front-end would be to create a shortcode that you can use anywhere on the site. This is a good option if you are making a site for a client and want to make it easier for them to insert icons on the site so they don’t have to mess around with HTML. Below is an example of what that code may look like, simply add the code to your functions.php file (or other non-template file being loaded by functions.php)

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( array(
		'icon' => 'menu',
	), $atts, 'bartag' );
	if ( ! empty( $atts[ 'icon' ] ) ) {
		return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
	}
} );

Shortcode usage:

[dashicon icon="chart-pie"]

Note: The shortcode above assumes you have already followed the previous step and loaded the Dashicons stylesheet on your front-end. If you have not done that you can simply add the “wp_enqueue_style” function from the snippet above right into the shortcode and the stylesheet will only be loaded when an icon is used. However, it’s recommended to load the script globally otherwise the dashicons stylesheet will load in the footer of your site so icons will render after your site has rendered and will cause a slight “flash”.

Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

27 Comments

  1. Dean

    Such an easy to implement solution for customising the post type ui. Already updating my themes. Love these icons! Thanks for sharing!

    • Sunil

      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

        Awesome! Share the calendar plugin when you’re done so I can check it out πŸ˜‰

  2. Distinctive Themes

    Brilliant πŸ™‚ perfect timing too

    Thank you AJ

  3. Gil Hamer

    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

    I followed the instructions but the CPT icons don’t show in WP 3.8. Please help!

    • 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

    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

      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)

    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

      That would be awesome. I’ll email you directly at the email provided in the comment. Thanks!

  7. Richard

    A short comment just to say thank you! πŸ™‚

  8. Morgan Estes (morganestes)

    Just what I needed today. Thank you!

  9. AbuBakar

    I used this as a fallback

    <?php
    global $wp_version;
    if( version_compare( $wp_version, '3.8', '

    • 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

    yup no excuses at all but we have to count in lazy ones πŸ™‚ and world is full of them

  11. Gabriel S Merovingi

    Thank you for this! I noticed it can also be used with the add_menu_page function which is awesome.

  12. seba

    Awesome tutorial. Thanks for sharing!

  13. Julien Maury

    Awesome font ! I’ve made a plugin which uses a shortcode to use this brilliant font on frontend, hope this will help : http://wordpress.org/plugins/jm-dashicons-shortcode

    • AJ Clarke

      The plugin looks nice, thanks for sharing!

  14. Todd

    youtube.com/watch?v=8bOZvTx8mx0 is this your theme??

    • 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)

    Hi AJ, is there some official documentation for dashicons? like cheatsheet for the icon list and come with preview?
    Just like fontAwesome website.

  16. CFX

    Awesome! Thank you, now I don’t need to add custom admin CSS to do this!

  17. John

    Thanks! This saved a lot of work!

  18. PedroC

    perfect! thanks!

Leave a Reply

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

Learn how your comment data is processed by viewing our privacy policy here.